jQuery UI datepicker binding

Question

I'm new to the javascript and JQuery concept, I just want to have a datepicker for getting the date range. I have the js and jsp with 2 fields as :to" and "from", as separate files and I bind the js file in the jsp page with data -bind. But I want to know how to call this method (to bringup the date picker) when I click on the text box and get the values which are selected (start and end date) from the var dates ? The function given in the JQuery site is

$(function() {      

var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });

---

Thanks for your input, Yes, I have the exact id in the jsp file and I have the script as model in a separate js file and I bind the model with data-bind in the jsp.and I added the script as you mentioned, but the method not at all called, so i changed the jsp as

<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to"/>

and I modified the function like below and I called the calender method on the click event of both the text fields, the method is getting called, but i'm not able to get the selected from and to date, no idea how to get from the var dates. I need to get the from date in a ko.observal() and the end date too.Highly appriciate your help

calender: function(){
console.log("in calender");
var dates = $( "#from, #to" ).datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
},

Answer 1

#from and #to are the ids of the textboxes. If you have have the following in your code it will autmatically show the datepicker when you click inside one of the textboxes:

HTML

<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>

Javascript

$(function() {
    var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });

You do not have to do anything else because jQuery takes care of the rest. Without seeing your html and without more information, I would assume your ids do not match.