如果没有选择日期，如何防止 bootstrap-datepicker 从输入中清除现有值？

Posted 2023-02-22

【中文标题】如果没有选择日期，如何防止 bootstrap-datepicker 从输入中清除现有值？

【英文标题】：How do you prevent bootstrap-datepicker from clearing existing value from input if no date is selected?

【发布时间】：2014-06-12 05:40:40

【问题描述】：

我有一个用 php 预填充用户出生日期的 div：

<div id="datepicker" class="input-group date">
    <label for="dob">Date of Birth</label> <input type="text" class="form-control" id="dob" name="dob" value="<?php $date = new DateTime($this->swimmers->dob); echo $date->format('d/m/Y');?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

javascript：

<script>     
    $('.container .input-group.date').datepicker(
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
    );
</script>

Bootstrap 已设置并正常工作，但是，当“dob”输入在没有选择日期的情况下获得和失去焦点时，它会清除预先填充的值。

但是，如果通过日期选择器选择了日期，然后输入获得焦点并失去焦点，则不会发生这种情况。

如果有人点击，预填充的值如何保留在字段中？

编辑：第一次选择日期时，它会清除预填充的值，但在您第二次选择日期之前不会插入所选日期。

更新：工作代码已更新！

【参考方案1】：

将强制解析值设置为 false： 强制解析：假

    $(".applyDatepicker").datepicker(
            forceParse: false
    );

【讨论】：

它对我不起作用 var start = moment(); var end = moment().add(2, "days"); $("input[name=shifting_date]").daterangepicker( forceParse: false, startDate: start, endDate: end, "applyClass" : "btn-sm btn-success",

谢谢你，@Datta。也为我工作。然而，为什么这行得通？我使用有效日期加载页面；点击进入字段，点击离开，没有上面的标志，值设置为空白。

亲爱的你太棒了，它的作用就像魅力:)

很好的答案达塔！我遇到了这个问题，还有一个问题，即从 DatePicker 中跳出会将其设置回“mm/dd/yyyy”的占位符。我花了一天的大部分时间在这个问题上。你摇滚！！

【参考方案2】：

如果没有更多示例，无法确定，但问题可能是您提供给输入的 $this->swimmers->dob 字符串未被 bootstrap-datepicker 识别为日期格式。您可以通过将data-date-format 属性添加到您的输入来定义它使用的日期格式。

例如，如果您使用 mysql 格式的日期或 PHP 的 DateTime 对象和$date->format('Y-m-d')，您可以使用：

<div id="datepicker" class="input-group date">
    <input type="text" class="form-control" id="dob" name="dob" value="<?php echo $this->swimmers->dob;?>" data-date-format="yy-mm-dd"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

【讨论】：

谢谢@steve-h。没有以相同格式回显日期 face palm

您好，我正在为同样的问题苦苦挣扎，但是在 jsp 中，您可以看看 ***.com/questions/69939209/…

【参考方案3】：

我不确定它在 php 中的工作，但对于 mvc，我遇到了同样的问题，如果控件在没有选择日期的情况下获得和失去焦点，Bootstrap 会删除该值。

我发现 Bootstrap 删除了该值，因为它无法识别设置的值

$('#dtControl').val(nextMonth);

我正在使用 bootstrap v3.1.1，以下代码对我有用

$('#dtControl').datepicker('setDate', nextMonth);

填充日期选择器控件。这样，Bootstrap 可以识别日期，并且在控制获得和失去焦点时不会删除它

【参考方案4】：

当用户两次单击同一日期时，我遇到了类似的问题。该字段将在单击的日期和空白字段之间“切换”。我基本上不希望它在任何阶段都是空的，所以这就是我解决这个问题的方法，部分归功于 Waqas 的回答：

var datepickerContainer = $('#datepicker');

datepickerContainer.datepicker(
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
).on('show', function() 
    datepickerContainer.datepicker.currentDate = $('input#dob').val(); //update this instance with the current value
).on('changeDate', function(event) 
    var newDate = $('input#dob').val();
    if (newDate == '' || newDate == null)  //check if the new value is empty - if it is, then just set it back to the last known date for this instance
        datepickerContainer.datepicker('setDate', datepickerContainer.datepicker.currentDate);
    
);

通过将最后一个日期值存储在日期选择器的该实例中，从而使其相对独立，并且不会清除输入。

我知道你解决了这个问题，但我认为这个 sn-p 可能会对处于类似情况的其他人派上用场。

【参考方案5】：

当 jQuery 调用处理程序时，this 关键字是对传递事件的元素的引用。此外，非空字符串将评估为 true。基于这些事实，只需在事件处理程序中进行检查。请参阅下面的示例代码。

            .find( 'input[name=startDate]' )
                .datepicker( format: 'dd-mm-yyyy' )
                .on( 'changeDate', function() 
                    if( this.value )  
                        << do something >>
                    
                );

注意：为了提高上述代码示例的效率和可读性，检查了 DOM 属性 value，而不是将 this 包装在 jQuery 对象中并调用 val( ) 就可以了（ $( this ).val() ）。这是一个小的改进，但尽可能紧凑/简单是一个好习惯。

【参考方案6】：

另一种解决方案是在全局级别定义选项：

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

现在，当使用更新方法时，日期选择器不会丢失选项。

【参考方案7】：

$('#dob').datepicker('update', '2011-03-05');

你可以这样使用。虽然对我来说，它只是通过使用 .val() 函数将值传递给元素来工作。

参考网址。 https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html