清除 bootstrap-datepicker 的值

Posted 2023-02-22

【中文标题】清除 bootstrap-datepicker 的值

【英文标题】：Clear the value of bootstrap-datepicker

【发布时间】：2014-04-07 10:00:34

【问题描述】：

我从这里使用 bootstrap-datepicker：https://github.com/eternicode/bootstrap-datepicker

版本：2.3.2

单击按钮时，我无法清除日期选择器的日期值。我检查了 API，但在清除/重置日期选择器时找不到任何东西。欢迎任何帮助

【参考方案1】：

您可以使用 jQuery 清除日期输入的值。

例如有一个按钮和一个像这样的文本输入：

<input type="text" id="datepicker">
<button id="reset-date">Reset</button>

你可以使用jQuery的.val()函数。

$("#reset-date").click(function()
    $('#datepicker').val("").datepicker("update");
)

【讨论】：

这个技巧不会清除 startdate endate 限制，这是由 setStartDate,setEndDate 选项设置的

我认为您可以使用不带参数的 setStartDate 和 setEndDate 方法来清除限制。 bootstrap-datepicker.readthedocs.org/en/release/…

这不是正确的答案

这不会清除日期。您可以在控制台上使用它进行检查。 $("#datepicker").datepicker("getDate") 仍然给出之前选择的日期。您需要将.datepicker('update') 传递到末尾，如下面的答案所示。

【参考方案2】：

我遇到了类似的问题，以下对我有用：

$('#datepicker').val('').datepicker('update');

这两个方法调用都需要，否则不清楚。

【讨论】：

这对我有用。请注意，“更新”会触发另一个“更改日期”事件。

这是比公认的更好的解决方案 :)

【参考方案3】：

当前版本 1.4.0 有 clearBtn option:

$('.datepicker').datepicker(
    clearBtn: true
);

除了向界面添加按钮外，它还允许手动从输入框中删除值。

【讨论】：

这是 clearBtn: true 添加到日期选择器中的清除按钮，对吗？

由于某种原因，清除按钮的样式对我来说被破坏了。

是的，这对我有用..谢谢！

除非我遗漏了一些你不能真正使用它从输入框中手动删除的东西。删除文本会触发“clearDate”事件，但按钮会触发“clearDate”和“changeDate”。所以对我来说问题是按下按钮会触发我的事件回调两次。

【参考方案4】：

我在尝试清除已设置的日期时遇到了这个帖子。尝试：

$('#datepicker').val('').datepicker('update');

制作：

TypeError: t.dpDiv is undefined 
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js -- Line 8

认为可能需要包含original Datepicker for bootstrap 会消除错误，但随后会导致原始的 Datepicker 小部件出现！ - 所以这显然是错误的，不需要。

进一步看，jqueryui中的crash在：

    /* Generate the date picker content. */
_updateDatepicker: function(inst) 
    this.maxRows = 4; //Reset the max number of rows being displayed (see #7043)
    datepicker_instActive = inst; // for delegate hover events
    inst.dpDiv.empty().append(this._generatehtml(inst));
    this._attachHandlers(inst);

并且 inst.pdDiv 不存在。

进一步调查 - 我意识到需要的是：

        $formControl = $duedate.find("input");
        $formControl.val('');
        $formControl.removeData();

这解决了我的问题。注意我还需要 $formControl.removeData() 否则小部件的状态不会重新初始化为初始状态。

我希望这对其他人有所帮助。 :-)

【讨论】：

嘿，我遇到了同样的错误，也为此实施了同样的解决方案，但无法成功。是否有任何 jquery/bootstrap 版本问题？是否有任何特定的块可以放置此代码？

但是，如果尝试获取日期值，例如 var datevalue = $('#datepikcercontrol').data('date');仍然会给出之前选择的日期值，上面的解决方案读取数据这种方式对我有用 var datevalue = $("#datepikcercontrol").find("input").val();

这会从 DOM 中完全删除输入字段，并且无法进一步选择日期范围

我在尝试同样的事情并得到同样的错误。这对我有用，谢谢。

【参考方案5】：

其实使用库自带的方法更有用$(".datepicker").datepicker("clearDates");

我建议您始终查看该库的文档，这是我用于此的文档。

bootstrap-datepicker methods documentation

【参考方案6】：

您可以使用此语法来重置您的引导日期选择器

$('#datepicker').datepicker('update','');

参考http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#update

【参考方案7】：

我知道现在回答为时已晚，但在我的场景中，下面的代码不起作用。

 $('#datepicker').val("");
 $('#datepicker').val('').datepicker('update');
 $('#datepicker').datepicker('update','');

这是我的解决方案。

 $('#datepicker').val('').datepicker('remove').datepicker();

我先清除了 datepicker 的值，然后删除了 datepicker 并再次重新初始化 datepicker。它解决了我的问题。

【参考方案8】：

我找到了最好的答案，它对我有用。 清除bootstrap-datepicker的值：

$('#datepicker').datepicker('setDate', null);

为 boostrap-datepicker 添加值：

$('#datepicker').datepicker('setDate', datePicker);

【参考方案9】：

我在试图弄清楚为什么 IE7/IE8 中的日期没有被清除时遇到了这个帖子。 这与 IE8 和更早版本需要 Array.prototype.splice() 方法的第二个参数这一事实有关。 这是 bootstrap.datepicker.js 中的原始代码：

clear: function()
    this.splice(0);
,

添加第二个参数解决了我的问题：

clear: function()
    this.splice(0,this.length);
,

【参考方案10】：

你必须这样做：

$('#datepicker').datepicker('clearDates');