Develop Reference

daterangepicker: press key enter to valid daterangepicker

I'm working with daterangepicker and I want to validate the selected date on key enter pressed. https://www.daterangepicker.com/
var shownDateField = nul;
$('.form-row .date').daterangepicker({
opens: 'center',
drops: "up",
singleDatePicker: true,
}, function(start, end) {
shownDateField.children(".form-item").children(".form-control").children("input.XagaDatePicker").val(start.format('DD/MM/YYYY'));
shownDateField.children(".form-item").children(".form-control").children("input[type='hidden']").val(start.format('DD/MM/YYYY'));
});

You can write an event of on('apply.daterangepicker') which allows you to fire an event on click in Allow button in date range picker.
in your case you can write a function as below
$('.form-row .date').on('apply.daterangepicker',function(ev,picker){
//your code for that event foes here.
});
I took a reference from daterangepicker official website
plus You need to write this code after you have initialized the dateragnepicker for the field.

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

Bootstrap datepicker: hide calendar on enter key press

How can I hide bootstrap datepicker calendar on enter keypress? I know it has autoClose option but that's not what I want.

Something like this might help you
$('#date-selected').keydown(function (ev) {
var keycode = (ev.keyCode ? ev.keyCode : ev.which);
if (keycode == '13') {
var dp = $('#date-picker').data('datepicker');
// 1: we manually restore the input date so it's not toggled on/off
dp.dates.pop(); // idempotent if no dates
dp.dates.push(dp.viewDate);
dp.setValue();
// 2: we move to the next input field & close the picker
$('input[id!="date-selected"]').first().focus();
dp.hide();
}
});
Reference:-
https://chezsoi.org/lucas/blog/2014/10/27/en-overriding-the-enter-keydown-behaviour-in-bootstrap-datepicker-js/

This link can help you fix for pressing enter after, manually entering the date

following code worked for me, posting answer to my own question to help other
$(".datepicker").datepicker('hide');

Datepicker change date format and submit form

I have found one useful range datepicker (with only one input field):
http://bseth99.github.io/projects/jquery-ui/4-jquery-ui-datepicker-range.html
I have changed the format from 'mm/dd/yy' to 'yy-mm-dd', it works so far user selects two different dates. If the user chooses the same date for start and end, the format is still the default - 'mm/dd/yy'. How can i change this ?
The second part of my problem is to submit the form. I have tried that, but it doesnt work:
.datepicker({
onChange: function () {
$('#exchange_search').submit();
}
})

I have found how to submit the form. Still remains the problem with the single date format.
Here is the solution if someone needs it:
onAfterUpdate: function ( inst ) {
$('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>')
.appendTo($('#jrange div .ui-datepicker-buttonpane'))
.on('click', function () {
$('#jrange div').hide();
$('#exchange_search').submit();
});
}