Question

我正在使用bootstrap dateRange选择器。请找到我的工作演示here

以下是我面临的问题：

当用户选择范围时，日期不会突出显示。
有一些选项，如今天，昨天，过去7天......自定义当我们点击日期选择器时，不工作的日期选择器字段。
显示的日历显示了一些旧日期（2014年11月和12月 2014）。

任何解决此错误的建议都会有所帮助。在angularjs和bootstrap中是否有dateRange选择器可以使工作更轻松。

PS：我想查看我的dateRange选择器，如link

所示

js code：

$(document).ready(function() {

  var cb = function(start, end, label) {
    console.log(start.toISOString(), end.toISOString(), label);
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    console.log("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
  }

  var optionSet1 = {
    startDate: moment().subtract(1, 'days'),
    endDate: moment().subtract(1, 'days'),
    minDate: '08/01/2014',
    maxDate: '12/31/2014',
    dateLimit: {
      days: 60
    },
    showDropdowns: true,
    showWeekNumbers: true,
    timePicker: false,
    timePickerIncrement: 1,
    timePicker12Hour: true,
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    opens: 'left',
    buttonClasses: ['btn btn-default'],
    applyClass: 'btn-small btn-primary',
    cancelClass: 'btn-small',
    format: 'MM/DD/YYYY',
    separator: ' to ',
    locale: {
      applyLabel: 'Submit',
      cancelLabel: 'Clear',
      fromLabel: 'From',
      toLabel: 'To',
      customRangeLabel: 'Custom',
      daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
      monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      firstDay: 1
    }
  };

  $('#reportrange span').html(moment().subtract(1, 'days').format('MMMM D, YYYY') + ' - ' + moment().subtract(1, 'days').format('MMMM D, YYYY'));

  $('#reportrange').daterangepicker(optionSet1, cb);

  $('#reportrange').on('show.daterangepicker', function() {
    console.log("show event fired");
  });
  $('#reportrange').on('hide.daterangepicker', function() {
    console.log("hide event fired");
  });
  $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
    console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
  });
  $('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
    console.log("cancel event fired");
  });
});

- 编辑 -

我的应用程序中有以下导入。

  <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
 <script src="jquery.js"></script>
     <script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
      <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
     <script src="moment.js"></script>

我在控制台中看不到任何错误，但功能不起作用，文本字段为空白并且单击它，它没有显示日历。

请建议。

Answer 1

当用户选择范围时，日期不会突出显示。

您无法在网站上加载daterangepicker.css样式表。你链接了一些＆＃34; daterangepicker-bs3.css＆＃34;文件不存在，因此只有404错误。

有一些选项，例如今天，昨天，过去7天..日期选择器中的自定义不工作当我们点击日期选择器字段时。

您已设定2014年8月至12月的maxDate和minDate日期。

这意味着2014年8月之前的任何日期均无效，且2014年12月之后的日期无效。

今天，昨天，上周等都是在2017年而不是2014年，所以它们不是有效的选择。

显示的日历显示了一些旧日期（2014年11月和2014年12月）。

同样，由于您的maxDate和minDate设置表明只有2014年8月到12月的日期才有效。

这些相互矛盾的设置是造成麻烦的原因。您的maxDate / startDate错误，或endDate / ranges / <div class="compTitle options-toggle"> <h3 class="title"> <a class=" ac-algo fz-l ac-21th lh-24" href="http://www.bestbuy.com/"> Products - Best Buy </a> </h3> </div>错误。

某些功能在datepicker

1 个答案: