search panel working(currency input)

- With Currency formatter

by niki4810

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/0.1.3/Backbone.ModelBinder-min.js"></script>
<script src="http://addyosmani.github.com/jquery-ui-bootstrap/third-party/jQuery-UI-Date-Range-Picker/js/date.js"></script>
<script src="http://addyosmani.github.com/jquery-ui-bootstrap/third-party/jQuery-UI-Date-Range-Picker/js/daterangepicker.jQuery.js"></script>
<link rel="stylesheet" href="http://addyosmani.github.com/jquery-ui-bootstrap/third-party/jQuery-UI-Date-Range-Picker/css/ui.daterangepicker.css">
<script src="http://www.bendewey.com/code/formatcurrency/jquery.formatCurrency-1.4.0.js"></script>
<hr/>
<div id="searchContainer">
    <div id="term1">
    Name : 
    </div>
    <div id="term2">
    DOB: 
    </div>       
</div> 
<br/>
<hr/>
<button id="mySearchButton">Search</button>
<button id="myLoadButton">Load</button>
<button id="myClearButton">Clear</button>
    
    <input id="datePicker" name ="myDate" type="text"/>
    <input id="textInput" name ="myText" type="text"/>

CSS

#searchContainer,#term1,#term2{
float : left;
}

JavaScript

$(function() {

    //step 0 : Interface for search term
    var SearchTerm = Backbone.View.extend({
        getAttrPath: function() {
            throw "Expected attr Path to be defined";
        },
        getVal: function() {
            throw "Expected getVal() to be implemented in sub classes";
        },
        setVal: function(value) {
            throw "Expected setVal() to be implemented in sub classes";
        },
        resetVal: function() {
            throw "Expected resetVal() to be implemented in sub classes";
        }

    });
    //step 1: create a date range picker search term
    var DatePickerSearchTerm = SearchTerm.extend({

        el: '#datePicker',

        render: function() {
            this.$el.datepicker(); //.daterangepicker();//;
            return this;
        },
        getAttrPath: function() {
            return this.$el.attr("name");
        },
        getVal: function() {

            return this.$el.datepicker("getDate");
        },
        setVal: function(value) {
            this.$el.datepicker("setDate", value);
        },
        resetVal: function() {
            this.$el.datepicker("setDate", null);
        }
    });
    //step 2: create a text input search term
    var TextInputSearchTerm = SearchTerm.extend({

        el: '#textInput',

        render: function() {
            return this;
        },
        getAttrPath: function() {
            return this.$el.attr("name");
        },
        getVal: function() {
            console.log();
            return this.$el.val();
        },
        setVal: function(value) {
            this.$el.val(value);
        },
        resetVal: function() {
            this.$el.val(null);
        }
    });
    
        //step 2: create a text input search term
    var CurrencyTextInputSearchTerm = SearchTerm.extend({

        el: '#textInput',
        events:{
            "change" : "handleTextChange"
        },
        handleTextChange:function(e){
           ...