I use bootstrap3 datetimepicker in Rails 4 app.
The date is saved yyyy-mm-dd format.
When I edit the data with using {format:'MMM-DD-YYYY'}, the date doesn't display and save correctly.
database: `2016-03-26`
view: `Jan-03-0026`
How can I display and save the date as I expect?
_xxx_form.html.erb
<%= simple_nested_form_for(#schedule) do |f| %>
<div class="input-group date" id="datetimepicker">
<%= f.label :departure_date %>
<%= f.text_field :departure_date, class: 'form-control' %>
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({format:'MMM-DD-YYYY'});
});
</script>
Is this the only and best way to use the 3rd answer Changes in the form are not saved to database?
I asked because this answer was posted 3 years ago.
This question is about date format, so not duplicate of Rails 4 x Bootstrap 3 Datetimepicker: design is not good.
If you display MM-DD-YY then use below code
<%= t.strftime('%b %d, %Y') %>
For further instruction please see this Or This
Related
how can I style the date format of a date_field?
I got the following form:
<%= form_for([#user, #vehicle]) do |f| %>
<%= f.label :name, "Vehicle name" %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.label :matriculation_date %>
<%= f.date_field :matriculation_date, class: 'form-control' %>
<%= f.submit "Add", class: "btn btn-primary" %>
<% end %>
this is rendering the following HTML for the date field:
<input class="form-control" type="date" name="vehicle[matriculation_date]" id="vehicle_matriculation_date">
The date field accept input in the following format: mm/dd/yyyy. I want it to accept format like dd/mm/yyyy.
I tried to edit it.yml file without any luck.
it:
date:
formats:
default: ! '%d/%m/%Y'
datetime:
formats:
default: ! '%d/%m/%Y %H:%M'
Any clue? Thank you
EDIT
None of the proposed solutions solve my problem, so I think my question was not very clear. What I want is just to style how the date_field prompt the user (see image for more details). At the moment the form show mm/dd/yyyy, and I want it to show dd/mm/yyyy.
Not sure it might be a useful information, but I'm using Bootstrap for styling.
You can do:
<%= f.date_field :matriculation_date, as: :date, value: f.object.try(:strftime,"%m/%d/%Y"), class: 'form-control' %>
You can convert the date formate with strftime()
#date.strftime("%d/%m/%Y")
It will convert your date into dd/mm/yyyy formate as you wanted.
Here I am showing you an example:
t = Time.now
=> 2016-04-28 16:09:42 -0700
>> t.strftime("%d/%m/%Y")
=> "28/04/2016"
for more strftime() formatting options you can check this http://apidock.com/ruby/DateTime/strftime
EDIT :
After reading your comment and screenshot i've got the solution as follow.
You can also use this gem: https://github.com/Nerian/bootstrap-datepicker-rails
on your gemfile.rb
gem 'bootstrap-datepicker-rails'
then bundle install and restart rails server
then add this line to app/assets/stylesheets/application.css
*= require bootstrap-datepicker
and add this line to app/assets/javascripts/application.js
//= require bootstrap-datepicker
and to use this in your form:
<%= f.date_field :matriculation_date, :id => "datepicker" %>
and add this javascript on the same view of your form
<script>
$('#datepicker').datepicker({format: 'dd/mm/yyyy'});
</script>
You can try this
#yourdate.strftime("%m/%d/%Y")
this works!
My answer is based on #Dharmesh_Rupani answer
Follow the steps to add the gem 'bootstrap-datepicker-rails'
I made two little changes on the form
<%= f.text_field : matriculation_date, :placeholder => 'dd/mm/yyyy', class: 'form-control datepicker' %>
The first thing is I changed the type of the field to text, because when I implemented I had two calendars, one from the date_field and another from the new gem
The other thing I changed is instead of :id I used :class, because it may happen that you have more than one date field
lastly, you should add this on the view
<script>
$( document ).ready(function() {
$('.datepicker').datepicker({format: 'dd/mm/yyyy'});
});
</script>
I'm a newbie full of hope and amazed with Ruby on Rails 4.
In my application, I need the user to input a range of dates. For this, I found the bootstrap-datepicker-rails gem very sexy. It basically works fine for indivdual dates, but I can't manage to get what I want talking about a date range :
The start date default is today
The end date default is today + 1 year, and has to be greater than the start date.
The date format is dd/mm/yyyy
I started with this piece of code which works well :
<div class="field">
<%= f.label :active_from %><br>
<%= f.text_field :active_from, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy'%>
<script type="text/javascript">
$('[data-behaviour~=datepicker]').datepicker();
</script>
</div>
<div class="field">
<%= f.label :active_to %><br>
<%= f.text_field :active_to, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy'%>
<script type="text/javascript">
$('[data-behaviour~=datepicker]').datepicker();
</script>
</div>
But trying to implement in rails the date range input examples of code found on the original documentation #github, I mess up : no interaction between star and end dates.
<div class="input-daterange">
<%= f.text_field :active_from, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy', 'value' => DateTime.now.strftime("%d/%m/%Y") %>
<span class="add-on">to</span>
<%= f.text_field :active_to, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy', 'value' => (DateTime.now + 1.years).strftime("%d/%m/%Y") %>
<script type="text/javascript">
$('[data-behaviour~=datepicker]').datepicker();
</script>
</div>
Can you please help me convert my 2 dates selection into a range selection ?
Thanks a lot !
Best regards,
Fred
Try this:
in app/assets/javascripts/main.js
// This initializes all elements that have data-behaviour=datepicker as a datepicker.
// There is no need to repeat this statement anywhere else.
$(document).ready(function(){
$('[data-behaviour~=datepicker]').datepicker();
})
Add this in app/assets/javascripts/application.js
//= require main
In your view:
<div class="input-daterange" data-behaviour='datepicker' id="datepicker">
<input type="text" class="input-small" name="start" />
<span class="add-on">to</span>
<input type="text" class="input-small" name="end" />
</div>
Docs:
http://eternicode.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&keyboardNavigation=on&forceParse=on#sandbox
Thanks to the explanations from Nerian and eternicode, I was able to build the right syntax for implementing the date picker in a Ruby on Rails 4 form.
Following example allows the user to setup a date range for some record validity:
The date range is formatted as dd/mm/yyyy
The data-behaviour applies to the whole DIV
<div class="input-daterange" data-behaviour="datepicker" id="datepicker" data-date-format="dd/mm/yyyy">
<%= f.text_field :active_from, :class => "input-small" %>
<span class="add-on">to</span>
<%= f.text_field :active_to, :class => "input-small" %>
</div>
<script type="text/javascript">
$('[data-behaviour~=datepicker]').datepicker();
</script>
Thanks a lot guys !
Best regards,
Fred
I am using date_select for two of my fields in the db -
<div class="control-group">
<label class="control-label">
<%= f.label :date_one %></label>
<div class="controls">
<%= f.date_select :date_one%>
</div>
</div>
<div class="control-group">
<label class="control-label">
<%= f.label :date_two %></label>
<div class="controls">
<%= f.date_select :date_two%>
</div>
</div>
Now what I am trying to do here is, no matter what date is selected for date_one, date_two shouldnt be before what has been selected for date_one. Is that possible? How do I do it? Is it possible to setup a validation of some kind?
Thanks
Yes, but you should start on server to ensure valid data is going to be saved. Then you could add client side validations, see for more information this question.
Well, to add server side validation, do this in your model:
validate :date_two_after_date_one
def date_two_after_date_one
errors.add :date_two, 'should be after date one' if date_two < date_one
end
And client side, you will have to use JavaScript for that, paste your form_for call.
I have a a partial, _form for one of my views in rails. It looks like so:
<%= form_for(#project) do |f| %>
<div class="field">
<%= f.label "Project Status" %><br />
<%= f.select :status, ["In Progress", "Cancelled"] %>
</div>
<div class="field">
<%= f.label "Capital Cost" %><br />
<%= f.text_field :capital_cost %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I'd like the "capital cost" part of the form to be greyed out unless "In Progress" is selected from the dropdown menu, without having to reload the page. Is this possible? I saw some solutions using javascript, but I'm a complete beginner and couldn't get my head around them (unfortunately I don't have the time to learn to use js before I have to finish this project). Cheers!
For this you need some JavaScript. Use an onchange event handler to monitor the <select> input for changes. Compare the input value and conditionally set/unset a disabled attribute on the #project_capital_cost input. You can use jQuery for this.
By default, Rails 3 enables jQuery by including the jquery_rails gem in your Gemfile. Assuming you have jquery_rails included in your app and your <select> and <input> tags have #project_status and #project_capital_cost IDs respectively, add the following script into your _form partial with necessary modification:
<script>
$(document).ready(function(){
if($('#project_status').val() != "In Progress"){
$("#project_capital_cost").attr('disabled','disabled');
}
else{
$("#project_capital_cost").removeAttr('disabled');
}
$('#project_status').change(function(){
if($(this).val() != "In Progress"){
$("#project_capital_cost").attr('disabled','disabled');
}
else{
$("#project_capital_cost").removeAttr('disabled');
}
})
});
</script>
EDIT:
To hide div give some id to it:
<div class="field" id="my_div">
<%= f.label "Capital Cost" %><br />
<%= f.text_field :capital_cost %>
</div>
Then replace
$("#project_capital_cost").attr('disabled','disabled'); with $("#my_div").css('display','none')
and
$("#project_capital_cost").removeAttr('disabled'); with $("#my_div").css('display','block') in script.
To grey out the input, use the HTML input tag attribute disabled.
<input disabled="disabled">
Which from Rails is
<%= f.text_field :capital_cost, :disabled => "disabled", :id => "capital_cost_input" %>
To enable it when "In Progress" is selected will require AJAX and Javascript, but there is some help from Rails.
First
<%= f.select :status, ["In Progress", "Cancelled"],
{},
"data-remote" => true, "data-url" => ..._path %>
This will set the onchange attribute for you and make the AJAX call.
Add a route to handle the AJAX call, and supply the URL for the "data-url".
In the view template for the AJAX action, write the Javascript to enable the input.
Something like
$('#capital_cost_input').removeAttr("disabled")
I am trying to enhance an existing Rails application using React (react-rails gem).
This app has a form built with following code:
<%= form_for #article do |f| %>
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, size: "60x12" %>
</div>
<div class="form-group">
<label><%= f.checkbox :sets_expiration_date %> Sets expiration date</label>
<%= f.date_select :expiration_date, start_year: Date.today.year %>
</div>
<button type="submit" class="btn btn-default">Create</button>
<% end %>
I want this form to have following functionalities:
When the user toggles the checkbox, the three drop-down lists for the expiration_date field shows or hides.
When the user submits, the form data is sent to the server via Ajax for validation and persistence.
When the validation fails, the relevant labels and input fields get surrounded with red border.
When the form data gets saved successfully, the form disappears and a message appears.
In my first attempt, I managed to achieve the goal but I found that I had to write vanilla HTML code a lot.
This is a disappointment for me.
Especially, I don't like to specify the name and defaultValue attributes for each <input> tag
like <input name="article[title]" defaultValue={this.props.object.title}>.
I also had to write rather long JavaScript code to create three drop-down lists for the expiration_date field.
How can I construct such a form using React efficiently? Are there any good plugins?