Question

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

event.valid_from
event.valid_to
restricted_date.valid_from
restricted_date.valid_to

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

restricted_date.valid_from＆lt; = event.valid_to（和from）＆lt; = restricted_date.valid_to

目前我有：

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") %>

我想做什么：

限制日期，如此示例（http://jqueryui.com/demos/datepicker/#min-max），用户无法手动输入日期
日历从今天开始，而不是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

Hiya所以这里是使用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”日期进行调整。

对于min和max读取此内容，您也可以在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宝石。我无法弄清楚如何使用日期来使用最大和最小日期，我只能使用+和 - 天（从今天开始）使用它。

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

<%= 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

在jQuery Datepicker中限制日期

3 个答案: