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

jquery function stoped after unbind

I have a function that gets executed to change my datepicker to get new values. After I select my drop down 'changeme' it works. The next time I try nothing happens? I am not unbinding the changme drop down box.
$("#changeme").change(function()
{
var d = newvalues();
$("#sdate, #edate").removeClass("datepicker hasDatepicker");
$("#sdate, #edate").unbind();
$("#sdate, #edate").addClass("datepicker");
$(".datepicker" ).datepicker({changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", minDate:d.start_date,maxDate:d.stop_date, yearRange:d.start_year[0]+":"+d.stop_year[0]});
submitform();
}
function newvalues()
{
var s_date = $("#changeme > :selected").data('start_date');
var s_year = s_date.split("-");
var st_date = $("#changeme > :selected").data('stop_date');
var st_date = $("#changeme > :selected").data('stop_date');
return {start_date:s_date,
start_year:s_year, stop_year:st_year,stop_date:st_date
};
}
*************** update *********************
Sorry my $("#sdate").change(function(){submitform();}); stops working.
$("#startdate").change(function()
submitform();
});
All it does is submits the form with new values. I will try to post a working copy. But I am getting no errors.
Once the page loads or you select run and you type into the first text box it works. Once you select an option from the drop down menu and try to update the text box. the change function doesn't fire.
Here is a link to a fiddle.
JS fiddle

Figured it out. changed how i was using jquery a bit. I ended up removing the unbind and adding $dateField.datepicker("option", {changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", minDate:d.start_date,maxDate:d.stop_date, yearRange:d.start_year[0]+":"+d.stop_year[0]});
JSFiddle

Callback function when clicked on "selected date" in daterangepicker

using the latest version of Daterangepicker for bootstrap
For the following calendar (standard example used in their website):
$('#demo').daterangepicker({
"singleDatePicker": true,
"autoApply": true,
"startDate": "05/31/2017",
"endDate": "06/06/2017"
}, function(start, end, label) {
console.log("a date is selected")
});
The given callback function is called correctly when I select a date in my calendar. However, if I select the active date which is already selected, the pop up is closed but the callback function is not called. As far as I see, there is no any opportunity provided to fire a function when the same date is selected.
So, my question would be: Is there a hacking way to have a callback function which is called when the same date is selected?
For instance, I tried the following piece of code to add a listener to the active cell but it is also not fired:
$('td.active.start-date.active.end-date.available').on('click', function () {
console.log('the same date is selected')
})

What you can do is bind an extra event to your input which will be called when you select an option. See the following code (assuming the element with id demo is your input) Since you already use jQuery my example uses this as well:
$('#demo').on('change.datepicker', function(ev){
var picker = $(ev.target).data('daterangepicker');
console.log(picker.startDate); // contains the selected start date
console.log(picker.endDate); // contains the selected end date
// ... here you can compare the dates and call your callback.
});
Hope this will help!

The 'click' event does not work, but the 'mousedown' event does.
Below an example, which identifies the clicked element ('td.available') and programatically clicks the same date again.
$('#demo').on('showCalendar.daterangepicker', function(ev, picker) {
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}
// when user selects ("mousedown") any date in the calendar:
$('td.available').on("mousedown", function() {
clickedElement = $('td.in-range')[0]; // this is the clicked element
// example: programatically click again.
triggerMouseEvent (clickedElement, "mouseover");
triggerMouseEvent (clickedElement, "mousedown");
triggerMouseEvent (clickedElement, "mouseup");
triggerMouseEvent (clickedElement, "click");
);
});
});

bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.datepicker').datepicker({
format: "yyyy-mm-dd",
}).on('changeDate', function(ev){
// do what you want here
$(this).datepicker('hide');
}).on('changeDate', function(ev){
if ($('#startdate').val() != '' && $('#enddate').val() != ''){
$('#period').text(diffInDays() + ' d.');
} else {
$('#period').text("-");
}
});
});
</script>
So here's what my datepicker looks like. So basically when I change date by clicking mouse it works good, however when I manually change date with keyboard or manually clear the date change date event doesn't get called. Is this a bug or am I doing something wrong here ?

You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try something like this:
$(document).ready(function() {
$('.datepicker').datepicker({
format: "yyyy-mm-dd",
})
//Listen for the change even on the input
.change(dateChanged)
.on('changeDate', dateChanged);
});
function dateChanged(ev) {
$(this).datepicker('hide');
if ($('#startdate').val() != '' && $('#enddate').val() != '') {
$('#period').text(diffInDays() + ' d.');
} else {
$('#period').text("-");
}
}

In version 2.1.5
bootstrap-datetimepicker.js
http://www.eyecon.ro/bootstrap-datepicker
Contributions:
Andrew Rowls
Thiago de Arruda
updated for Bootstrap v3 by Jonathan Peterson #Eonasdan
changeDate has been renamed to change.dp so changedate was not working for me
$("#datetimepicker").datetimepicker().on('change.dp', function (e) {
FillDate(new Date());
});
also needed to change css class from datepicker to datepicker-input
<div id='datetimepicker' class='datepicker-input input-group controls'>
<input id='txtStartDate' class='form-control' placeholder='Select datepicker' data-rule-required='true' data-format='MM-DD-YYYY' type='text' />
<span class='input-group-addon'>
<span class='icon-calendar' data-time-icon='icon-time' data-date-icon='icon-calendar'></span>
</span>
</div>
Date formate also works in capitals like this data-format='MM-DD-YYYY'
it might be helpful for someone it gave me really hard time :)

The new version has changed.. for the latest version use the code below:
$('#UpToDate').datetimepicker({
format:'MMMM DD, YYYY',
maxDate:moment(),
defaultDate:moment()
}).on('dp.change',function(e){
console.log(e);
});

Try this:
$(".datepicker").on("dp.change", function(e) {
alert('hey');
});

I found a short solution for it.
No extra code is needed just trigger the changeDate event. E.g.
$('.datepicker').datepicker().trigger('changeDate');

Try with below code sample.it is working for me
var date_input_field = $('input[name="date"]');
date_input_field .datepicker({
dateFormat: '/dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
}).on('change', function(selected){
alert("startDate..."+selected.timeStamp);
});

This should make it work in both cases
function onDateChange() {
// Do something here
}
$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);

Depending which date picker for Bootstrap you're using, this is a known bug currently with this one:
Code: https://github.com/uxsolutions/bootstrap-datepicker
(Docs: https://bootstrap-datepicker.readthedocs.io/en/latest/)
Here's a bug report:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1957
If anyone has a solution/workaround for this one, would be great if you'd include it.

I have this version about datetimepicker https://tempusdominus.github.io/bootstrap-4/ and for any reason doesn`t work the change event with jquery but with JS vanilla it does
I figure out like this
document.getElementById('date').onchange = function(){ ...the jquery code...}
I hope work for you

I was using AngularJS and AngularStrap 2.3.7 and trying to catch the 'change' event by listening to a <form> element (not the input itself) and none of the answers here worked for me. I tried to do:
$(form).on('change change.dp dp.change changeDate' function () {...})
And nothing would fire. I ended up listening to the focus and blur events and setting a custom property before/after on the element itself:
// special hack to make bs-datepickers fire change events
// use timeout to make sure they all exist first
$timeout(function () {
$('input[bs-datepicker]').on('focus', function (e){
e.currentTarget.focusValue = e.currentTarget.value;
});
$('input[bs-datepicker]').on('blur', function (e){
if (e.currentTarget.focusValue !== e.currentTarget.value) {
var event = new Event('change', { bubbles: true });
e.currentTarget.dispatchEvent(event);
}
});
})
This basically manually checks the value before and after the focus and blur and dispatches a new 'change' event. The { bubbles: true } bit is what got the form to detect the change. If you have any datepicker elements inside of an ng-if you'll need to wrap the listeners in a $timeout to make sure the digest happens first so all of your datepicker elements exist.
Hope this helps someone!

if($('.single_datetime').length){
$('.single_datetime').dateRangePicker({ format: 'DD.MM.YYYY HH:mm', language: 'tr', autoClose: true, singleDate : true, showShortcuts: false, time: {enabled: true}
}).bind('datepicker-change',function(event,obj){caclDay();});
}
Ref: https://www.chamonix-property.com/bower_components/jquery-date-range-picker/