首页 文章

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

提问于
浏览 次
17

我有一个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设置正常并且工作正常，当“dob”输入获得并失去焦点而不进行日期选择时，它会清除预先填充的值 .

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

如果有人点击，预先填充的 Value 如何保留在现场？

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

更新：工作代码已更新！

javascript php twitter-bootstrap datepicker bootstrap-datepicker

6 回答

  • 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>
    回复于
  • 2

    将Force parse值设置为false：forceParse：false

    $(".applyDatepicker").datepicker({
            forceParse: false
    });
    回复于
  • 0

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

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

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

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

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

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

    回复于
  • 1

    当用户两次点击同一日期时，我遇到了类似的问题 . 该字段将在单击的日期和空白字段之间“切换” . 我基本上不希望它在任何阶段都是空的，所以这就是我如何解决这个问题，部分归功于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的该实例中并导致不清除输入，这使其保持相对自包含 .

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

    回复于
  • 36

    当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（）） . 这是一个小的改进，但是尽可能小巧/简单是一个好习惯 .

    回复于
  • 0

    另一种解决方案是在全球范围内定义选项：

    $('.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;

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

    回复于

相关问题