I have been attempting to adjust the size of my form fields. I have tried using size like so...
<%= f.date_select(:form_date, order: [:month, :day, :year], prompt: { month: 'Select Month', day: 'Select Day', year: 'Select Year' }, start_year: 2000, size: 1) %>
Am I just entering size in the wrong order (size: 1 shouldn't be last)? Is this best handled in my stylesheets?
Thanks in advance.
Turns out I was mixing options and html_options
date_select(object_name, method, options = {}, html_options = {}) Link
Here is what I changed my line of code to from above...
<%= f.date_select(:form_date, options = { order: [:month, :day, :year], prompt: { month: 'Select Month', day: 'Select Day', year: 'Select Year' }, start_year: 2000 }, html_options = { size: 1 }) %>
Related
I am trying to connect my form.date_select to my stimulusjs controller but I can't do it.
I have the following code
= f.date_select :date_of_birth, :order => [:day, :month, :year], selected: Date.today, prompt: { day: 'Select day', month: 'Select month', year: 'Select year' }, start_year: Date.current.year, end_year:Date.current.year - 100, data: {signupform_target: 'dateOfBirth', action: 'signupform#isValidDob' }
I am trying to connect this to dateOfBirth target. my controller:
export default class extends Controller {
static targets = ['firstName', 'firstNameInput', 'lastName', 'lastNameInput', 'email', 'emailInput',
'password', 'passwordInput', 'dateOfBirth', 'dateOfBirthInput', 'button', 'warning']
isValidDob() {
console.log(this.dateOfBirthTarget);
}
This is the error I get.
[1]: https://i.stack.imgur.com/6Z7Jz.png
This is my form
= form_for(#user, url: settings_public_path(locale: I18n.locale, id: #user),
data: { controller: "generalsettings" }) do |f|
.field.pb-4
= f.label t('sign_in.your_email')
= f.text_field :email, class: 'form-control field-text-input settings-input', disabled: 'disabled'
%div{style: 'font-size: .9rem !important;'}
=t('settings.cant_change_email')
.names-flex.pb-4
.name-div.first-name
= f.label t('sign_up.fname')
= f.text_field :first_name, class: 'form-control field-text-input settings-input', disabled: #user.provider.present?, data: { generalsettings_target: 'firstName', action: 'generalsettings#isValidCombination'}
.name-div.last-name
= f.label t('sign_up.lname')
= f.text_field :last_name, class: 'form-control field-text-input settings-input', disabled: #user.provider.present?, data: { generalsettings_target: 'lastName', action: 'generalsettings#isValidCombination'}
.field.pb-4
= f.label t('sign_up.dob')
.dob-picker
= f.date_select :date_of_birth, :order => [:day, :month, :year], prompt: { day: 'Select day', month: 'Select month', year: 'Select year' }, start_year: Date.current.year, end_year:Date.current.year - 100, disabled: #user.provider.present?, data: { generalsettings_target: 'dateOfBirth', action: 'generalsettings#isValidCombination'}
= f.submit t('settings.save'), class: 'sign-button save_button', data: { generalsettings_target: 'button'}
I would like to change the month select input from date_select : change the values of the array (with January, February... to Janvier, Février...). And I would also like to append styling to each select box (day, month and year). This is my date_select
<%= f.date_select :birthdate,
order: [:day, :month, :year],
prompt: { day: 'Jour', month: 'Mois', year: 'Année' },
start_year: Date.today.year - 13,
end_year: Date.today.year - 100
%>
I don't seem to find anything on the rails official documentation. Any help? Thanks :)
I guess below code would help you.
<%= f.date_select :birthdate,
{
order: [:day, :month, :year],
prompt: { day: 'Jour', month: 'Mois', year: 'Année' },
start_year: Date.today.year - 13,
end_year: Date.today.year - 100,
locale: :fr
},
{class: 'custom-style'}
%>
I guess setting f.date_select ... locale: :fr will help
Use the use_month_names option to set custom values for the months:
<%= f.date_select :birthdate,
{
order: [:day, :month, :year],
prompt: { day: 'Jour', month: 'Mois', year: 'Année' },
start_year: Date.today.year - 13,
end_year: Date.today.year - 100,
use_month_names: ["Janvier", "Février", etc..]
},
{ class: "some-css-class-for-styling" }
%>
Hello I am trying to make a date_select and the class wont take effect. Thanks for all the help.
<%= f.date_select :created_at,
:order => [:month, :day, :year],
:prompt => {month: 'Birth Month', day: 'Birth Day', year: 'Birth Year'},
:start_year => Time.now.year,
:end_year => 1920,
:class => 'SelectDropDown' %>
the form helper that I like is called simple_form. When I need to add a date picker I have been using bootstrap3-datetimepicker-rails
Setup:
File #app/assets/javascripts/application.js
$(document).ready(function() {
$('.datetimepicker').datetimepicker({});
return $('.datepicker').datetimepicker({
format: 'YYYY/MM/DD'
});
});
});
Now to apply it to a form
= f.input :date_select, as: :string, input_html: { class: 'datetimepicker', value: "#{f.created_at}" }
I hope that this helps
try to use html_options for class:
<%= f.date_select :created_at,
order: [:month, :day, :year],
prompt: {month: 'Birth Month', day: 'Birth Day', year: 'Birth Year'},
start_year: Time.now.year,
end_year: 1920,
html_options: {class: "SelectDropDown"} %>
for more details check data_select
my code looks like this
<div class="field form-group">
<%= f.label :date_of_birth %><br />
<%= date_select :date_of_birth, {order: [:month, :day, :year],
prompt: { day: 'Select day', month: 'Select month', year: 'Select year' },
start_year:1950, end_year: Date.today.year}, {required: true}, class: "form-control" %>
</div>
And result is in this photo
What i want that year selection be from 1950 to now.
Thanks for help!
The following code works perfectly for me:
<%= f.date_select( :date_of_birth, { :order => [:month, :day, :year], :start_year => 1950, :end_year => Date.today.year }, { :required => true, :class => "form-control" }) %>
Note that my date_select control is prepended with f, for the form it belongs to... I think that might be your problem.
f.date_select(:birthday, prompt: {
day: 'Select day', month: 'Select month', year: 'Select year'
}, end_year: Time.now.year-13, start_year: 1900, required: true)
It shows start_year first and end_year last:
1900
1901
..
..
2002
I want 2002 first and 1900 at the bottom of the select box.
Couldn't find anything in rails documentation and google. Any help will be appreciated. Thanks
Simply exchanging end_year and start_year will do the trick.
In your case:
f.date_select(:birthday, prompt: {
day: 'Select day', month: 'Select month', year: 'Select year'
}, end_year: 1900, start_year: Time.now.year-13, required: true)