несколько экземпляров DatePicker на одном входе

Question

I have a drop down(asp.net) with list items "month" & "day"..and i have a text box control and a datepicker.. 

если я выбрать «месяц», то я должен быть в состоянии получить DatePicker только с месяцем & года отображается, и если я выбираю день, то день месяц & года как обычный выбор даты. .i есть этот следующий код, но проблема с этим - это единственный вход, который не может содержать два экземпляра datepicker. Любая помощь очень ценится !! заранее спасибо.

<script type="text/javascript"> 

     function formatondropdownchange(value) { 
      if (value == "2") { 
       $("#datepicker1").datepicker({ 
        showOn: "button", 
        buttonImage: "calender.png", 
        buttonImageOnly: true, 
        minDate: "-3M", 
        maxDate: "0", 
        changeMonth: true, 
        changeYear: true, 
        dateFormat: 'MM yy', 
        showButtonPanel: true, 
        onClose: function (dateText, inst) { 
     var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
     var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
         $(this).datepicker('setDate', new Date(year, month, 1)); 
        }, 
        beforeShow: function (input, inst) { 
         if ((datestr = $(this).val()).length > 0) { 
          year = datestr.substring(datestr.length - 4, datestr.length); 
          month = jQuery.inArray(datestr.substring(0, datestr.length - 5),        $(this).datepicker('option', 'monthNames')); 
        $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); 
          $(this).datepicker('setDate', new Date(year, month, 1)); 
         } 
        } 
       }) 
       $("#datepicker1").focus(function() { 
        $(".ui-datepicker-calendar").hide(); 
        $("#ui-datepicker-div").position({ 
         my: "center top", 
         at: "center bottom", 
         of: $(this) 
        }) 
       }) 

      } 
      else if (value == "3") { 
       $("#datepicker1").datepicker({ 
        showOn: "button", 
        buttonImage: "calender.png", 
        buttonImageOnly: true, 
        minDate: "-20", 
        maxDate: "0", 
        dateFormat: 'yy-MM-dd' 

       }) 
      } 
     } 
    </script> 

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

Answer 1

Вы должны уничтожить предыдущий экземпляр datepicker перед созданием другого. Вы можете сделать это, используя "destroy" method. Попробуйте этот код:

function formatondropdownchange(value) { 

     $("#datepicker1").datepicker('destroy'); 

     if (value == "2") { 
      $("#datepicker1").datepicker({ 
       showOn: "button", 
       buttonImage: "calender.png", 
       buttonImageOnly: true, 
       minDate: "-3M", 
       maxDate: "0", 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: 'MM yy', 
       showButtonPanel: true, 
       onClose: function (dateText, inst) { 
    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
        $(this).datepicker('setDate', new Date(year, month, 1)); 
       }, 
       beforeShow: function (input, inst) { 
        if ((datestr = $(this).val()).length > 0) { 
         year = datestr.substring(datestr.length - 4, datestr.length); 
         month = jQuery.inArray(datestr.substring(0, datestr.length - 5),        $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); 
         $(this).datepicker('setDate', new Date(year, month, 1)); 
        } 
       } 
      }) 
      $("#datepicker1").focus(function() { 
       $(".ui-datepicker-calendar").hide(); 
       $("#ui-datepicker-div").position({ 
        my: "center top", 
        at: "center bottom", 
        of: $(this) 
       }) 
      }) 

     } 
     else if (value == "3") { 
      $("#datepicker1").datepicker({ 
       showOn: "button", 
       buttonImage: "calender.png", 
       buttonImageOnly: true, 
       minDate: "-20", 
       maxDate: "0", 
       dateFormat: 'yy-MM-dd' 

      }) 
     } 
    } 
</script>