Develop Reference

Set datepicker value to empty

I have a list of form for user to input. All the form have the same input that user need to fill in. And there is a next button to go to the next form. So basically the flow is like this: User fill in the first form, click next button will go to second form and so on. So i just reuse the input for all the form. I do a save first after that reset the input field for the next form.
Everything work fine except the datepicker field, I'm using Kendo Datepicker. I reset it like this:
$('#datepicker').data('kendoDatePicker').value("");
Even thought the field show nothing, but when i save, it always set the previous input date into it.
So anyone know how to solve this?

Simply use $("#datepicker").val('');
See JsFiddel http://jsfiddle.net/x4dA9/775/
ADD:
Using Model: jsFiddel

<input type="text" name="datefilter" value="" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});

After resetting the Kendo UI jquery datepicker with the line...
datepicker.value('')
the input mask is lost.
To keep the input mask, reset the format option on the control...
$("#clearSystemUsageToBtn").click(function (e) {
var datepicker = $("#DateToK").data("kendoDatePicker");
datepicker.value('');
datepicker.setOptions({ format: "dd/MM/yyyy" });
});

javascript datepicker detect changed value in input field

I've got simple date picker based on mootools (http://www.monkeyphysics.com/mootools/script/2/datepicker)
This is not jQuery datepicker, it's event triggers don't work.
I'd need to calculate days and other things once dates are picked, calculation works fine, I need it to fire after user decides to change dates, I've tried all event handlers I could find, they all work if you press enter or click another field, but it should recalculate right after clicking (picking) the date.
<input type="text" name="arrival" value="2016-10-05" title="" class="fromdate">
<input type="text" name="departure" value="2016-10-08" title="" class="todate">
<input type="text" name="addnight" value="" title="" class="calculated">
<script type="text/javascript">
$("select, input, .datepicker_dashboard").on("change paste keyup blur click mouseup hover focus focusout", function() {
var calculus = daydiff(parseDate($('.fromdate').val()), parseDate($('.todate').val()));
if (calculus<0) {var calculus=0;}
$(".calculated").val(calculus);
}
</script>

Reading the documentation (linked by yourself) tells me that you are able to set an onSelect handler in the options while creating the datepicker with new DatePicker(input-target-selector [, options-object]);
onSelect
Event hook triggered when a date is selected. (v1.16+: comes with 1
argument, a standard javascript Date object representing the selected
Date)

Try this. I got the answer from the link listed below
Trigger function when date is selected with jQuery UI datepicker
$("#dt").datepicker({
onSelect: function(dateText, inst) {
var date = $(this).val();
var time = $('#time').val();
alert('on select triggered');
$("#start").val(date + time.toString(' HH:mm').toString());
}
});

Show div upon tabbing into a certain input field

I want to show a date picker when the user gets to a certain input on a form. The datepicker should display if the user simply tabs into the field.
I tried something like this (I'm using Zebra_DatePicker by the way):
var datepicker = $('#date-picker-input').data('Zebra_DatePicker')
$('#date-picker-input').focus(function(){
datepicker.show()
})
That works - tabbing into the field shows the datepicker. However, this breaks the functionality if the user decides to click on the input field in question; when this happens, the click initially opens the datepicker, and then the focus callback function closes it. The result is a split-second flicker where the datepicker is shown then closes instantly.
How can I get functionality for both clickers and tabbers?

The problem is that data('Zebra_DatePicker') returns a reference to the date-picker component and not to the element itself so your focus event binding is performed on the wrong object.
Try this:
$('#date-picker-input').on('focus click', function(e) {
e.stopImmediatePropagation();
$(this).data('Zebra_DatePicker').show();
})

The plugin does not support what you are asking nor does it offer many hooks, so the workaround will be a bit hacky..
If you are working with a single datepicker in the page do
on initialization of plugin
$('#date-picker-input').Zebra_DatePicker({
// what options you already use
// and then add
onSelect: function () {
var datepicker = $(this).data('Zebra_DatePicker');
setTimeout(function () {
datepicker.hide();
}, 1);
}
});
and then add
$('#date-picker-input').off('click').on('focus', function(){
var datepicker = $(this).data('Zebra_DatePicker');
datepicker.show();
return false;
});

jQuery UI datepicker reset date

I have a datepicker that's on an input field, default date when I first open it is today's date, which is what I want.
However, when I select a date and I clear the input field, the datepicker still has the selected date on it, which I don't want
Does anyone have an idea why this happens and how I can prevent this behavior?

The proper way to reset the date of a Datepicker widget is like this:
$.datepicker._clearDate('#input_field_goes_here');
Or like this:
$('#input_field_goes_here').datepicker('setDate', null);
Whichever works best for you.

See http://codepen.io/alexgill/pen/yOQrwV
$(SELECTOR).datepicker('setDate', null);

Clear button in calendar.
$("#txtCalendar").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function (dateText, obj) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
$("#txtCalendar").val('');
}
});

Just add this code
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
You can use backspace to clear field even if it has in read only mode. Source

To really reset everything, including the selected year in the date selector popup, I had to do the following:
$(SELECTOR).datepicker('setDate', new Date());
$(SELECTOR).datepicker('setDate', null);
Just doing the last line results in the previously selected year to show in the date selector

Using .change() and a datepicker in jquery to submit a form

Currently I'm using JQuery UI's datepicker range, and I've added some more javascript that should submit the form on the page when different form elements change.
This works on the drop down I've added, as well as the date picker input boxes if I enter dates manually and then click away.
However, if I click an input field for the datepicker, and the date chooser pops up, the form will not submit after choosing a date..
Its as if the input field didn't know a change occured..?
http://api.jquery.com/change/
here is the code I'm using:
$(document).ready(function() {
$('#from').change(function() {
document.myform.submit();
});
});
$(document).ready(function() {
$('#to').change(function() {
document.myform.submit();
});
});
Using the datepicker UI events, I've added the following code for testing but it isn't working.. any ideas?
$(document).ready(function() {
$('#from').datepicker({
onClose: function() { alert('Yo yo!') }
});
});

The jQuery UI DatePicker has custom events, particularly the onSelect event, click the event's tab and it's at the bottom of the docs:
http://jqueryui.com/demos/datepicker/

Double check there are no JavaScript errors above the code you quoted.
If there are errors then the JavaScript code below these errors will not execute properly.
That is probably why the code you added to test did not work either.

The correct answer is here: jQuery datepicker, onSelect won't work

I hope it should be on focus . on click of date picker the focus will be in the text box where you have to show the date.
so the event should be .focus()
http://api.jquery.com/focus/
http://api.jquery.com/focusout/