Question

I’m using jquery-ui datepicker on a User DOB field in a Rails 3.2 app.

I’m trying to achieve the following:

1. restrict the range of dates that can be selected, max = today, min = 100 years ago.
2. initialize the datepicker with the date currently stored in the database (if any).
3. display the selected date in a particular format in the dob text field.

My form looks like this:

<%= form_for @user do |f| %>
    <%= f.text_field :dob, :class=>'date-selector-dob', :value => (@user.dob.blank? ? '' : @user.dob.to_s(:long))  %>
<% end %>

where .to_s(:long) is the display format I’m after.

With the following javascript the datepicker works, the text field is properly formatted, but no max/ min date is set, and no initialization with the stored date occurs.

$(function (){  // enabledate picker
    $('.date-selector-dob').datepicker();
});

I added to this functions that I though would set min/max range and initialize, as follows:

$(function (){  // enable date picker
    $('.date-selector-dob').datepicker({minDate: new Date('-100Y'), maxDate: new Date('-1D')}); // enable datepicker and set range
    $('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value'))); // initialize datepicker with stored value

});

This is initializing the date picker correctly, but is not setting a min/max range. Is my approach incorrect?

In addition, the extended function resets my formatting string, and data is not displayed according to .to_s(:long). Using the basic function above, this formatting string is properly applied. What would cause this?

I’m pulling my hair out with this! I’d really appreciate it if someone can help me see whatever is it I’ve missed, and understand what I’m doing wrong. Thanks!

Answer 1

JavaScript’s Date doesn’t know what -100Y or -1D mean so your minDate and maxDate settings aren’t going to be anything that the datepicker will understand.

From the fine manual:

minDate

Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘-1y -1m’), or null for no limit.

So you want this:

 $('.date-selector-dob').datepicker({
     minDate: '-100y',
     maxDate: '-1d'
  });

Demo: http://jsfiddle.net/ambiguous/RQgCW/

If you want the datepicker to use a certain format for the date, use the dateFormat option:

The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.

Also, you should be able to skip this:

$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value')))

and just set the <input>‘s value attribute to the date (preferably in ISO 8601 format), then the datepicker should be able to take it from there on its own.