I have two jQueryUI datepickers on my page.
They're initialised as below:
jQuery("#departureDate").datepicker({
beforeShow: function() {
getDatesForCalendar("outbound");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onSelect: function(dateText, inst) { jQuery('#returnDate').datepicker("show"); }
});
jQuery("#returnDate").datepicker({
beforeShow: function() {
getDatesForCalendar("return");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});
Before they pop up they check which dates are available to them using getDatesForCalendar(), which contains no code that should hide or show the calendars.
My problem is that when the first calendar calls up the second (which is does onSelect), the second calendar flashes up for a second and then disappears. This is a FF/Chrome only issue, it doesn't appear to affect IE8.
I've tried a number of solutions including changing the tabindex (there is now none at all), disabling the show on focus functionality, and finally instead of manually calling datepicker("show") I've tried calling focus() on the field it's tied to. Nothing has worked!
Any advice would be greatly appreciated.
Many thanks,
Jack
Instead of showing the datepicker in the onSelect use the onClose event.
jQuery("#departureDate").datepicker({
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onClose:function()
{
jQuery('#returnDate').datepicker('show');
}
});
jQuery("#returnDate").datepicker({
numberOfMonths:3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});
Looks like you will have to roll back to jquery ui 1.7.3 (loaded under Manage Resources in jsfiddle)
http://jsfiddle.net/6haqv/3/
Possible bug in jquery ui 1.8
I wanted to pop up second datepicker only if a date is selected in first one. If I use onClose, the second datepicker will show up even if did not select any date.
As work around to this problem I tried following and it works.
var checkin = $('#dpd1').datepicker({
minDate:now,
numberOfMonths:2,
showOn: "button",
buttonImage: "img/calender.png",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
var dateObject=new Date(selectedDate);
dateObject.setDate(dateObject.getDate()+1);
$( "#dpd2" ).datepicker( "option", "minDate", dateObject );
showSecond=true;
},
onClose: function( selectedDate ) {
if(showSecond===true){
$( "#dpd2" ).datepicker("show");
showSecond=false;
}
}
});
I just got the same bug in jQuery UI 1.11.0.
I found a workaround by calling a setTimeout in the onSelect datepicker method:
$('#arrival-date, #departure-date').datepicker({
showAnim: 'slideDown',
onSelect: function(dateText, inst){
if($('#arrival-date').val() != '' && $(this).is('#arrival-date'))
{
setTimeout(function() {
$('#departure-date').datepicker('show');
}, 100);
}
}
});
Im not sure is that solution is good, did you saw what happen if you click on the first calendar, but you dont select any day, just simple click outside, and then try again to open it?
I try it and you can open the first calendar the first time, the second time you cant, you need to open the second calendar, and then you can again click on the first calendar.
Related
I am creating a page where users can select date from picking it from calendar icon.
I tried the following code but the calendar icon didn't show up.
What's the problem tho? Thanks in advance!
$( function() {
$( "#datepicker" ).datepicker({
showOn: "both",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
buttonText: "Select date"
});
} );
reality
expected
So as soon as a date is selected on the Datepicker I want a button to be pressed that will submit the date. This way users won't need to click on a button to submit dates they want to look at.
My jQuery code:
<script>
$(function() {
$( "#date" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
$('#date').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
</script>
And then the HTML button:
<button type="submit" value="submit" id="submit" name="submit">Submit </button>
Thanks for any help.
Use onSelect event like this ,Working demo here
$(function() {
$('#date').datepicker( {
onSelect: function(date) {
$("#yourFormId").submit();
//OR $("#yourButton").click();
}
});
});
I guess your datepicker is in the form .. Then do this :)
$(function() {
$( "#date" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
onSelect: function(dateText, inst) {
$(this).parents("form").submit();
}
});
$('#date').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
You can also minify your code by adding the dateFormat option directly to the init of datepicker
$(function() {
$( "#date" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
onSelect: function(dateText, inst) {
$(this).parents("form").submit();
},
dateFormat: 'yy-dd-mm'
});
});
I am new to both javascript and coffeescript. I am trying to initialize my datepicker to another language.
Given the following snippet in the documentation...
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
});
If I do the following in my .js.coffee file in a Rails 4 app, it doesn't seem to be working.
jQuery ->
$('#order_expected_delivery_date').datepicker
dateFormat: 'yy-mm-dd'
showAnim: 'slideDown'
minDate: '+3D'
maxDate: '+1M +3D'
$.datepicker.regional[ "zh-CN" ]
Many thanks in advance.
If you look at $.datapicker.regional['zh-CN'], you'll see something like this:
{
closeText: ...,
prevText: ...,
...
}
so the values in $.datepicker.regional are objects which hold a set of localized options for the datepicker. That means that your datepicker call really looks like this:
$('#order_expected_delivery_date').datepicker
dateFormat: 'yy-mm-dd'
showAnim: 'slideDown'
minDate: '+3D'
maxDate: '+1M +3D'
{ closeText: '...', prevText: '...', ... }
and that is interpreted as two arguments to datepicker:
$('#order_expected_delivery_date').datepicker({
dateFormat: 'yy-mm-dd', ...
}, {
closeText: '...', ...
})
and the localization options are ignored.
Probably the easiest thing to do is to merge the localization options into your options.
options = $.extend({ }, $.datapicker.regional['zh-CN'],
dateFormat: 'yy-mm-dd'
showAnim: 'slideDown'
minDate: '+3D'
maxDate: '+1M +3D'
)
$('#order_expected_delivery_date').datepicker options
I use $.extend since you're already using jQuery. I also put the standard localized options before your options since dateFormat might be provided by the localized options and you want to use your own.
You could also use the option method like the example does:
$('#order_expected_delivery_date').datepicker 'option', $.datepicker.regional['zh-CN']
but that might overwrite your dateFormat so some care might be needed.
I'm experiencing an issue using the JQUI datepicker where I have a from and to text field. Picking a from date, auto selects the next field using the onClose function.
When trying to change the month or year from the drop down boxes in the to text field the datepicker popup gets reset and the user has to re-select the month or year. This only appears to happen on the to field.
Am I doing something wrong in the code to cause this behaviour? I've noticed this in Chrome and Firefox on Windows.
JS FIDDLE DEMO
CODE
$('#sfd_start').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
minDate: 0,
maxDate: "+2y",
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
$('#sfd_end').focus();
}
});
$('#sfd_end').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
maxDate: "+2y"
});
EDIT: There doesn't seem to be an issue if the datepicker is not auto opened after selecting a from date if that helps narrow it down.
Seems to be a timing issue. Change your onClose function to:
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
setTimeout(function () {
$('#sfd_end').focus();
}, 100);
}
jsFiddle example
i have added function for datepicker. but my date picker is not open on the first click.
here is my jsp code..
To
here is my query functions..
function addDate(idName) {
$(idName).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
}function addTime(idName) {
$(idName).timepicker({`
ampm: true,
timeFormat: "hh:mmtt"
});
}
please help me.. thanks.
DatePickers and TimePickers are assigned to focus events automatically. You do not need to call $(object).datepicker() every time, just at initialization and it will open properly when focused.
A good approach is to assign the .datepicker class to every object you want to have the DatePicker assigned and, then, assign the DatePicker to all elements of that class.
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
});
Do the same thing with TimePickers.
Try this bellow and i don know what language your using?
#Html.TextBoxFor(model=> model.Filters.EndTime,new { #class = "date" })
$('.date').datepicker({ dateFormat: "yy/mm/dd", maxDate: '+0d', minDate: '-600d'});
above code is written in asp.net mvc
You need to call
addDate(idName)
on document ready like this
$(function() {
addDate(idName)
});