Im using datepicker in div with this configuration"
$("#homeDatepicker").datepicker({
numberOfMonths: 3,
dateFormat: 'dd-mm-yyyy',
firstDay: '1'
...
});
how do i know which monts are currently displayed in div (user can navigate to display next and previous one).
i want to load some external data using ajax depending on this data.
As indicated in this link http://jqueryui.com/datepicker/#multiple-calendars
The current month based on today's date and followed by next two months are displayed.
Related
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.
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.
I have the following jQuery script defined on all my forms.
$( "input:text.datepicker" ).datepicker({
yearRange: "1900:+0",
changeMonth: true,
changeYear: true
});
Basically this invokes the date picker on any input element that is of type text and has the class "datepicker".
This works fine on all pages, except in one situation which I describe below.
I have to load a form by ajax, which is then displayed in a jQueryUI Dialog. In this dialog I can only get the date picker to display if I include the java-script code again. Obviously I don't want to include the code twice. Is there a way to get the newly loaded textbox to display the date picker somehow?
Thank you
One option is to use on method in deprecated live way and click event to initialize Datepicker:
$('body').on('click', 'input.datepicker', function(event) {
$(this).datepicker({
showOn: 'focus',
yearRange: '1900:+0',
changeMonth: true,
changeYear: true
}).focus();
});
This code should be placed in $(document).ready section.
Pay attention to showOn: 'focus' option and triggering focus event after initialization.
DEMO: http://jsfiddle.net/Mq93s/
Well the problem here is that when the datepicker code is executed, your form element does not exist yet, and therefore, it cannot convert it to a datepicker. You could bypass this problem by either:
Moving the datepicker code to a separate function that you will then call manually from all pages in the document.ready event. This way it will only be declared once, and you can also call it in your ajax page as well, only there you will call it when the ajax call is completed instead of the ready event.
Since you know what you're loading in your form, you can convert just that given input to a datepicker. This is not such a clean solution, because if you will want to change something in the datepicker, you'll have two places to modify, at least.
Both approaches are valid, the choice is up to you, as you know which version fits your project better :)
I have been doing some testing whilst using Jquery UI datepicker and have found that the date format doesn't work correctly with Chrome - if I type 13/10/2009 an error appears saying that it is incorrect format. What I think has happened is that the format is dd/mm/yyyy for all browsers and validation but for some reason chrome has defaulted to mm/dd/yyyy - i.e. it works fine across all other browsers but not Google Chrome.
Here's a link: https://www.carcreditassured.co.uk/apply-now-poor-rating/ (on this occassion I'm going to change the question type to three select boxes to aid usability but I would like to know an answer for future reference)
Here's my jquery code:
$('.date-pick').datepicker({
showOn: 'both',
buttonText: 'Choose a date',
buttonImage: '/images/calendar.png',
buttonImageOnly: true,
dateFormat: 'dd/mm/yy',
numberOfMonths: 1,
showButtonPanel: true
});
Any advice would be greatly appreciated.
Best wishes
Rachel
P.S. After reading another post on this forum I tried to captialise the MM and that gives a format of (13 October 2009) which isn't what i'm looking for.
i have experienced the same issue and i solved it in a simple way, i think it will be helpful to all others too.
change the input field type to "text" from "date" or "datetime-local".
its the problem with chrome, it automatically converts the date format to default, date picker passes the date in the mentioned format. when we change the input type to text then browser will not interfere to our date. Helpfull ??? :-)
I think it looks at the browser's Locale settings (for google, go to chrome://settings/language)
You'll need to set it for your picker control like so:
$('.date-pick').datepicker("option", $.datepicker.regional["en-GB"]);
having said that, your picker results in dates in dd/mm/yyyy format for me even if I set Google Chrome to use American English, albeit the week starts with Sunday, so it's still influenced unless you set control's culture as per code I've provided.
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.