单个输入上的日期选择器的多个实例

Question

I have a drop down(asp.net) with list items "month" & "day"..and i have a text box control and a 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>