Installscript/plugin install http://rails-unobtrusive-date-picker.googlecode.com/svn/trunk/unobtrusive_date_picker Methods and OptionsTo be able to use the date-picker methods below you need to include the javascript library file and CSS stylesheet in the <head> of your layout template. You can do this either by manually including the files via a javascript_include_tag and a stylesheet_link_tag (the files are both named "datepicker"), OR by using the included unobtrusive_datepicker_includes helper method, which will do this for you. There are 4 main helper methods: - unobtrusive_date_picker
- unobtrusive_datetime_picker
- unobtrusive_date_picker_tags
- unobtrusive_datetime_picker_tags
Options:- :order
- the order the selects should be positioned in
- :include_blank
- include a blank option at the top of every select
- :start_year
- year that the year select should start on (defaults to 5 below either the year of the date value or current year)
- :end_year
- year that the year select should end on (defaults to 5 above either the year of the date value or current year)
- :minute_step
- how many minutes apart each minute option should be
- example: "(:minute_step => 5)" would result in [0, 15, 30, 45] as options
- :use_short_month
- use short month names (Jan, Feb, etc.) instead of long names (January) for option text
- :use_month_numbers
- use month numbers instead of names for option text
- :add_month_numbers
- add month numbers to names for option text ("1 - January")
- :highlight_days
- which days of the week should be highlighted in the datepicker (by default Saturday and Sunday)
- Excepts either:
- a string of number representing days of the week (0 = Monday, 1 = Tuesday ... 6 = Sunday)
- Or a singular symbol for one day of the week
- Or an array of symbols representing days of the week, i.e. [:Monday, :Sunday]
- :range_low
- the low range of acceptable dates (not times) for this input
- managed by the Javascript, thus should be enforced with your own validations
- Excepts:
- One of the following symbols: :today, :tomorrow, :yesterday
- A string representation of a date
- A Date, DateTime, or Time object
- :range_high
- the high range of acceptable dates (not times) for this input
- Excepts same options as :range_low; also managed by javascript
- :disable_days
- days of the week that may not be selected
- Excepts the same format as :highlight_days
- Also managed by javascript
- :no_transparency
- if set to true it disables the fade in/out visual effect of the datepicker
Example<% form_for :article, :url => { :action => @form_action, :id => @article } do |f| %>
<fieldset>
...
<label>Date: <%= f.unobtrusive_datetime_picker :date %></label><br />
...
</fieldset>
<% end %>Produces (Current date when output: 12/6/07): <form action="/form/create" method="post">
<fieldset>
<label>Date:
<select id="article_date-dd" name="article[date(3i)]">
<option value="1">1</option>
...
<option value="31">31</option>
</select>
<select id="article_date-mm" name="article[date(2i)]">
<option value="1">January</option>
...
<option value="12" selected="selected">December</option>
</select>
<select id="article_date" name="article[date(1i)]" class="split-date">
<option value="2002">2002</option>
...
<option value="2012">2012</option>
</select>
<select id="article_date_4i" name="article[date(4i)][hour]">
<option value="1">1</option>
...
<option value="12">12</option>
</select>
:
<select id="article_date_5i" name="article[date(5i)][minute]">
<option value="00">00</option>
...
<option value="59">59</option>
</select>
<select id="article_date_6i" name="article[date(6i)][ampm]">
<option value="AMPM>AMPM</option>
<option value="AMPM>AMPM</option>
</select>
</label><br />
</fieldset>
</form> Rake taskThere is also a rake task that can be executed by running rake datepicker:update in your Rails apps root directory. This task will update your datepicker javascripts, stylesheets, and images. This is useful if you are using an old version of the plugin that had an older version of the Unobtrusive Date-Picker Widget Javascript library, or in the future when new version are release and I update the plugin with them.
|
Sign in to add a comment
It'd be nice to have other examples, i.e. not attached to form/object. Cheers
For many options you have listed a number of "Excepts" items. It should be "Accepts", and not "excepts". "Excepts" can easily be understood as a short version of "Exceptions" which means we should keep away from using the listed items.
Is it possible, or easy, to customize this plugin to accept 24h format? If so... can you give us a light on how can we do it?
neat Rails implementation... however I am using GLoc plugin to localize my rails app... the select helpers are correctly set up to my default choosen language , not the Calendar .. the problem seems to be located in the datepicker.js, with the browser language detection (mine is french) , different from the Rails locale in environment.rb (GLoc.set_config :default_language => :en)
// Detect the browser language datePicker.languageinfo = navigator.language ? navigator.language : navigator.userLanguage;
I am not js fluent enough to find how to solve this issue
is there a way to disable the am/pm plugin?...
can a drop down date select field be disabled so that the user is forced to use the calendar select?
not work in ie6
With a little digging in in the source and debugging I figured out how to use it without binding to an object:
<%= unobtrusive_date_text_picker_tag :from_date,@from_date %> or <%= unobtrusive_date_picker_tags @from_date,{},{:id => 'from_date'}
the 2nd one for some reason displays the calendar icon after the year, instead of after all 3 date drop downs, but I like the first one better anyway so I'm using that.