Question

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

如果我选择“月”，那么我应该能够获得一个只有月份和时间的日期选择器。显示的年份，如果我选择日期，则选择日期和日期。年作为一个正常的日期选择器..我有以下代码，但这个问题是一个单一的输入不能举行两个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>

单个输入上的多个datepicker实例

1 个答案: