Develop Reference

Date picker window is not close

I have a date picker but When I clicked date picker input and if I didn't choise any date then when I go outside the input, date picker window is not close. Also this problem just is there in IE.
My code is below;
#Html.TextBox("Birthdate", null, new { #class = "form-control date-picker input-mask-date", placeholder = "Doğum Tarihi", required = true, id = "dtBirthDate" })
Script side;
$(".input-mask-date").mask("99.99.9999");
if I didn't choise any date then when I go outside the input, date picker window is not close.

As you mentioned this is an issue with IE. However, you can add a custom function to check when one leaves or clicks outside the datepicker to hide it.
$('.date-picker').on('blur', function() {
$('.date-picker').unmask();
});
You can equally use focusOut for the event listener and also fadeOut / slideUp if they work on date pickers.
So as mentioned by #caglarboran, the right method to call is unmask rather than hide. Edited the answer.

I solved this problem like that;
$('#dtBirthDate').on('focus', function () {
$(this).mask("99.99.9999");
});
$("#dtBirthDate").focusout(function () {
$(this).unmask();
});

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

Put action on input text change, when the input is filled from another standard

How can I put an action on an input when it's text is changed from another input, such as a datepicker, for example. I tried to put the action when I click the date, from datepicker, but it doesn't work.
Any suggestions ?
Here is my code sample :
datePicker = $("#birthday").datepicker({
maxDate : "0d",
showOtherMonths : true,
selectOtherMonths : true,
changeYear : true,
changeMonth : true,
onSelect : function(date) {
validateBirthday;
alert(date);
}
});
$("#birthday").on("keydown keyup click input submit mouseenter focus",
validateBirthday);
On the keydown, keyup, click, focus and the other parameters from the on function the validateBirthday is called. But when the input is filled with the value from the datepicker, it isn't, although the alert work. Any ideas why this happens ?
EDIT
I did some debugging and I saw that the validateBirthday function from the datepicker's onSelect is executed before the input is filled, and that's why it doesn't work. How can I make it execute after the input is filled ?

Just trigger one of the events the validation handler is bound to:
onSelect : function(date) {
$(this).change();
}

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