dropdown list with datepicker in jquery

Hi Guys,
If you want to change drop down list values for month,day and year for chosen date from datepicket of jquery,
you can achieve this easily.

Here are the steps involve to do this

1) add the neccessary js and css files.
 in my case this was as follows :

<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.6.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.datepicker.js"></script>
    <link rel="stylesheet" href="../demos.css"> 

2) now write html for all these three drop downs in my case this was following :
  

month:
  <select id="Month">
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">Aug</option>
  </select>

  Day:
  <select id="Day">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  and so on ...
  </select>

  Year:
  <select id="Year">
  <option value="2010">2010</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  <option value="2016">2016</option>
  <option value="2017">2017</option>
  </select>

3) now what we want to do is to change the value of all the three dropdowns whenever datepicket date changes to do this write the following in script section.

<script>
   $(function() {
        $( "#datepicker" ).datepicker({
            onSelect: function(dateText, inst) {
                    var startDate = new Date(dateText);
                    var selDay = startDate.getDate();
                    var selmonth=startDate.getMonth()+1;
                    var selyear=startDate.getFullYear();
                    $("#Day").val(selDay);
                    $("#Month").val(selmonth);
                    $("#Year").val(selyear);
                 }

        });
    });
</script>  

what we did here ....
first we read the selected date from datepicket and then change the selected value of all the three dropdowns accordingly so finally selected index will also changes and you will see changed date every time you change the value of datepicker.