CODEWITHSUNDEEP
javascriptjquerydatedatepicker
Snowman88
Snowman88

Reputation: 53

I want to be able to set a random date for my datepicker

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();

Upvotes: 0

Views: 496

Answers (1)

Cobote
Cobote

Reputation: 395

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 });
       }
    });
});

Upvotes: 2

Related Questions