将日期设置为bootstrap-datepicker最初为空

问题描述 投票:16回答:12

我正在我的站点中使用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();
    });

});
javascript jquery twitter-bootstrap datepicker bootstrap-datepicker
12个回答
6
投票

我刚刚遇到了非常相似的用例。通过对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 

我相信这就是您需要做的。我刚刚在解决方案中实现了此功能,因此,如果有人发现任何问题或有更好的建议,我希望听到。



0
投票

这是我的最爱

$('#datetimepicker').datetimepicker({
   defaultDate:'',     
});

0
投票
<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>

10
投票

有一种更简单的方法!设置值


3
投票

我遇到了类似的问题,这对我有用。


3
投票

在最新版本的引导程序中>>,我正在使用Bootstrap V3.3.6和Boostrap-timepicker V0.5.2,以下操作非常简单:


2
投票

[如果不编辑bootstrap-datepicker.js就不可能实现


2
投票

我正在使用bootstrap v3.1.1和

$('#listing_filter_available').datepicker('setValue', nextMonth);

2
投票

对于最新版本

$("input[type=date]").datepicker({ defaultViewDate: {} });

1
投票

我有同样的问题,我提出了这种解决方法,我做了一个检索日期的函数:

getDate: function (input) {
  if ($(input).val() == '') {
    return '';
  }

  return $(input).data('datepicker').date;
}

1
投票

如果找不到此类功能,请不要编辑源。放聪明点。查找CSS类'active'并动态删除它或覆盖样式表中的规则。

例如,替代此规则(为日期选择器使用更强的选择器):

© www.soinside.com 2019 - 2024. All rights reserved.