我有一个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"输入在没有进行日期选择的情况下获得并失去焦点时,它会清除预先填充的值。
然而,如果通过日期选择器选择了一个日期,然后输入获得并失去焦点,则不会发生这种情况。
如果有人点击,如何将预先填充的值保留在字段中?
编辑:第一次选择日期时,它会清除预先填充的值,但在第二次选择日期之前不会插入所选日期。
更新:工作代码已更新!
将强制解析值设置为false:forceParse:错误
$(".applyDatepicker").datepicker({
forceParse: false
});
我不确定它在php中的工作情况,但对于mvc,我遇到了同样的问题,即如果控件在没有进行日期选择的情况下获得并失去焦点,Bootstrap会擦除该值。
我发现Bootstrap会擦除该值,因为它无法识别设置的值
$('#dtControl').val(nextMonth);
我正在使用bootstrap v3.1.1,下面的代码对我有效
$('#dtControl').datepicker('setDate', nextMonth);
以填充日期选择器控件。通过这种方式,Bootstrap可以识别日期,并且如果控件获得并失去焦点,则不会擦除它。
没有更多的例子就无法确定,但问题可能是您提供给输入的$this->swimmers->dob
字符串没有被引导日期选择器识别为日期格式。您可以通过在输入中添加data-date-format
属性来定义它使用的日期格式。
例如,如果您使用MySQL格式的日期或带有$date->format('Y-m-d')
的PHP的DateTime对象,则可以使用:
<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>
当一个用户在同一日期点击两次时,我也遇到了类似的问题。该字段将在单击的日期和空白字段之间"切换"。我基本上不希望它在任何阶段都是空的,所以我是这样度过的,部分归功于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);
}
});
通过将最后一个日期值存储在日期选择器的实例中,使其保持相对独立,并且不会清除输入。
我知道你解决了这个问题,但我认为这个片段可能对其他处于类似情况的人有用。
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())。这是一个小的改进,但尽可能紧凑/简单是一个很好的做法。
另一个解决方案是在全局级别定义选项:
$('.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;
现在,当使用更新方法时,日期选择器不会丢失选项。
$('#dob').datepicker('update', '2011-03-05');
你可以这样使用。尽管对我来说,它只是通过使用.val()
函数将值传递给元素来工作。
引用URL。https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html