在JavaScript日期范围选择器中隔离月份是否有方法?

huangapple go评论137阅读模式
英文:

Is there a way to isolate the months in javascript daterangepicker?

问题

我正在将日期范围选择器集成到我的应用程序中,并想知道如何限制每个月仅显示该月的日期。例如:

我希望是这样(请参见左侧的日历):

在JavaScript日期范围选择器中隔离月份是否有方法?

但默认情况如下:

在JavaScript日期范围选择器中隔离月份是否有方法?

我已经查看了日期范围选择器文档,但找不到可以实现这一目标的配置。

我的日期范围选择器初始化:

$("#reportrange").daterangepicker
      ranges:
         "上周": [moment().subtract("days", moment().day() + 1).subtract("days", 6), moment().subtract("days", moment().day() + 1)]
         "本周至今": [moment().subtract("days", moment().day()), moment()]
         "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      startDate: moment().subtract("days", moment().day() + 1).subtract("days", 6)
      endDate: moment().subtract("days", moment().day() + 1),
      alwaysShowCalendars: true
   , (start, end, label) ->
         $("#reportrange span").html start.format("YYYY年MM月D日") + " - " + end.format("YYYY年MM月D日")
         $("[name*='_start_date']").val(start.format("ddd, D MMM YYYY"))
         $("[name*='_end_date']").val(end.format("ddd, D MMM YYYY")).trigger 'change'

我的带有Ruby模板的日期范围选择器前端:

.grid-24.box
   .grid-12
      %h3 选择日期范围
      #reportrange
         %i.glyph-calendar.icon-large
         %span= "#{(DateTime.now - (DateTime.now.wday + 1) - 6).strftime("%Y年%m月%d日")} - #{(DateTime.now - (DateTime.now.wday + 1)).strftime("%Y年%m月%d日")} "
         %b.caret
      =hidden_field_tag "charge_start_date", DateTime.now.prev_month.strftime("%a,  %d %b %Y")
      =hidden_field_tag "charge_end_date", DateTime.now.strftime("%a,  %d %b %Y")
.grid-24#display-charges
   =render :partial => "user_charge_data_display", :locals => {users: @users, start_range: (DateTime.now - 30), end_range: DateTime.now}
英文:

I'm implementing a daterangepicker into my application and am wondering how to confine each month to ONLY that month. For example:

I would like this (see the left hand calendar):

在JavaScript日期范围选择器中隔离月份是否有方法?

But the default is like this

在JavaScript日期范围选择器中隔离月份是否有方法?

I've reviewed the DateRangePicker Documentation and cannot see a configuration that will do this for me.

My DateRangePicker initilization:

$("#reportrange").daterangepicker
      ranges:
         "Last Week": [moment().subtract("days", moment().day() + 1).subtract("days", 6), moment().subtract("days", moment().day() + 1)]
         "Week to Date": [moment().subtract("days", moment().day()), moment()]
         "Last Month": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      startDate: moment().subtract("days", moment().day() + 1).subtract("days", 6)
      endDate: moment().subtract("days", moment().day() + 1),
      alwaysShowCalendars: true
   , (start, end, label) ->
         $("#reportrange span").html start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY")
         $("[name*='_start_date']").val(start.format("ddd, D MMM YYYY"))
         $("[name*='_end_date']").val(end.format("ddd, D MMM YYYY")).trigger 'change'

My DateRangePicker Frontend with ruby templating

.grid-24.box
   .grid-12
      %h3 Select Date Range
      #reportrange
         %i.glyph-calendar.icon-large
         %span= "#{(DateTime.now - (DateTime.now.wday + 1) - 6).strftime("%B %d, %Y")} - #{(DateTime.now - (DateTime.now.wday + 1)).strftime("%B %d, %Y")} "
         %b.caret
      =hidden_field_tag "charge_start_date", DateTime.now.prev_month.strftime("%a,  %d %b %Y")
      =hidden_field_tag "charge_end_date", DateTime.now.strftime("%a,  %d %b %Y")
.grid-24#display-charges
   =render :partial => "user_charge_data_display", :locals => {users: @users, start_range: (DateTime.now - 30), end_range: DateTime.now}

答案1

得分: 1

无法以程序方式找到此方法,使用开发人员提供的配置。但是,在这种情况下,您可以始终使用CSS解决方法,通过将visibility: hidden;应用于超出当前月份日期的项目的CSS类。这是我所做的:

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  visibility: hidden;
}

结果如下:

在JavaScript日期范围选择器中隔离月份是否有方法?

英文:

I went through the documentation and couldn't find the way to do it programmatically, using developers' provided configuration.
However, in such situation, you can always go with CSS work-around, by applying visibility: hidden; to the CSS class of the items that are beyond the current month date.
Here's what I did:

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  visibility: hidden;
}

And here's the result:

在JavaScript日期范围选择器中隔离月份是否有方法?

huangapple
  • 本文由 发表于 2023年3月4日 04:53:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/75631782.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定