标签: bootstrap-daterangepicker

我有一个页面https://dev.leadformly.com/datepicker有一个iframe在那特定的'',我正在通过以下代码的ajax调用动态编写HTML代码.

<script>
  $(document).ready(function(){
    $.post(URL,
        function (data) { //here it retruns the HTML code
          $("body").html('<iframe style="width:100%;height:384px;"></iframe>');
          $("body iframe")[0].contentDocument.write(data.democode);
        },
        'json'
      );
    });
</script>

现在,当我点击日期选择器时,它会在控制台中抛出错误,如:

Uncaught TypeError: Cannot read property 'top' of undefined

你能帮我解决这个问题吗？或者只是解释原因,这将有助于我解决它

仍然陷入下面的问题。我上周没有遇到问题，也没有更改任何代码：我在这里使用 daterangepicker： http: //www.daterangepicker.com/#usage

我的js代码：

const Backbone = require('backbone');
const dutils = require('dutils');
const FilterGroupView = require('./filterGroupView');
const _ = require('underscore');
const $ = require('jquery');
const moment = require('bootstrap-daterangepicker/moment');
require('bootstrap-daterangepicker');

const ranges = {
  'Today': [moment().startOf('day'), moment()],
  'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
  'Last 7 Days': [moment().subtract(7, 'days'), moment()],
  'Last 30 Days': [moment().subtract(30, 'days'), moment()],
  'This Month': [moment().startOf('month'), moment().endOf('month')],
  'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
};

$('#dateForm').val(moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm') + ' - ' + moment().format('YYYY-MM-DD HH:mm'));
console.log('ranges:' + JSON.stringify(ranges) ); // …

我想在引导日期范围选择器中禁用特定的日期范围。

我需要使用bootstrap daterangepicker，它为我提供了限制特定日期范围的选项。

使用这个http://www.daterangepicker.com/

如何使用 daterangepicker 仅选择一个月的范围。启用singleDatePicker: true使其成为唯一的日期选择器，但我需要一个月的范围。

即2017年1月1日至2017年1月15日。或一个月内的任何范围。

我努力了

"dateLimit": {
    "month": 1
 },

但它也选择 1 月 1 日至 31 日和 2 月 1 日。

如果不可能，请提出替代方案。

编辑（当前代码）

function cb(start, end) {
            $('#daterange span').html(start.format('MMM D, YYYY') + ' - ' + end.format('MMM D, YYYY'));

            enroll_date_start.value = start.format('YYYY-MM-DD');
            enroll_date_end.value   = end.format('YYYY-MM-DD');
        }

        $('#daterange').daterangepicker({
            maxDate: moment(),

            "dateLimit": {
                "month": 1
            },
            ranges: {
               'Today': [moment(), moment()],
               'This Month': [moment().startOf('month'), moment().endOf('month')],
               'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);

我正在使用 bootstrap daterangepicker 插件，我在自定义范围中选择大范围（如 3-4 年）时遇到了问题。目前它只允许在一个月内自定义范围。我尝试了其他插件的minDate和maxDate，但在这里也不起作用。

而且我怎么能点击所有的时间标签搜索所有的时间数据，并进行搜索它 minDate和maxDate范围。

js小提琴

 $('.selectrange').daterangepicker({
    showDropdowns: true,
    timePicker: true,
    minDate: [moment().subtract(20,'years'),'inclusive'],
    maxDate: [moment(),'inclusive'],
    ranges: {
       'Today': [moment(), moment()],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'All Time':'all-time', // [minDate, maxDate]
    }
});

我有一个基于http://www.daterangepicker.com的日期范围选择器的日期范围选择器,我想将开始日期设置为空.这将适用于我想要做的事情.

我正在使用文本输入字段来获取日期

</span><input type="text" class="form-control" id="reservation" />

在网站上有一个设置"输入最初为空"的例子,但我无法让它工作.基本上我不知道在哪里设置它似乎.

我的日期范围选择器位于局部视图内,并由另一个视图调用.页面脚本在视图中设置,调用部分脚本.在daterangepicker.js脚本中我发现了这些行;

//default settings for options
        this.parentEl = 'body';
        this.element = $(element);
        this.startDate = moment().startOf('day');
        this.endDate = moment().endOf('day');
        this.minDate = false;
        this.maxDate = false;
        this.dateLimit = false;
        this.autoApply = false;
        this.singleDatePicker = false;
        this.showDropdowns = false;
        this.showWeekNumbers = false;
        this.timePicker = false;
        this.timePicker24Hour = false;
        this.timePickerIncrement = 1;
        this.timePickerSeconds = false;
        this.linkedCalendars = true;
        this.autoUpdateInput = true;
        this.ranges = {};

据我所知,他们是基于moment.js.我试过操纵this.startDate但无法设法将其设置为空值.使用this.startdate = null使整个日期范围选择器停止工作所以我想我需要像空日期相当于moment.js.或者完全不同的东西.

谁能告诉我怎么做？

任何人都可以推荐一些带有 angularjs 的好的日期范围选择器，它也可以在没有范围的情况下工作吗？那么，在不同的用例中灵活使用和可定制？

我正在使用 Bootstrap Daterange Picker，它使用以下范围选项：

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')]
      },

但是当页面加载时，所选值是空的。

我想在页面加载时在引导日期范围选择器中默认选择范围“本月”。

Jsfiddle 网址：https://jsfiddle.net/renishar/wnuy6ypc/

我使用Date Range Picker插件进行bootstrap,我试图以24小时格式获取值.我已经设置了选项timePicker24Hour: true但它仍然没有以24小时格式返回它.

这是我的代码:

$("#reportdatetime").daterangepicker({
    timePicker: true,
    timePicker24Hour: true,
    timePickerIncrement: 30,
    locale: {
        format: 'MM/DD/YYYY h:mm'
    }
});

小提琴:https://jsfiddle.net/rdawkins/k67xfa1g/1/

我有一个要求，当用户有一个日期时间存在于数据库中时，它只显示日期。但是如果数据库没有日期时间那么在文本框中它必须是空白的。

但是当页面加载 datetimepicker 在其中设置默认值时。因此，为此，我已将其设置autoUpdateInput为 false，它将文本框设置为空白。但在那之后 datetimepicker 不会在文本框中设置值。

$('.datetimepicker').daterangepicker({ 
    autoUpdateInput: false,       
    singleDatePicker: true,
    showDropdowns: true,
    timePicker: true,
    locale: {
        format: 'DD-MM-YYYY hh:mm:ss'
    },
});

Js小提琴链接：https : //jsfiddle.net/Ly0jh5pz/2/

注意：我必须使用 daterangepicker 所以 bootstrap datetimepicker 不是一个选项。