通过引导日期选择器的下拉菜单更改视图的问题

Posted 2023-05-07

技术标签:

【中文标题】通过引导日期选择器的下拉菜单更改视图的问题【英文标题】：Issue in changing view by dropdown of bootstrap datepicker 【发布时间】：2014-07-20 07:19:43 【问题描述】：

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

以下是 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"
        );
    
);

我想做的是，我有三种模式：日、月和年。当我在下拉列表中选择月份时，在其更改事件中，我需要删除所有以前与 datepicker 绑定的事件，并将新事件与 datepickers 绑定。

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

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

我们将不胜感激。提前致谢。

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

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

【问题讨论】：

【参考方案1】：

只有一种方法，像这样为您的日期/时间选择器创建一个原型

<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 的任何选项来初始化日期/时间选择器

【讨论】：

感谢您的回答，但我不完全理解，如果您可以更改我的 jsfiddle 代码，那将非常有帮助。我修改了答案感谢更新和更详细的答案，我实现了这个解决方案，它适用于下拉更改事件，但是日期选择器仍然存在一些问题。例如：如果我选择任何未来日期，然后尝试选择其他日期过去到所选日期，那么两个输入中的日期都是空白的。根据您的回答，我更新了我的 JSFIDDLE 代码：http://jsfiddle.net/tejashsoni111/aL9vB/5/ 从您的 clearDate 事件中查看问题，尝试根据您的想法使 startDate 和 endDate 正确。我看到 clearDate 函数被调用了很多次，它清除了你所有的 #from 和 #to 值【参考方案2】：

看来你需要.input-daterange。

full jsfiddle demo

html

<br>Mode :
<select id="mode">
    <option value="1">Day</option>
    <option value="2">Month</option>
    <option value="3">Year</option>
</select>
    <br /><br />
<div id="datepicker-container"> </div>

现在将.input-daterange 动态加载到#datepicker-container 中（每次选择框更改时）：

<div class="input-daterange" id="datepicker">from:
     <input type="text" name="start" />to:
     <input type="text" name="end" />
</div>

然后每次选择框（#mode）发生变化时，根据选择框（#mode）中的选定选项启动.input-daterange和datepicker()函数。

即完整的javascript：

function initDatepicker(mode)
    $('#datepicker-container').html(''+
     '<div class="input-daterange" id="datepicker">from:'+
         '<input type="text" name="start" />to:'+
         '<input type="text" name="end" />'+
    '</div>');
    var $dtpicker=$('#datepicker-container > .input-daterange');
    $dtpicker.find(':input').val('');
    if (mode == 1) //Day
        $dtpicker.datepicker(
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
        );
     else if (mode == 2) //Month
        $dtpicker.datepicker(
            autoclose: true,
            startDate: '0m',
            endDate: '+1y',
            clearBtn: true,
            startView: 1,
            minViewMode: 1
        );
     else if (mode == 3) // Year
        $dtpicker.datepicker(
            autoclose: true,
            startDate: "0y",
            endDate: "+1y",
            clearBtn: true,
            startView: 2,
            minViewMode: 2
        );
     


$("#mode").change(function ()     
    $('#datepicker-container > .input-daterange').datepicker('remove');
    initDatepicker($(this).val());
);
initDatepicker(1);// for first time initiate Day

【讨论】：

感谢您的回答。我尝试实现您的演示，但根据我的要求，有一些 额外条件 带有日期选择，例如：如果我在 FROM 中选择一个日期，那么 的 startDate >TO 成为所选日期，当我在 TO 中选择日期时，FROM 的 endDate 成为 TO 中选择的日期> 日历。我尝试使用此代码设置一些选项和方法，但无法获得所需的输出。【参考方案3】：

随便用

$('#ID').datepicker('destroy');

在创建日期选择器视图之前，它将销毁前一个并根据需要应用新的 datepicker ui

【讨论】：

我已经用过了，它不能与 bootstrap datepicker 一起使用，在 bootstarp datepicker 中没有像 destroy 这样的方法，他们给了 remove，我已经在使用它了。

以上是关于通过引导日期选择器的下拉菜单更改视图的问题的主要内容，如果未能解决你的问题，请参考以下文章

引导日期选择器从另一个日期选择器更改 minDate/startDate