The current date_select form helper in Rails creates three pulldown menus for selecting month, date, and year for a date. Is there away to instead have a single pulldown with a list of dates?
For example, a list of the next 30 days from "Jan 1, 2011" to "Jan 30, 2011"?
While not a select/pulldown control, an alternative option is the jQuery datepicker.
Using that, you could do this:
Your date field:
<%= f.text_field :some_date %> # => presume that element id is some_date_id
You can add a drop down calendar to it like this:
<script type="text/javascript">
$(function() {
$( "#some_date_id" ).datepicker();
});
</script>
Instead of writing a date_select_tag use a select_tag and provide it an array of dates.
select_tag "invoice_date", options_from_collection_for_select(#array_of_dates,:first,:first)
Not sure how you're using the form. Perhaps if you post that snippet, a more specific and correct answer can be provided.
If you need date_select to work differently, you need to override the helper and roll your own. If you just want a certain functionality in your app and not interested in changing Rails itself, go for the select_tag option.
Related
I'm building a simple project where date input plays an important role. I don't want to add an another gem and heavy js library like jquery, bootstrap.
What is the most lightweight solution where I can let users to select/enter date? The pure Ruby way.
Thank you
EDIT:
I use date_field type, but it lets me enter any value. It does not format my input as date.
Code sample:
<%= form.date_field :date %>
SOLUTION (temporary):
Right! I needed to use date_select, not date_field : )
<%= form.date_select :date %>
Your date field should also work but you can try this also , may be this work for you.
<%= form.date_field :date, min: 0.days.ago %>
Rails has a whole heap of in built form helpers for selecting dates and other data types: https://api.rubyonrails.org/v6.0.0/classes/ActionView/Helpers/DateHelper.html#method-i-select_date
I am not sure what you mean by 'pure ruby' as a date picker is html/css with some optional js, but the select_date form helper (and all other rails form helpers) are ruby objects under the hood, which, given arguments, will return HTML.
In addition to the above link, you should check out these docs for how to implement inside a form: https://guides.rubyonrails.org/form_helpers.html#dealing-with-basic-forms
This has to do with the browser support for date_field. It has improved quite a lot recently, see https://caniuse.com/mdn-html_elements_input_input-date
I have <%= f.date_field :day %>, which is asking users to input date in the American format: mm-dd-yyyy.
How can I change it to dd-mm-yyyy ?
While we're at it, how can I change the TIME_FIELD to ask for hours in the 24-hour system (say, instead of inputing 07:00PM, I could say 19:00)?
Thanks in advance
The f.date_field helper will create a standard (native browser) HTML input of type='date'
So you are not able to format the date as such, as per this SO answer.
I recommend you use a jQuery plug in or date picker of some kind.
I'm looking to create an ancestry type webpage with a date field that allows user to enter a date going back to thee digits. This makes date_select with dropdown boxes and the jquery datepicker very un-user friendly.
Does anyone know a good way to display a text box for the year but a dropdown for month and day?
I'm hoping to use the "intelligence" of date_select while still allowing the user to enter the year in a more user friendly fashion (the textbox).
Thanks for any help you can give me!
With great respect to the developers of Rails, the date_select usability is pretty weak for almost any case :-)
Unlike other field types, the date_select helper generates three select tags with special names and ids, one each for the year, month, and day elements. It's the naming convention that allows controller code to auto-magically re-assemble the inputs into a (single) date when it is processing the params array.
Sorry, I don't have a handy example of the naming format (since I never use date_select), but if you look at the names of the fields, you might be able to mimic the behavior without too much hackery by using the :discard_year option. That gets you the month and day fields, and a hidden field (I think) containing the current year.
If you're not averse to a little JS or CoffeeScript, you could modify the input field after the DOM is loaded, by removing the hidden "type" attribute (thus making it a simple text field) and setting its value to be empty.
I would choose between three options
1-Use a date_select only for day and month and a text field with some javascript for the year
Date_select accepts a :discard_year option, if you set it to true, the year field is rendered as a hidden_field so there's no select/dropdown http://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-date_select
Then you put a text_field and bind to the keyUp event and modify the value of the hidden year field
The most important problem about this is that, if the user has javascript disabled, the value of the text field will never be set to the hidden field and that's a problem.
2-Use a date_select only for day and month and a text field
I'm not sure if you can do this option, you can try using the same date_select as above and set the name of the input field with the name of the year field. The problem is that date_select will put a hidden field with that name and you put another field with the same name and the value sent on submission may not be what you want... You should see if it's posible.
3-Use a date_select and add extra functionality using Choosen http://harvesthq.github.com/chosen/
Put the date_select as always and set the start_year and end_year that you want, then replace the selects with choosen selects, the choosen select includes a text field to search between the years of the select
Choosen gives you a nice and consistence look almost crossbrowser (didn't test it on old IE versions), you get the text input for user-friendliness and, if javascript is disabled, the user still have the three selects.
I would definitelly use number 3, but maybe you don't want to add a plugin.
Experimenting with the Javascript route suggested by Tom, I came up with something like the following:
<%= f.date_select :birth_date %>
<script>
var date_field =
document.getElementsByName('ancestor[birth_date(1i)]')[0];
var new_html = '<%=
f.text_field 'birth_date(1i)', :value=>(f.object.birth_date.strftime("%Y") rescue "") %>';
date_field.outerHTML = new_html;
</script>
(Improvements welcome)
I have a form where you click in start_date and a jquery calendar comes up to pick the date. I want to display the date as (ex.) September 25, 2012, but I also need rails to comprehend the correct start date not just output it correctly.
What do i need to add to this?
<%= feed_item.start_date %>
events.js.coffee
jQuery ->
$('#event_start_date').datepicker
dateFormat: 'yy-mm-dd'
$('#event_end_date').datepicker
dateFormat: 'yy-mm-dd'
Take a look at the altField and the altFormat options for the datepicker.
You can store the Rails-friendly date in a hidden field and pass it to the controller, and display the user-friendly field to the user.
EDIT
Take a look at this answer for an example on how to work with altField and altFormat.
The text field and the pop-up are linked in that I can use the calendar and the field shows the correct value (or blank) initially.
But they are not linked in that the pop-up is always for the current month, not the month of the db field value.
= f.text_field :content_date, id: 'datepicker', size: 10
I tried adding ,value: #user.content_date but it didn't help.
My jquery is:
// jQueryUI Date Picker:
$(function (){
$(".datepick").datepicker({ dateFormat: "yy-mm-dd"});
});
I added the dateFormat per dimuch which seemed promising but it didn't help yet.
I also tried altFormat but it did't help.
You probably have different date formats in the datepicker and content_date field. Take a look at this fiddle http://jsfiddle.net/wKNXx/