How to open second UI Datepicker on closing the first one - javascript

I´m trying to add some functionality to a form with JQuery UI´s Datepicker.
When a user selects the arrival date (onSelect), a few things should happen:
Update the departure to 3 days after the arrival date (This works now :))
Split the departure date in 3 and add each part to an input field (see arrival date example in Fiddle)
When the arrival-datepicker closes (onClose), the departure-datepicker should open automatically, defaulting to the date selected in point 1 (example: http://www.kayak.es )
I managed to get point 1 to work, but I´m a bit lost with the other features. If anyone can show me how to do this or get me on the right track that would be really great! I´m still a beginner but learning fast.
Here´s a Fiddle of what I have now: http://jsfiddle.net/mattvic/B6Kax/13/

Split the departure date in 3 and add
each part to an input field
Looks like you already have the code written for this in the onSelect handler of the destination datepicker. Unfortunately, it looks like setDate does not trigger that event, and you cannot trigger it manually. What I would recommend is breaking that code out into a separate function that you can call from both places:
function splitDepartureDate(dateText) {
var depSplit = dateText.split("-", 3);
$('#alt-vertrek-d').val(depSplit[0]);
$('#alt-vertrek-m').val(depSplit[1]);
$('#alt-vertrek-y').val(depSplit[2]);
}
Then change your departure datepicker onSelect handler to point to that function:
$('#vertrek').datepicker({
// Prevent selecting departure date before arrival:
beforeShow: customRange,
onSelect: splitDepartureDate
});
Lastly, call that function from your arrival's onSelect event handler:
/* snip: */
// Populate departure date field
var nextDayDate = $('#aankomst').datepicker('getDate', '+3d');
nextDayDate.setDate(nextDayDate.getDate() + 3);
$('#vertrek').datepicker('setDate', nextDayDate);
// Manually call splitDepartureDate
splitDepartureDate($("#vertrek").val());
When the arrival-datepicker closes
(onClose), the departure-datepicker
should open automatically, defaulting
to the date selected in point 1
This is just a matter of using the onClose event handler:
onClose: function() {
$("#vertrek").datepicker("show");
}
Here's your updated example: http://jsfiddle.net/zXMke/

Answering the title's question :
$("#firsDate").datepicker('option',"onClose", function() { $( "#secondDate" ).datepicker( "show" ); });
Source :
http://api.jqueryui.com/datepicker/#method-show
http://api.jqueryui.com/datepicker/#option-onClose
I recommend to use onSelect instead of onClose event in order to make sure that the 1st date has been selected before opening the second datepicker.

point 3 answer:
$(function() {
$( '#aankomst' ).datepicker({
onClose: function(dateText, instance) {
$( '#vertrek' ).datepicker('show');
},
onSelect: function( dateText, instance ) {
// Split arrival date in 3 input fields
var arrSplit = dateText.split("-");
$( '#alt-aankomst-d' ).val(arrSplit[0]);
$( '#alt-aankomst-m' ).val(arrSplit[1]);
$( '#alt-aankomst-y' ).val(arrSplit[2]);
// Populate departure date field
var nextDayDate = $( '#aankomst' ).datepicker('getDate', '+3d');
nextDayDate.setDate( nextDayDate.getDate() + 3 );
$( '#vertrek' ).datepicker( 'setDate', nextDayDate );
}
});
});
you already have the solution for point 2?
Cheers,
Daddy

Related

How to use datepicker options within onClose

With the jQuery UI Datepicker Widget, I want to check if the user left a specific input field blank on blur, if so, then assign the date value to the value of altField. Something like this in my mind...
$(selector).datepicker({
dateFormat: 'yy-mm-dd',
onClose: function (date) {
if (!$(this).val()) {
//at this point, how can I assign my date to be the value of altField: "#hiddenInput"
}
else {
//...I just carry along and do something with my date...
}
}
});
Can that be done with the datepicker widget?
You can use a bootstrap date picker for solving this type of problem.
Link is given below.
https://bootstrap-datepicker.readthedocs.io/en/latest/#
My environment Datetimepicker for Bootstrap 3 version : 4.17.47
$("#dateTimePicker").on("dp.hide", function (e) {
console.log(e.date);
});

jQuery DatePicker - How do I show today's month instead of the selected dated?

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);
});
});

jQuery Datepicker, event AFTER select, not "onSelect"

So I'm coding a calendar from the jQuery UI datepicker and this renewing of instance thing is driving me insane.
The goal is to fill the calendar with events from a normal table, with the correct information (Date is given within the table) it works fine. It populates the calendar with events and you can drag and drop them to update the table with correct information. All this is done.
HOWEVER; I want too be able to click on a date, and create a event for the specific date selected, this is easy. However when I click all the previous events get removed because the instance of the Calendar is refreshed. (It's really hard to explain).
The function "initialize" is what gives every TD in the calendar a UL (for dragndrop) with correct "date" attr, and populates the UL with LI's from an external table.
So if I do:
$("#datepicker").datepicker({
firstDay: 1, //Mon-Sun
onSelect: function() { initialize(); }
});
Nothing happens.. But if i do it:
$("#datepicker").datepicker({
firstDay: 1, //Mon-Sun
onSelect: function() { initialize();alert(); }
});
You can actually see the calendar being populated correctly, (the alert prevents code from going further), but when pressing "OK" the calendar instance is refreshed and events are gone.
So what I'd need is an kind of "afterNewInstanceCreated:" command to work from..
Any ideas?
Here is how it looks atm: (JSFiddle), click on a date too see the "magic".
http://jsfiddle.net/N97QA/
Would really appriciate any help
Found answer here:
if you need a "afterShow"-event before jquery-ui version 1.9 you can overwrite the datepicker._updateDatepicker function.
for example:
$(function() {
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow)
afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
}
});
Now the datepicker raise an "afterShow" event after every update from the datepicker element.
Then just use this event in datapicker
$("#calendar").datepicker({
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
afterShow: function() {console.log("it works")}
});

Issue with my datepicker while using .on()

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
});
});
});

How to disable closing of datepicker on jQuery UI Datepicker

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;

Categories