Utiliser datepicker de Jquery ui pour controler les menu déroulants

Voici un petit exemple d'utilisation de datepicker de jquery UI pour contrôler les valeurs des champs "jour" et "mois_année". J'ai également ajouté les paramètres "minDate" et "maxDate" pour limtier le choix des dates sur le calendrier entre le 1er janvier 2009 et 31 décembre 2010. L'affichage des dates est au format français.

1  
2      <script type="text/Javascript" src="/js/jquery-1.3.1.js"></script>
3      <script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
4      <link rel="stylesheet" href="/js/jquery-ui.css" type="text/css" media="all" />
5      <script type="text/javascript">
6      jQuery(function($){
7          $.datepicker.regional["fr"] = {
8              closeText: "Fermer",
9              prevText: "&#x3c;Préc",
10              nextText: "Suiv&#x3e;",
11              currentText: "Courant",
12              monthNames: ["Janvier","Février","Mars","Avril","Mai","Juin",
13              "Juillet","Août","Septembre","Octobre","Novembre","Décembre"],
14              monthNamesShort: ["Jan","Fév","Mar","Avr","Mai","Jun",
15              "Jul","Aoû","Sep","Oct","Nov","Déc"],
16              dayNames: ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"],
17              dayNamesShort: ["Dim","Lun","Mar","Mer","Jeu","Ven","Sam"],
18              dayNamesMin: ["Di","Lu","Ma","Me","Je","Ve","Sa"],
19              dateFormat: "dd/mm/yy", firstDay: 1,
20              isRTL: false};
21          $.datepicker.setDefaults($.datepicker.regional["fr"]);
22      });
23      
24        $(document).ready(function(){
25          $("#datepicker").datepicker(
26              {showOn: "button",  
27              buttonText: "cal", 
28              minDate: new Date("2009", "00", "01"),
29              maxDate:new Date("2010", "11", "31"),
30              onSelect: function(dateText) { 
31                  $("#day").val(dateText.substring(0, 2));  
32                  $("#month_year").val(dateText.substring(6, 10)+"-"+dateText.substring(3, 5));  
33              }
34          });
35        });
36      </script>
37      <select name="day" id="day">
38          <option vlaue="01"  >01</option>
39          <option vlaue="02"  >02</option>
40          <option vlaue="03"  >03</option>
41          <option vlaue="04"  >04</option>
42          <option vlaue="05"  >05</option>
43          <option vlaue="06"  >06</option>
44          <option vlaue="07"  >07</option>
45          <option vlaue="08"  >08</option>
46          <option vlaue="09"  >09</option>
47          <option vlaue="10"  >10</option>
48          <option vlaue="11"  >11</option>
49          <option vlaue="12"  >12</option>
50          <option vlaue="13"  >13</option>
51          <option vlaue="14"  >14</option>
52          <option vlaue="15"  >15</option>
53          <option vlaue="16"  >16</option>
54          <option vlaue="17"  >17</option>
55          <option vlaue="18"  >18</option>
56          <option vlaue="19"  >19</option>
57          <option vlaue="20"  >20</option>
58          <option vlaue="21"  >21</option>
59          <option vlaue="22"  >22</option>
60          <option vlaue="23"  >23</option>
61          <option vlaue="24"  >24</option>
62          <option vlaue="25"  >25</option>
63          <option vlaue="26"  >26</option>
64          <option vlaue="27"  >27</option>
65          <option vlaue="28"  >28</option>
66          <option vlaue="29"  >29</option>
67          <option vlaue="30"  >30</option>
68          <option vlaue="31"  >31</option>
69      </select> 
70      
71      <select name="month_year" id="month_year">
72          <option value="2009-01" >Janvier 2009</option>
73          <option value="2009-02" >Février 2009</option>
74          <option value="2009-03" >Mars 2009</option>
75          <option value="2009-04" >Avril 2009</option>
76          <option value="2009-05" >Mai 2009</option>
77          <option value="2009-06" >Juin 2009</option>
78          <option value="2009-07" >Juillet 2009</option>
79          <option value="2009-08" >Août 2009</option>
80          <option value="2009-09" >Septembre 2009</option>
81          <option value="2009-10" >Octobre 2009</option>
82          <option value="2009-11" >Novembre 2009</option>
83          <option value="2009-12" >Décembre 2009</option>
84          <option value="2010-01" >Janvier 2010</option>
85          <option value="2010-02" >Février 2010</option>
86          <option value="2010-03" >Mars 2010</option>
87          <option value="2010-04" >Avril 2010</option>
88          <option value="2010-05" >Mai 2010</option>
89          <option value="2010-06" >Juin 2010</option>
90          <option value="2010-07" >Juillet 2010</option>
91          <option value="2010-08" >Août 2010</option>
92          <option value="2010-09" >Septembre 2010</option>
93          <option value="2010-10" >Octobre 2010</option>
94          <option value="2010-11" >Novembre 2010</option>
95          <option value="2010-12" >Décembre 2010</option>
96      </select>
97      <input type="hidden" id="datepicker" />
Voir demo