jQuery UI datepicker binding
<p>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</p>

<pre><code>$(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 );
            }
        });
    });
</code></pre>

<hr>

<p>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</p>

<pre><code>&lt;label for="from"&gt;From&lt;/label&gt;
&lt;input type="text" id="from" name="from" /&gt;
&lt;label for="to"&gt;to&lt;/label&gt;
&lt;input type="text" id="to" name="to"/&gt;
</code></pre>

<p>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</p>

<pre><code>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 );
}
});
},
</code></pre>
