Date Output in Rails using jquery ui - ruby-on-rails

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.

Related

Two date fields in a form using jquery mobile for mobile web application

I want to add two date fields in a form in mobile web application. Based on the date selected on first calendar, the minimum date range in second calendar is set.
I am using jquery mobile but it does not provides a direct way to create a date field.
I found two options to create it :
Datepicker by jquery UI
Datebox by http://dev.jtsage.com/
Which one will be better which will help me to set the date range, change the css of the calendar easily?
First don't use jQuery Mobile data picker for jQuery Mobile, it lacks responsiveness jQuery Mobile needs.
Thankfully there are some 3rd party solutions made exclusively for jQuery Mobile.
Mobiscroll - http://jsfiddle.net/Gajotres/WDjfR/
$(document).on('pagebeforeshow', '#index', function(){
$('#demo').mobiscroll().date({
invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
dateOrder: 'dd mm yy',
dateFormat : "dd-mm-yy"
});
});
Mobipick - http://jsfiddle.net/Gajotres/zyVjE/
$(document).on('pagebeforeshow', '#index', function(){
$('#demo').mobipick({
dateFormat: "MM-dd-yyyy"
});
});
Datebox - http://jsfiddle.net/Gajotres/ktbcP/
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true, "dateFormat": "mm/dd/YYYY"}'/>
If you want to find more about jQuery Mobile date pickers take a look at this article.
Mobiscroll is best of them, unfortunately it is also a commercial application, or if you want to can use version from my jsFiddle example, at that point Mobiscroll was still free. It provides native like and feel skins.
jQuery mobile its self doesn't support any date popups it has been clearly said in this linkJquery mobile datepicker.
In css wise 'http://dev.jtsage.com/ ' won't give you options but it will provide many options like disabling some dates of the month, highlighting dates of the months like wise. If you need css changes just override the properties and you will not have to change a lot because it keeps repeating the CSS for dates.

Rails and query datepicker, how to get date in field more tied to pop-up calendar

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/

simple_form a single non-model field

So I have a simple_form, and I want to use the standard j-Query datepicker to select the date.
Problem is, rails doesn't like the normal US MM/DD/YYYY date format, so I want to have the field for the display date and store the rails-compliant date format in a hidden field.
How do I tell simple_form to use a field that doesn't exist in the model?
Not sure what you can't do, but i do something like:
$(".datepicker").datepicker({ altFormat: "yy-mm-dd", dateFormat: "yy-mm-dd" });
If configuring the datepicker doesn't work for you, use attr_accessor :new_field_name in your model and add the datepicker to it and do what you were going to do there.

jquery MonthYearDropdown

I want show month and year in one dropdown on jQuery datetimepicker above the month/year navbar. Is there any way to do this?
To show month and year you can use default options like this:
$( "#datepicker" ).datepicker({changeMonth: true,changeYear: true});
but if you mean you want to show month and year in single dropdown (like jan-2011, feb-2011) then you will need to hack it and add a new dropdown and fill it will all allowed months-years. You will probably want to set minDate and maxDate values.

Rails date_select as single pulldown instead of three?

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.

Resources