Jquery UI date picker is not working

Question

I use jquery ui to add date picker when i click on a text field. But it's Year and month selector are not working. What is the mistake?

function date() {

                                        $("#dob").datepicker();
                                        $("#dob").datepicker("show");
                                        $("#dob").datepicker({
                                            changeMonth: true,
                                            changeYear: true,
                                            yearRange: "1900:1996"
                                        });


                                    }

And my input field code is this

<input type="text" onclick="date()" id="dob"/>

Answer 1

You need not to call a function on click of input and bind datepicker every time. Also just one call is enough rather calling it three times.

first call is binding datepicker with default setting

$("#dob").datepicker();

second call is to show datepicker, it is not required as on click of input it will popup automatically

$("#dob").datepicker("show");

and third call is to show datepicker with your options like show year and month

$("#dob").datepicker({
   changeMonth: true,
   changeYear: true,
   yearRange: "1900:1996"
});

And you need only third datepicker call for your requirement, Use below code

<input type="text" id="dob"/>

jQuery

$(function(){
    $("#dob").datepicker({
       changeMonth: true,
       changeYear: true,
       yearRange: "1900:1996"
    });
});

Demo

Answer 2

You can achieve by using the following code

     <form>
        <fieldset> 
        <input type="text" id="datepicker"/>  
        </fieldset>
     </form>

The script as follows

    $("#datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1900:1996"

    });

JSFIDDLE