【问题标题】:daterangepicker select range within one monthdaterangepicker 选择一个月内的范围
【发布时间】:2017-08-05 17:50:29
【问题描述】:

使用这个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);

【问题讨论】:

  • 所以你想强制它只在当月选择。你呢?
  • 不,可以是任何月份。从一月开始,我想选择一月的范围,从 2 月 1 日到 28 日。从 3 月 1 日到 12 日等。

标签: jquery jquery-ui daterangepicker bootstrap-daterangepicker


【解决方案1】:

我知道我迟到了,但这个解决方案对我有用:

将此行添加到选项中:

linkedCalendars: false

然后他们将这个添加到 css 中:

.drp-calendar.right {
    display: none !important;
  }

父类(在我的例子中是drp-calendar)可能不同,请检查检查员。

来源:https://github.com/dangrossman/daterangepicker/issues/1152#issuecomment-229439154

【讨论】:

  • 事情是有这样一个基本的功能,你必须做 css 或其他黑客是 IMO 跛脚。我知道它是一个开源项目,但如果提供的功能搞砸了,我不想使用那个插件。所以我改变了方向,再也没有回头。
  • 是的,我知道,我添加了这个解决方案,因为在我的情况下,我想查看范围但不显示两个月。不是最好的方法,但我必须编辑主 js 以获得我想要的,非常“神秘”(没有理由的复杂),因为在我看来,主开发者不想添加这个, 逻辑特征。
【解决方案2】:

这对我有用,添加以下内容:

singleDatePicker: true,

【讨论】:

  • 您好,但这不允许您从月份中选择一个范围,只能选择一个日期...
【解决方案3】:

通过这种解决方法,我设法控制了具有日期范围的单月视图:
我使用这个技巧:[https://stackoverflow.com/questions/41770018];

我已将 + 1 个月添加到 maxDate:var maxDate = moment(new Date()).add(1, 'M');

singleDatePicker: false,
linkedCalendars: true,

我在选项日期选择器对象上使用了该方法;

isInvalidDate: function(date) {
    return date.isAfter(self.today);
}

self.today 是 moment(new Date()).format('M/DD/YYYY');

此解决方案仅用于今天日期之后的日期范围。今天之后的所有日期都将被禁用

【讨论】:

    【解决方案4】:

    只需在 dateLimit 选项中添加以下内容。

    dateLimit: {
        'months': 1,
        'days': -1
    }
    

    【讨论】:

    • 这个插件不能按我想要的方式工作。我尝试了您的解决方案,但现在我明白 months: 1 选项并非看起来那样。这意味着从任何给定的 2 个月中选择 31 天。我只想要一个月历并从within A month 中选择范围
    【解决方案5】:

    我找到了另一个插件,它有很多功能和我需要的功能。 https://longbill.github.io/jquery-date-range-picker/

    选项:单月模式(带范围日期)

    【讨论】:

      猜你喜欢
      • 2017-04-20
      • 1970-01-01
      • 2020-04-26
      • 2012-03-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-18
      • 1970-01-01
      相关资源
      最近更新 更多