我想要为我的datepicker设置随机日期 [英] I want to be able to set a random date for my datepicker

问题描述

我有一个名为 leave_start 的日期选择器，我希望能够设置一个不是静态的最小日期，这样一个人可以在选择之后选择日期。我如何去做这样的事情，因为某些原因，当我点击未来的选择框，它不会重新加载日期选择器我该如何解决这个问题？

所以当他们为未来的选择框选择是或否。它将相应地重新格式化日期选择器。

所以这是我的观点，病假日输入将是病假日文本字段将是他们设置的最小日期。

  = simple_form_for @entry，，url => url_for（：controller =>'entry'，：action 
 
％td.lt = f.error：range_days，：class =>'呃'
 
％ .table.table-bordered.table-stripe {：style =>'table-layout：fixed; width：100％！important;'} 
 
％td.lt = f.text_field：sick_day ，= id =>'sick_day'，：placeholder =>'可选注释'，：input_html => {：value =>''} 
％td.lt = f.error：indirect_id， class =>'er'
 
％table.table.table-bordered.table-striped {：style =>'table-layout：fixed; width：100％！important;'} 
％th.lt 
％td.lt = f.input_field：future，：as =>：select，：id =>'future'，：label => false，，collection => ; [YES，NO] 
％td.lt = f.error：future，：class =>'呃'
 
％table.table.table-bordered。 table-striped {：style =>'table-layout：fixed; width：100％！important;'} 
％th.lt离开开始：
％td.lt = f.text_field：leave_start ，：label => false，：id =>'leave_start'，：input_ht ml => {：value =>''} 
％td.lt = f.error：leave_start，：class => '呃'
 
 
％table.table.table-bordered.table-striped {：style => 'table-layout：fixed; width：100％！important;'} 
 = f.button：submit，Submit，：class => 'customSub'
  

这里是我的JavaScript

  $（document）.ready（function（）{
 $（'＃future））click（function（）{
 var selected = $ ）.val（）; 
 var new_day = $（'＃sick_day'）。val（）; 
 if（selected =='YES'）{
 $（'＃leave_start' .datepicker（{minDate：new_day}）; 
} 
 if（selected =='NO'）{
 $（'＃leave_start'）。datepicker（{minDate：0，beforeShowDay： $ .datepicker.noWeekends}）; 
} else {
} 
}）; 
}）; 
  

我尝试过这个错误（TypeError：#sick_day.val不是一个函数）

修复这个忘记了var new_day =（'#sick_day'）前面的$ val（）;

解决方案

在datepicker已初始化之后，更改选项的方法不同请参阅API

需要在更改的值对/数组之前添加选项

尝试这样：

  $（document）.ready function（）{
 // create datepicker 
 $（'＃leave_start'）。datepicker（）; 
 
 $（'＃future'）。click（function（） 
 var selected = $（this）.val（）; 
 var new_day = $（'＃sick_day'）。val（）; 
 if（selected =='YES'）{
 $（'＃leave_start'）。datepicker（option，minDate，new_day）; 
} else if（selected =='NO'）{
 $（'＃leave_start'）。datepicker（option，{minDate：0，beforeShowDay：$ .datepicker.noWeekends}）; 
} 
}）; 
}）; 
  

I have a date picker called leave_start, I would like the ability to set a min date that isn't static so a person could choose dates after the day they selected. How could I go about doing something like this and for some reason when I click on the future select box it doesn't reload date picker how could I fix that as well?

So when they select either yes or no for future select box. It will reformat the date picker accordingly.

So this is my view where the sick_day input would be the sick day text field would be the min date they would set.

=simple_form_for @entry, :url => url_for(:controller => 'entry', :action 

%td.lt= f.error :range_days, :class => 'er'

%table.table.table-bordered.table-striped{:style => 'table-layout:fixed; width:100% !important;'}

  %td.lt= f.text_field :sick_day, :id => 'sick_day', :placeholder => 'Optional Comment', :input_html => {:value => ''}
  %td.lt= f.error :indirect_id, :class => 'er'

%table.table.table-bordered.table-striped{:style => 'table-layout:fixed; width:100% !important;'}
  %th.lt
  %td.lt= f.input_field :future, :as => :select, :id => 'future', :label => false, :collection => ["YES", "NO"]
  %td.lt= f.error :future, :class => 'er'

%table.table.table-bordered.table-striped{:style => 'table-layout:fixed; width:100% !important;'}
  %th.lt Leave Start:
  %td.lt= f.text_field :leave_start,  :label => false, :id => 'leave_start', :input_html => {:value => ''}
  %td.lt= f.error :leave_start, :class => 'er'


%table.table.table-bordered.table-striped{:style => 'table-layout:fixed; width:100% !important;'}
= f.button :submit, "Submit", :class => 'customSub'

And here is my JavaScript

 $(document).ready(function(){
    $('#future').click(function() {
       var selected = $(this).val();
       var new_day = $('#sick_day').val();
       if (selected == 'YES') {
          $('#leave_start').datepicker({minDate: new_day });
       }
       if (selected == 'NO') {
          $('#leave_start').datepicker({minDate: 0, beforeShowDay: $.datepicker.noWeekends });
       } else {
       }
    });
  });

I tried this but got an error (TypeError: "#sick_day".val is not a function)

fixed this forgot the $ in front of var new_day = ('#sick_day').val();

解决方案

After datepicker has been initialised the method to change the options is different see API

Need to add "option" before the changed value pair/array.

Try this:

$(document).ready(function(){
    //create datepicker
    $('#leave_start').datepicker();

    $('#future').click(function() {
       var selected = $(this).val();
       var new_day = $('#sick_day').val();
       if (selected == 'YES') {
          $('#leave_start').datepicker("option", "minDate", new_day );
       } else if (selected == 'NO') {
          $('#leave_start').datepicker("option", {minDate: 0, beforeShowDay: $.datepicker.noWeekends });
       }
    });
});

这篇关于我想要为我的datepicker设置随机日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！