在 jQuery Datepicker 中限制日期

Question

我想在我的 Rails 应用程序中使用 jQuery Datepicker，但我从来没有用 Java 开发过，所以我不确定如何使用这些选项。我有四个日期字段：

1. event.valid_from
2. event.valid_to
3. restricted_date.valid_from
4. restricted_date.valid_to

限制日期是为了创建一个有限的范围，用户可以从中选择来举办活动。因此，我想限制日期，如下所示：

restricted_date.valid_from

目前我有：

jQuery('#event_valid_to').datepicker({
   dateFormat: 'yy/mm/dd',
   minDate: "<%= @event.restricted.valid_from %>",
   maxDate: "<%= @event.restricted.valid_to %>"
});

变成：

jQuery('#event_valid_to').datepicker({
   dateFormat: 'yy/mm/dd',
   minDate: "2012-02-20",
   maxDate: "2012-01-31"
});

但是，当我单击该字段时，日历会在 2017 年 8 月弹出，所有日期都显示为灰色（我无法滚动到其他月份）。该字段也可供编辑。

字段代码

<%= f.text_field :valid_to, :value=>@event.restricted.valid_to.strftime("%m/%d/%Y") %>

我想做什么：

1. 像此示例 (http://jqueryui.com/demos/datepicker/#min-max) 那样限制日期，用户无法手动输入日期
2. 让日历从今天开始，而不是 2017 年 8 月

提前感谢您提供的任何帮助！

Answer 1

此代码非常粗糙，因此您可能需要根据需要对其进行一些调整。这只是为了演示如何阻止某些日期（我也不能为此声明功劳，就像很久以前在某个博客上发现的那样，当我需要做类似的事情时......）但它对我有用

$('#itemID').datepicker({
                    dateFormat: 'dd-M-yy',
                    autoSize: true,
                    showOn: 'button', 
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    showWeek: true,
                    beforeShowDay: nonWorkingDates
                });


function nonWorkingDates(date) {
    var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
    var closedDates = [[0, 0, 0000]];
    var closedDays = [[Tuesday], [Wednesday], [Tuesday], [Thursday], [Friday], [Saturday], [Sunday]];
    for (var i = 0; i < closedDays.length; i++) {
        if (day == closedDays[i][0]) {
            return [false];
        }
    }

    for (i = 0; i < closedDates.length; i++) {
        if (date.getMonth() == closedDates[i][0] - 1 &&
            date.getDate() == closedDates[i][1] &&
            date.getFullYear() == closedDates[i][2]) {
            return [false];
        }
    }
    return [true];
}

至于默认日期。形成jquery site

如果该字段为空白，则设置在首次打开时突出显示的日期。通过 Date 对象或当前 dateFormat 中的字符串指定实际日期，或从今天开始的天数（例如 +7）或值和句点字符串（'y' 表示年份，'m' 表示月份， 'w' 表示几周，'d' 表示几天，例如 '+1m +7d'），或者 null 表示今天。

代码示例

Initialize a datepicker with the defaultDate option specified.
$( ".selector" ).datepicker({ defaultDate: +7 });
Get or set the defaultDate option, after init.
//getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
//setter
$( ".selector" ).datepicker( "option", "defaultDate", +7 );

Answer 2

嗨，这里是 在 jsfiddle 中使用日期选择器的具体案例的工作版本：http://jsfiddle.net/jKpdP/11/

满足您的 2 个要求：

1) 用于限制和避免手动输入：您应该能够在文本输入上使用 readonly 属性，并且 jQuery 仍然可以编辑其内容.

readonly='true'

喜欢这个

<input type="text" placeholder="from this date" id="event_valid_to" readonly='true' />

2) 日历从今天开始，而不是 2017 年 8 月

要从今天开始填充，我使用了以下代码：

var myDate = new Date();
var todaysDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#event_valid_from").val(todaysDate);

注意：此代码还处理 - 如果您在“to”字段中选择小于“from”的日期，则“from”将根据“to”日期进行调整。

对于最小值和最大值，请阅读此内容，您也可以在 jsfiddle 中看到。 http://jqueryui.com/demos/datepicker/#min-max

整个Jquery代码如下：

var myDate = new Date();
var todaysDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#event_valid_from").val(todaysDate);

var dates = $("input[id$='event_valid_from'], input[id$='event_valid_to']").datepicker({
    minDate: -20, maxDate: "+1M +10D", 
    onSelect: function(selectedDate) {
        var option = this.id == $("input[id$='event_valid_from']")[0].id ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);

    }
});

我分叉了 jsfiddle，所以我不知道那是谁的猫； :)

希望这会有所帮助，如果您有任何问题或我可以提供帮助，请告诉我，

干杯！

Answer 3

我无法得到任何有效的答案，所以我最终找到并使用了jquery_datepicker gem。我无法弄清楚如何使用日期来使用最大和最小日期，我只能使用 + 和 - 天（从今天开始）让它工作。

对于我的日期字段，我这样做了：

<%= f.datepicker(:valid_from, :readonly=>'true', :value=>@event.valid_from.strftime("%m/%d/%Y"), :dateFormat => 'mm/dd/yy', :minDate => @event.calculate_min_event_date, :maxDate => @event.calculate_max_event_date , :class=>"input-small")  %>

然后，在 event.rb 模型中，我放了这些方法：

 def calculate_min_event_date
   @min = (self.restricted_date.valid_from - Date.today).to_i
   @min = @min.to_s 
 end

 def calculate_max_event_date
   @max = (self.restricted_date.valid_to - Date.today).to_i
   @min = @min.to_s 
   @max = "+#{@max}"
 end