When I open a datepicker like that:
$("#checkindate,#checkoutdate").datepicker({
onClose: {
//I'd like to disable the closing
}
);
I'd like to prevent the closing of the datepicker dialog depending on a condition. The ideal would be that return false would stop this event.
I tried modifying the source code and there is no trivial solution.
What I want to do is to be able to select the checkout date without reopening another dialog.
Any idea?
I don't think it's possible to pick multiple dates from one datepicker. You probably will need to do something like their date range demo:
http://jqueryui.com/demos/datepicker/#date-range
$('#datepicker').blur(function(){
$(this).datepicker('show')
})
open up http://jqueryui.com/demos/datepicker/ and copy the code on the javascript console and see what happens
var selectTask = function(selectedDate, calendar) { // pretends to remain open
setTimeout(function() {
$(selector).datepicker('show'); // don't go away ...
}, 0);
};
// datepicker instance
$(selector).datepicker({ onSelect:selectTask, duration:0 });
It's an illusion of prevent closing; might reach the goal.
After spending around a day finally got it,
$( "#selector" ).datepicker({
onSelect: function ( dateText, inst ) {
this._updateDatepicker(inst);
}
});
For all code, click here.
In this question: jQuery UI Datepicker - Multiple Date Selections the accepted answer explains how to implement the multiple date selection in one datepicker.
To prevent the datepicker closing after the selection of a date, you can put this in the onClose option:
$(this).data('datepicker').inline = false;
And add this in onSelect option:
$(this).data('datepicker').inline = true;
Related
Using jQuery UIMonthPicker http://jsfiddle.net/kidsysco/JeZap/ and I'm having difficulty in trying an event on month select. There is no response on either onClose or onSelect function. Here is my code:
j$ = jQuery.noConflict();
j$(document).ready(function() {
j$('#txtDate').MonthPicker({
ShowIcon: false,
MaxMonth: 0,
MinMonth: -120,
onSelect: function() {
alert(j$("#txtDate").val());
}
});
j$("#txtDate").keydown(false);
j$("#txtDate").change(function(){
alert(j$("#txtDate").val());
});
});
According to the docs, you might want OnAfterChooseMonth
j$('#txtDate').MonthPicker({
....
OnAfterChooseMonth: function() {
alert($(this).val());
}
});
The change event will only fire when the input is changed by the user typing into it (and losing focus depending on control) - it doesn't fire when code changes the value.
Updated fiddle (on the first 'default' input)
Update: to address the incorrect edit that was made to this answer and incase it happens again: I rolled back because the question uses j$ = jQuery.noConflict(); and so $() might fail in this context and the ... shows that there needs to be more inside the MonthPicker than just what's here. To the reviewers: don't forget to check the question when reviewing.
So I've been looking everywhere for an answer. Including jQuery's datepicker API website and I can't seem to find a suitable answer.
This is what I would like to happen. When the text field is pressed and the datepicker pops up, I would like the calendar month to show this month, rather than defaulting to any previously selected date.
I still want to be able to select next and previous on the months. So setting minDate is not an option.
So for example, a user has previously selected 03/03/2013. The user then clicks the textbox, which pops up the date picker again, the month displayed is today's month rather than March. However, 03/03/2013 is still selected.
Thanks!
Code is very vanilla...
$(document).ready(function () {
$(".datePickerShowToday").datepicker({
dateFormat: 'dd/mm/yy',
buttonText: 'Click here to select a date',
onSelect: function () {
}
});
});
HTML Code:
<input type="text" id="NotificationDate" class="datePickerShowToday" />
You can do this with the $.datepicker._gotoToday function [this is what the datepicker uses for Ctrl + Home]. However, the widget doesn't provide an open event (it has beforeShow but that won't work in your case as it only runs before the widget is drawn). You can simulate this by using .focus on the input field and only binding one handler at a time (since keeping focus on the datepicker itself also triggers focus):
$( ".datePickerShowToday" ).datepicker({
onClose: function() {
$( ".datePickerShowToday" ).one("focus", function() {
$.datepicker._gotoToday(this);
});
}
});
$( ".datePickerShowToday" ).one("focus", function() {
$.datepicker._gotoToday(this);
});
Here's a fiddle with the above: http://jsfiddle.net/4vskg74t/
One way to do it:
$(document).ready(function(){
$('.datePickerShowToday').datepicker();
$(".datePickerShowToday").click(function(){
$('.datePickerShowToday').datepicker('setDate', null);
});
});
Ok, so I am using a datepicker with FuelCMS and have run into an odd issue and am hoping I can get some help.
I have a admin area that includes a date picker for adding events, but it needs to have the ability to add an unlimited number of events. The code that I have works, but only in an odd way. When the system is loaded it automatically creates one date field, but the datepicker will only come up after you have clicked to add a second field. At this point it will work in either field perfectly fine.
This obviously creates some usability issues so I am hoping that somebody might be able to see where I went wrong.
$("body").on("click", ".datepick", (function () {
$(this).datepick({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
}))
You need to use focus instead of click. Using click means you have to click in the input field, then it activates, so you will have to click out of the field and back into it for this to work. You also had $(this).datepick instead of $(this).datepicker.
$("body").on("focus", ".datepick", function () {
$(this).datepicker({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
});
JSFiddle
try this code.
$(document).ready(function(){
$("body").on("click", function () {
$(this).datepick({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
});
});
I am trying to add an event blur on input in order to hide a calendar.
The plugin I am using to show the calendar is the foliowing eternicode/bootstrap-datepicker.
Here is the source code http://jsfiddle.net/KLpq7/75/
var inputs = $('.datepicker').datepicker({
autoclose: true
});
inputs.on('blur', function () {
console.log($(this));
// I would like to hide just the date picker
//$(this).hide();
});
You can try this:
var inputs = $('.datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true}).on('changeDate', function (ev) {
$(this).blur();
$(this).datepicker('hide');
});
Fiddle: http://jsfiddle.net/KLpq7/82/
inputs.on('blur', function () {
inputs.datepicker('hide');
});
This is a known bug* -- if you use "datepicker" as the class for your inputs, it will interfere with the datepicker code, because datepicker is also the class used for the picker pane. Using a different class for your pickers should fix the issue for now.
* There aren't any open tickets for it at the moment, but it is acknowledged as a minor bug
Try this updated fiddle. I think that since you were using a class selector there was some conflicts in the blur event handler. I have separated each calendar picker by ID and it seems to work fine now.
Is it possible to display jQuery UI datepicker without having to click on anything?
I want the datepicker to be visible when the window loads. Or is this not possible? If not is there another plugin for this or is it best to create a new on my own?
one thing you could do is give focus to the input so that the datepicker shows:
$('#datepicker').focus()
look here http://jsbin.com/agazes/edit#preview
or show it after creating it:
$('#datepicker').datepicker('show')
http://jsbin.com/agazes/2/edit#preview
This does not seem to be possible by passing an option. However, you can call the show method after creating your datepicker:
$(document).ready(function() {
$("#yourElement").datepicker({
// your options...
}).datepicker("show");
});
http://jqueryui.com/demos/datepicker/#method-show
You could call the show method when you want it to open.
In Some jQuery versions show is not available, in that case use:
window.addEventListener('load', function () {
document.getElementById('datepicker').click();
});
jQuery(document).ready(function() {
$('#datepicker').bind('touchstart click', function(){
$(this).focus();
});
});