jquery - 通过 Bootstrap 日期选择器的下拉菜单更改 View 的问题

Question

当我尝试根据下拉列表中选择的模式更改日期选择器的 View 时，我遇到了 Bootstrap 日期选择器的问题。

以下是 HTML 代码:

Mode : <select id="mode">
    <option value="1">Day</option>
    <option value="2">Month</option>
    <option value="3">Year</option>
</select>
<br><br>
From : <input type="text" id="from" /> 
&nbsp;To : <input type="text" id="to" />

jQuery 代码:

$("#from").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
});
$("#to").datepicker({
    autoclose: true,
    startDate: '+1d',
    endDate: '+1y',
    clearBtn: true,
    todayHighlight: true,
    orientation: "top right"
});

$("#mode").change(function(){
    jQuery("#to").removeAttr('disabled');
    $("#from").val('');
    $("#to").val('');
    $("#from").datepicker('update');
    $("#to").datepicker('update');
    $("#from").datepicker("remove");
    $("#to").datepicker("remove");
    if ($(this).val() == 2){
        $("#from").datepicker({
            autoclose: true,
            startDate: '0',
            endDate:'+1y',
            startView: 1,
            minViewMode: 1,
            clearBtn: true,
        });
        $("#to").datepicker({
            autoclose: true,
            startDate: '0',
            startView: 1,
            endDate:'+1y',
            minViewMode: 1,
            clearBtn: true,
            orientation: "top right"
        });
        $("#from").datepicker().on("clearDate", function(){
            $("#to").val('');
            $("#to").datepicker('update');
        });
        $("#to").datepicker().on("clearDate", function(){
            $("#from").val('');
            $("#from").datepicker('update');
        });

        $("#from").datepicker().on("changeDate", function(){
            var fromDate    = $("#from").datepicker("getDate");
            if (fromDate != "Invalid Date" && fromDate != '' ) {
                fromDate.setMonth(fromDate.getMonth() + 1, 1);
                $("#to").datepicker("setDate", fromDate);
                $("#to").datepicker("setStartDate", fromDate);
                $("#to").datepicker("update");
            }
        });
        $("#to").datepicker().on("changeDate", function(){
            var toDate  = $("#to").datepicker("getDate");
            if (toDate != "Invalid Date") {
                $("#from").datepicker("setEndDate", toDate);
                $("#from").datepicker("update");
            }
        });
    }else if($(this).val() == 3){
        jQuery("#to").attr('disabled', 'disabled');
        $("#from").datepicker({
            autoclose: true,
            startDate: '0',
            endDate:'+1y',
            startView: 0,
            minViewMode: 0,
            clearBtn: true,
        });

        //clear event for the datepicker
        $("#from").datepicker().on("clearDate", function(){
            $("#to").val('');
            $("#to").datepicker('update');
        });
        $("#to").datepicker().on("clearDate", function(){
            $("#from").val('');
            $("#from").datepicker('update');
        });

        //set startdate event for the datepicker
        $("#from").datepicker().on("changeDate", function(){
            var fromDate    = $("#from").datepicker("getDate");
            if (fromDate != "Invalid Date") {
                fromDate.setDate(fromDate.getDate() + 365);
                $("#to").datepicker("setDate", fromDate);
                $("#to").datepicker("setStartDate", fromDate);
            }
        });
        $("#to").datepicker().on("changeDate", function(){
            var toDate  = $("#to").datepicker("getDate");
            if (toDate != "Invalid Date") {
                $("#from").datepicker("setEndDate", toDate);
            }
        });
    }else{
        $("#from").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
        });
        $("#to").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
            orientation: "top right"
        });
    }
});

我想做的是，我有三种类型的模式:日、月和年。当我在下拉列表中选择月份时，在其更改事件上，我需要删除与日期选择器绑定(bind)的所有先前事件，并将新事件与日期选择器绑定(bind)。

但是，多次更改模式后，事件不再绑定(bind)，并且停止在输入框中设置值。

我不确定这是否是正确的方法，如果有任何其他方法可以做到这一点，那么它将非常有帮助。

如有任何帮助，我们将不胜感激。提前致谢。

这是代码的jsfiddle链接:http://jsfiddle.net/tejashsoni111/aL9vB/2/

这是文档的链接:http://bootstrap-datepicker.readthedocs.org/en/release/

Answer 1

只有一种方法，为您的日期/时间选择器创建一个原型(prototype)，如下所示

<div id="fake_from_container" style="display:none">
<input type="text" class="fake_text" /> 
</div>
<div id="from_container>
</div>

然后每当您想初始化日期/时间选择器时，请尝试

$('#from_container').html($('#fake_from_container').html());
$('.fake_text', $('#from_container')).attr('id', 'from');

$("#from").datepicker().....

想法是:首先，fake_from_container只是存储输入的html代码， 每次您想要重新初始化日期/时间选择器时，您都将从头开始创建输入，方法是将 html 代码从 $('#fake_from_container') 复制到 $('#from_container')，之后，#from_container 将是

<div id="from_container>
    <input type="text" class="fake_text" /> 
</div>

然后，在#from_container中设置输入项的id

$('.fake_text', $('#from_container')).attr('id', 'from');

你将会拥有

<div id="from_container>
    <input type="text" class="fake_text" id='from' /> 
</div>

然后，您可以使用任何选项来初始化日期/时间选择器以获取新输入#from