I am using the date_field_tag.
<%= date_field_tag :date_from, value = nil, options = {} %>
The date picker is displayed in English, with the machine locale set to is.I am wondering if it is possible to translate the date picker text using I18n.t? Or is this not possible since the date picker is provided by the browser?
The Rails helper date_field_tag generates an input field with a type of "date", but it's not a widely supported field type. You can either let the browser render the field and hope for the best, or use a polyfill to provide support for users who don't have a browser with the functionality. You could also use something like the jQuery UI datepicker for everybody, regardless of whether the browser supports date fields or not.
Your options for translating the control depend on which approach you take. If the browser is drawing the calendar widget, you can't control the language it uses. If you're providing a calendar widget via JavaScript, then you can - it's just HTML, after all. jQuery's datepicker provides a lot of localisation options.
You can try out how your browser displays native date-related fields in this JSFiddle.
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'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)
Is there any way in MVC to specify "Empty Text" for text fields?
Empty Text is normally a property give to a textbox to display when text is empty, and is cleared out OnClick.
For example: have the text box say "Enter here..." and then onFocus that text would clear and allow you to type in the entry, however if text is empty, "Enter here..." would display again.
I'm trying to find out if there's any ways to get this out of the box w/o any additional coding, as this feature is widely supported by 3rd Party controls (ie: Telerik's AJAX Controls) does anyone know if MS made any provisions to offer anything similar?
Thanks.
You could use HTML5 placeholder attribute:
#Html.TextBoxFor(x => x.SomeProperty, new { placeholder = "some default text" })
And if you need to support older browsers you could always achieve the same effect with javascript. For example there are existing jQuery plugins such as jQuery.placeholder.
Use placeholder attribute in HTML 5
There's no such thing as what you are referring to in HTML, at least not called that. 3rd party controls have implemented this functionality themselves.
There is, in HTML 5, a property called a placeholder, but this won't appear in non-html5 compliant browsers (IE8, IE7, older versions of FF, etc..)
The only way to do this cross browser is to use javascript to implement the functionality.
I have just started looking into using jQuery Mobile on a XPages project. I am unsure whether I should use XPages controls or standard HTML controls in certain circumstances.
For example, I need a simple "Save" button on a page. An xp:button does get rendered with the jQuery Mobile style. But how would I then apply attributes to it, such "data-icon" and "data-inline"?
Or should I be using a standard HTML tag in this case? If so, I lose the ability to code XPages simple actions to, say, save the data sources.
Thanks for any tips.
If you are using 8.5.3 you can use the attr property of the button to add the data-icon and data-inline tags.
<xp:button value="Label" id="button1">
<xp:this.attrs>
<xp:attr name="data-icon" value="marky"></xp:attr>
</xp:this.attrs>
</xp:button>
If not then you can use jQuery to add the attribute using $().attr('data-icon', 'whatever'). Remember though the clientID of the button will change through the interface and you will need to adjust for that. You could you my x$ function
http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages
I'm not such a fan of using datetime_select. I think it renders ugly and isn't easy to deal with on post back.
How do most people deal with it? Wouldn't it be easier to use a plain textbox and use javascript to validate the input as a date? I will be persisting it as a DateTime value.
I used a text box with a jquery datepicker and all was well in the universe.