We Keep Coding

Simulating enter key after selecting date (jquery)

I've got a form field using the jQuery datepicker function on a Wordpress website using a product customizer plugin. The form field by default was never intended to be a date picker, I added that later. While I can get the date picker working fine with the field itself, the only way it'll actually show on the product is if you press enter in the field after selecting the date. I'd like this to happen automatically so it appears after the user selects a date, or when the datepicker box loses focus. I've attempted to simulate the enter key being pressed using this but it didn't do anything (console log worked though):
jQuery(function () {
var e = jQuery.Event( "keydown", { keyCode: 13 } );
jQuery("#ui-datepicker-div").focusout(function() {
jQuery("#date-of-birth-field").focus();
jQuery("#date-of-birth-field").trigger( e );
console.log("test");
});
#ut-datepicker-div is the datpicker calendar element, while #date-of-birth-field is the input ID where the date appears.
Any other way of achieving this? I also tried the 'load' function but that didn't work either.

Try this in your definition:
jQuery(function($) {
$("#date-of-birth-field, #date-of-death-field, #companioin-2-date-of-birth-field, #companioin-2-date-of-death-field").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "c-100:c+0",
showButtonPanel: true,
dateFormat: 'M dd yy',
onSelect: function(dt, obj) {
$(this).trigger($.Event("keypress", {
which: 13
}));
}
});
$("#component-5ed524ac8d83c, #component-5ed671ac50881").click(function() {
$(this).addClass("maxSize");
});
});
When a Date is selected, it should trigger an Enter keypress.

How can I add a double click event on a flatpickr-day element

I have some flatpickr calendars with day and time, and I want to close the calender when I double click on a flatpickr-day element in the calendar.
I tried to add a double click listener in the flatpickr options, the onOpen field
var flatpckr_options = {
enableTime: true,
altInput: true,
altFormat: "d-m-Y H:i",
dateFormat: "Y-m-d H:i",
time_24hr: true,
allowInput: true,
onOpen: function(selectedDates, dateStr, instance) {
[...instance.calendarContainer.querySelectorAll(".flatpickr-day")].map(x => x.addEventListener('dblclick', function (e) {
calendars.map(x => x.close());
console.log("double click");
}));
}
};
const calendars = flatpickr(".calendar", flatpckr_options);
https://jsfiddle.net/p3e0da6r/2/
however the double click event doesn't get triggered on the flatpickr-day element, how can I get it to work?
I think it's because once I click on a day it changes focus to the flatpickr-time element, if I didn't have the time element the calendar would close on single click inside a flatpickr-day element by default, but I do need the time element as well.

There are many issues with your code -
First of all your input is a normal input, you need to add the attribute data-input so that your flatpickr work.
<input type='text' id='date' class='calendar' data-input/>
In the onOpen function - [...instance.calendarContainer.querySelectorAll("flatpickr-day")], flatpickr-day is a class and not a standalone element. You can select by .flatpickr-day.
[...instance.calendarContainer.querySelectorAll(".flatpickr-day")]
You need to use the event of https://flatpickr.js.org/events/, instead of dblclick use onChange.
Here is the working fiddle - https://jsfiddle.net/mkwa9bhv/
Note - variables declared with const are not hoisted. Declare const calendars = flatpickr(".calendar", flatpckr_options); at the top, so that it will be available within your flatpckr_options.

A less than perfect solution, but gets the job done for what I need right now:
var new_date = 0, old_date = 0;
// ... inside the flatpickr options, for the onChange event
onChange: function(selectedDates, dateStr, instance) {
old_date = new Date();
[...instance.calendarContainer.querySelectorAll(".flatpickr-day")].map(x => x.addEventListener('mousedown', function (e) {
new_date = new Date();
let diff = new_date - old_date; // in ms < 500ms => double click
if (diff <= 500) {
calendars.map(y => y.close());
}
old_date = new_date;
}));
},

Fullcalendar handle double click

I'm using fullcalendar for my calendar functionality. I'm using dayClick and select. In fullcalendar, select will be called even though it is a single day click. So, I changed the dayClick event like below to handle the day click. Here is my code
dayClick: function(date, jsEvent, view) {
isClicked = true;
},
select: function(startDate, endDate){
if(isClicked){
console.log('click');
return;
}
var start_date = moment(startDate).format('Y-MM-DD');
var end_date = moment(endDate).format('Y-MM-DD');
if(start_date != end_date){
end_date = moment(endDate).subtract(1, 'days').format('Y-MM-DD');
}
var set_default_duration = isClicked == true ? true : false ;
isClicked = false;
var user = $(t).attr('data-code');
// Some other stuff
},
Actually, I want to handle double click to create new events. I tried with dblclick event function from jquery with the calendar but always single click only triggers. The problem is, immediately after the click made, select is fired, so I'm unable to handle the double click. Can someone help me to handle the double click in this case.
Here is the Fiddle
EDIT: I'm trying to handle double click of the empty slots to create new event. Currently, single click is doing this

I found the answer. The problem is with the selection. It is selected once the day is clicked. So, I used unselect method to clear the selection and it seems fine now. Here is the code
dayClick: function(date, jsEvent, view) {
if(isClicked){
isDblClicked = true;
isClicked = false;
}
else{
isClicked = true;
}
setTimeout(function(){
isClicked = false;
}, 250);
},
select: function(startDate, endDate, jsEvent){
if(isClicked){
$(t).fullCalendar('unselect');
return;
}
// Other stuff
}

Well you could assign a new variable thats called clickedTimes or something like that and set it to zero.
Whenever you get a click you set clickedTimes to one and then two and you check if clickedTimes is at 2.
When it gets to two let it do the thing you want and set it back to zero.

Bootstrap datepicker close function

I am trying to make function call on bootstrap datepicker when user clicks outside of calendar.
When user selects date datepicker closes automatically, same when user clicks outside of the datepicker div, it closes itself.
So my question is how can I understand when its closed? I know there is an event called onClose but it only works when page loads
fiddle

Use the .on("hide"... event.
From the docs:
$('.datepicker').datepicker()
.on(picker_event, function(e) {
// `e` here contains the extra attributes
});
For your example... picker_event will be hide.
Something like:
var checkin = $('#date-from').datepicker({
format: 'dd/mm/yyyy',
startDate: '+1d',
weekStart: 1,
beforeShowDay: function(date) {
return date.valueOf() >= now.valueOf();
},
autoclose: true
}).on('changeDate', function(ev) {
alert("changed");
}).on('hide', function(ev) { // <-----------
alert("hide");
});
Updated fiddle
bootstrap-datepicker events
bootstrap-datepicker hide event

As per the documentation here: https://bootstrap-datepicker.readthedocs.io/en/latest/events.html#hide
$('.datepicker').datepicker()
.on('hide', function(e) {
// `e` here contains the extra attributes
});
Or
$('.datepicker').datepicker()
.on('hide', myFunction);
And then create myFunction
function myFunction(e) {
// whatever you want :)
}
Here is your example with little modify https://jsfiddle.net/mr3dxj5p/6/ here you can see I just change changeDate to hide to fire alert message

when focus is out from date time textbox then onchange event is working in jquery?

I have one text box which is accepting datetime from user
other textbox accepting varchar username
If i select username and change datetime textbox values it should reset username textbox
for this i write following code which is working good on change values of datetime textbox
$(document).ready(function () {
validateChangeText('Datetextbox');
});
function validateChangeText(ctr) {
$('#' + ctr).keypress(function () {
$('#Username').val('');
});
$('#' + ctr).change(function () {
$('#Username').val('');
});
}
But why it resets username values when I only click on and make focus out of text box
not changes any value of datetime then also it resets usernaem values
In date time textbox i have using following code.
#Model.Date.ToString("MMM dd, yyyy HH:mm:ss")
#Html.Hidden("tDate", Model.Date.ToString("MMM dd, yyyy HH:mm:ss"))

Can you try following...
$(document).ready(function () {
validateChangeText('Datetextbox');
});
function validateChangeText(ctr) {
$('#' + ctr).focus(function () {
$('#Username').val('');
});
$('#' + ctr).change(function () {
$('#Username').val('');
});
}
Here's js fiddle...jsfiddle