我正在我的站点中使用bootstrap-datepicker。日期选择器将用于定义搜索过滤器。我需要datepicker输入元素的初始值为空,因此它不会为搜索结果引入日期过滤器。当用户单击链接到Datepicker的文本输入时,Datepicker弹出框应选择下个月的第一天。
问题:如果我将初始日期设置为(如下所示),则将在文本输入中填充今天的日期,这不是我想要的日期。但是,如果我未设置初始日期,则日期选择器将显示1970年代。我该怎么办?
类似于:jQueryUI Datepicker的演示
JS代码
var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();
HTML代码
<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />
失败尝试
[日期选择器在单击文本输入el时不会弹出
$(function() {
var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(''); // clear the date filter
$('#listing_filter_available').click( function() {
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();
});
});
我刚刚遇到了非常相似的用例。通过对bootstrap-datepicker.js的一些调整,我相信它已经起作用了。
您需要在两个地方编辑脚本。
对于日期字段,我正在检查日期(this.date)是否设置为Unix开始日期(例如空白日期)。如果是这样,请退出并将该字段留空。
((线:95-大约)
setValue: function () {
// EDIT - Don't setValue if date = unix date start
if (DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format)) return false;
// END EDIT
对于下拉日历,我还要检查日期(this.date)是否设置为Unix开始日期。如果是这样,将日期设置为今天。我这样做是为了当用户单击日期字段时,它显示的是当前月份,而不是1970年2月。
((行:144-大约)
fill:function(){
// EDIT - Set date in fill to today if date is "blank" (eg Unix start date)
var d = ((DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format))) ? new Date() : new Date(this.viewDate),
// original code
// var d = new Date(this.viewDate),
// END EDIT
我相信这就是您需要做的。我刚刚在解决方案中实现了此功能,因此,如果有人发现任何问题或有更好的建议,我希望听到。
这是我的最爱
$('#datetimepicker').datetimepicker({
defaultDate:'',
});
<input type="text" name="datefilter" value="" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
有一种更简单的方法!设置值
我遇到了类似的问题,这对我有用。
在最新版本的引导程序中>>,我正在使用Bootstrap V3.3.6和Boostrap-timepicker V0.5.2,以下操作非常简单:
[如果不编辑bootstrap-datepicker.js就不可能实现
我正在使用bootstrap v3.1.1和
$('#listing_filter_available').datepicker('setValue', nextMonth);
对于最新版本
$("input[type=date]").datepicker({ defaultViewDate: {} });
我有同样的问题,我提出了这种解决方法,我做了一个检索日期的函数:
getDate: function (input) {
if ($(input).val() == '') {
return '';
}
return $(input).data('datepicker').date;
}
如果找不到此类功能,请不要编辑源。放聪明点。查找CSS类'active'并动态删除它或覆盖样式表中的规则。
例如,替代此规则(为日期选择器使用更强的选择器):