Question

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

<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设置正常，但是当＆＃34; dob＆＃34;输入获取并失去焦点而不进行日期选择，它会清除预先填充的值。

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

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

编辑：第一次进行日期选择时，它会清除预先填充的值，但不会插入所选日期，直到您再次选择日期为止。

更新：更新了工作代码！

Answer 1

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

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

Answer 2

在没有更多示例的情况下无法确定，但问题可能是您通过bootstrap-datepicker将输入的$this->swimmers->dob字符串识别为日期格式。您可以通过在输入中添加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>

Answer 3

我不确定它在php中工作但是对于mvc我遇到了同样的问题，如果控件获取并失去焦点而没有选择日期，Bootstrap将擦除该值。

我发现Bootstrap会删除该值，因为它无法识别由

设置的值

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

我正在使用bootstrap v3.1.1，以下代码适用于我

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

填充datepicker控件。这样Bootstrap可识别日期，如果控制失去焦点则不会擦除它

Answer 4

当用户两次点击同一日期时，我遇到了类似的问题。该领域将“切换”＃34;在点击的日期和空白字段之间。我基本上不希望它在任何阶段都是空的，所以这就是我如何解决这个问题，部分归功于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);
    }
});

通过将最后一个日期值存储在datepicker的实例中，并使得没有清除输入，这使它保持相对自包含。

我知道你解决了这个问题，但我认为这个代码片段对于类似情况的其他人来说可能会派上用场。

Answer 5

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

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

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

Answer 6

另一种解决方案是在全球层面定义选项：

var errorRows = new List<int>();
for (var i = 0; i < dataTable.Rows.Count; i++)
{
    var row = dataTable.Rows[i];
    if (row.ItemArray.All(cell => string.IsNullOrEmpty(cell.ToString())))
    {
        if (errorRows.Contains(i - 1))
        {
            // When previous row is empty remove it from list
            errorRows.Remove(i - 1);
            // Here also current row will not added to list
        }
        else
        {
            errorRows.Add(i);
        }
    }
}

log(errorRows.Select(c => (c + 1).ToString()))

现在，当使用更新方法时，datepicker不会丢失选项。

Answer 7

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

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

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

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

7 个答案: