multiple instances of a datepicker on single input

multiple instances of a datepicker on single input

I have a drop down(asp.net) with list items "month" & "day"..and i have a text box control and a datepicker..
 if i select "month" then i should be able get a datepicker with only month & year displayed and if i select day then day month & year as a normal date picker..i have this following code but the problem with this is a single input not able hold two instances of datepicker..any help is very much appreciated !! thanks in advance.


  2. <script type="text/javascript">
  3.         
  4.         function formatondropdownchange(value) {
  5.             if (value == "2") {
  6.                 $("#datepicker1").datepicker({
  7.                     showOn: "button",
  8.                     buttonImage: "calender.png",
  9.                     buttonImageOnly: true,
  10.                     minDate: "-3M",
  11.                     maxDate: "0",
  12.                     changeMonth: true,
  13.                     changeYear: true,
  14.                     dateFormat: 'MM yy',
  15.                     showButtonPanel: true,
  16.                     onClose: function (dateText, inst) {
  17.                         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
  18.                         var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
  19.                         $(this).datepicker('setDate', new Date(year, month, 1));
  20.                     },
  21.                     beforeShow: function (input, inst) {
  22.                         if ((datestr = $(this).val()).length > 0) {
  23.                             year = datestr.substring(datestr.length - 4, datestr.length);
  24.                             month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $(this).datepicker('option', 'monthNames'));
  25.                             $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
  26.                             $(this).datepicker('setDate', new Date(year, month, 1));
  27.                         }
  28.                     }
  29.                 })
  30.                 $("#datepicker1").focus(function () {
  31.                     $(".ui-datepicker-calendar").hide();
  32.                     $("#ui-datepicker-div").position({
  33.                         my: "center top",
  34.                         at: "center bottom",
  35.                         of: $(this)
  36.                     })
  37.                 })

  39.             }
  40.             else if (value == "3") {
  41.                 $("#datepicker1").datepicker({
  42.                     showOn: "button",
  43.                     buttonImage: "calender.png",
  44.                     buttonImageOnly: true,
  45.                     minDate: "-20",
  46.                     maxDate: "0",
  47.                     dateFormat: 'yy-MM-dd'

  49.                 })
  50.             }
  51.         }
  52.     </script>

  54. <input type="text" id="datepicker1"  />
  56.  <asp:DropDownList runat="server" ID="ddlInterval" Height="20px" Width="125px" AutoPostBack="false"
  57.             ClientIDMode="static" onChange="formatondropdownchange(this.value)" >
  58.             <asp:ListItem Text="select" Value="select" />
  59.             <asp:ListItem Text="Month" Value="2" />
  60.             <asp:ListItem Text="Day" Value="3" />
  61.             <asp:ListItem Text="Hour" Value="4" />
  62.         </asp:DropDownList>