We Keep Coding

why jquery-ui-datepicker accepts invalid values from keyboard

I am using jquery UI date-picker to get the date with min and max date range value, it's working on selecting the date using the date-picker widget, but it gets invalid values using the keyboard. I want to get the date by keyboard as well as mouse. Please help me to get valid date value or to show an error message of the invalid date value.
datepicker

You can use code as below :
<script type="text/javascript">
$(".datePicker").datepicker({
dateFormat: 'd/mm/yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
minDate: Date.parse("1900-01-01"),
maxDate: Date.parse("2100-01-01"),
yearRange: "c-90:c+150"
});
$(function () {
$.validator.addMethod(
"date",
function (value, element) {
// Here you can set date range
var minDate = Date.parse("1900-01-01");
var maxDate = Date.parse("2100-01-01");
var valueEntered = Date.parse(value);
if (valueEntered < minDate || valueEntered > maxDate) {
return false;
}
return !/Invalid|NaN/.test(new Date(minDate));
},
"Please enter a valid date!"
);
});
</script>

bootstrap datepicker not retaining value on focusout

I am working on bootstrap datepicker.
function initializeDatePicker() {
$('#milestone_start_date').datepicker({
weekStart: 1,
startDate: '-1m',
endDate: '+13m',
autoclose: true,
format: 'yyyy-mm-dd'
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#milestone_end_date').datepicker('setStartDate', minDate);
});
$('#milestone_end_date').datepicker({
weekStart: 1,
format: 'yyyy-mm-dd',
autoclose: true
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#milestone_start_date').datepicker('setEndDate', maxDate);
});
}
I called this function for multiple times to update input startDate, EndDate fields.
$('#milestone_end_date').datepicker('destroy');
$('#milestone_start_date').datepicker('destroy');
$('#milestone_start_date').val(data.start_date);
$('#milestone_end_date').val(data.end_date);
initializeDatePicker();
After AJAX call, correct values are displayed in start, EndDate popups. But if I clicked startDate field. And focusOut from the field. Value in startDate changes to today.
I am not sure what is wrong here.
Please help me. Thanks in advance.

datepicker in javascript date format DD/MM/YYYY

Am using a datepicker in my application.
code is :
this.$el.find('#ondate').datepicker({
minDate: 0,
maxDate: "+2M",
onSelect: function(x) {
self.startDepartureValidation();
return self.onDate(x);
},
// numberOfMonths: numberOfMonths,
beforeShow: function() {
return $('#ondate').datepicker("option", "maxDate", $("#returndate").datepicker('getDate'));
}
});
when i seklect the date am getting the format as MM/DD/YYYY but i need as DD/MM/YYYY in the textbox.
if i use the dateformat: in datepicker i will get that format but , with MM/DD/YYYY am having so many calculations in my application.
Note: i need just in datepicker textbox after seklecting date it should show in that textbox as DD/MM/YYYY. without changing in our code in other places

Add the dateFormat attribute to your code:
this.$el.find('#ondate').datepicker({
minDate: 0,
maxDate: "+2M",
dateFomat: 'dd/mm/yy', //Note that 'yy' is for four digits.
onSelect: function(x) {
self.startDepartureValidation();
return self.onDate(x);
},
// numberOfMonths: numberOfMonths,
beforeShow: function() {
return $('#ondate').datepicker("option", "maxDate", $("#returndate").datepicker('getDate'));
}
});
More details at the official documentation here.
The below snippet of code can help in converting date format:-
var ddMMyy = $("#ondate").val().split("/");
var mmDDyy = ddMMyy[1]+"/"+ddMMyy[0]+"/"ddMMyy[2];
alert(mmDDyy);
Working JSFiddle here.

jQuery UI Datepicker - prevent refresh on date click

I changed year dropdown in Datepicker to textbox, because I want manual input for year.
But when I select some day, textbox returns to dropdown. How can I prevent that?
This is my fiddle:
HTML
<div id="datepicker"/>
jQuery
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function() {
$(this).data('datepicker').inline = true;
var curDate = $(this).datepicker('getDate');
var month = $(".ui-datepicker-month").val();
var year = $(".ui-datepicker-month").next("input").val();
$("#datepicker").datepicker('setDate', new Date(year, month, $.datepicker.formatDate('dd', curDate)));
//var text = $("<input type='text'id = 'textbox' style='width:106px' value='2015'/>");
//$(".ui-datepicker-year").before(text).hide();
}
});
var text = $("<input type='text'id = 'textbox' style='width:106px' value='2015'/>");
$(".ui-datepicker-year").before(text).hide();
Thanks in advance!

The option onSelect does some code execution after selecting date.
See the line $("#datepicker").datepicker('setDate', new Date(year, month, $.datepicker.formatDate('dd', curDate))); inside onSelect block.
there you are again assigning today's date . so just remove or comment it .
Fiddle

Bootstrap datepicker change minDate/startDate from another datepicker

There are two datepickers in my page and both are of bootstrap. The condition is only that Start date never High with respect to End Date. Means End date Attribute (minDate) must be changed when Start Date changed by datepicker and same when End Date Changed, the minrange of calendar of Start Date datepicker should be according to End Date Value.
I hope you understand my problem
$(document).ready(function(){
$("#startdate").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datetimepicker('setStartDate', minDate);
});
$("#enddate").datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<input type="text" placehoder="Start Date" id="startdate"/>
<input type="text" placehoder="End Date" id="enddate"/>

I have made a jsfiddle doing what you want. As pqdong commented you were calling datetimepicker instead of datepicker when setting end date.
Here is the working javascript:
$(document).ready(function(){
$("#startdate").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datepicker('setStartDate', minDate);
});
$("#enddate").datepicker()
.on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#startdate').datepicker('setEndDate', maxDate);
});
});

I don't have enough reputation tocomment on Razzildinho's excellent answer, but did want to offer one small addition that will help users, which is to highlight the selected day on the second datepicker. You can do this by adding this line:
$('#enddate').datepicker('setDate', minDate);
So in context it will look like this:
$(document).ready(function(){
$("#startdate").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datepicker('setStartDate', minDate);
$('#enddate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED
});
$("#enddate").datepicker()
.on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#startdate').datepicker('setEndDate', maxDate);
});
});