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>

Set picked date to another datepicker with Materialize

I'm using Materialize to create an app with two datepickers:
$(document).ready(function(){
$('#outDate').datepicker({
format: 'dd-mm-yyyy'
});
});
$(document).ready(function(){
$('#returnDate').datepicker({
format: 'dd-mm-yyyy',
});
});
What i need to do is pass the selected date from datepicker 1 ('#outDate') and set into datepicker 2 ('#returnDate'). How can i do that. I've read the doc of Materialize, but i'm not getting any success.
Someone can help me, please?
Also i'm using Javascript and AngulrJs.
Thanx in advance.

you can do like this
$(document).ready(function(){
$('#outDate').datepicker({
format: 'dd-mm-yyyy',
onSelect: function(date) {
var date = $("#outDate").datepicker('getDate').getDate(); // get selected date of #outDate
$('#returnDate').datepicker('defaultDate ', new Date(date)); // set #outDate date to #returnDate
}
});
});
$(document).ready(function(){
$('#returnDate').datepicker({
format: 'dd-mm-yyyy',
});
});
Added working fiddle here

How can I clear input text on datetimepicker?

Demo and full code like this :
https://jsfiddle.net/oscar11/yfjvd200/
I want the datepicker and timepicker not filled when loaded the first time. I want the datepicker or timepicker to filled when the user clicks on the input text of each. Eg user click on timepicker text input then time will be filled
I try use this :
$('#datepicker').val("");
$('#timepicker').val("");
But it does not work
How can I do it?

You found the right trick!
$('#datepicker').val("");
$('#timepicker').val("");
But you are not doing it at the right moment. Place that AFTER the pickers have been instanciated.
To fill the time on focus, add this .on() to timepicker:
$('#timepicker').datetimepicker({
minDate: moment().add(300, 'm'),
})
.on('focus', function(e){
if( $(this).val() == "" ){
$(this).data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
Fiddle

You just need to write these lines to end of your function :
$('#datepicker').val("");
$('#timepicker').val("");
You can use this code :
$(function () {
console.clear();
$('#datepicker').datetimepicker({
minDate: moment().add(300, 'm').startOf("day")
})
.val(moment().add(300, 'm').format("DD-MM-YYYY")) // To set correct "valid" date from start
.on('dp.change', function(e){
var now = moment().format("X");
//console.log(e.date.format("X"));
//console.log(now);
// Comparing selected date (moment object) in milliseconds
if(e.date.format("X")+(300*60*1000) > now ){
console.log("above 5 hours, unlocking time.");
$('#timepicker').data("DateTimePicker").minDate(false);
}else{
console.log("below 5 hours, locking time (and probably resetting the value to min...)");
$('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
$('#timepicker').datetimepicker({
minDate: moment().add(300, 'm'),
});
$('#datepicker').val("");
$('#timepicker').val("");
});

Have a look at this fiddle https://jsfiddle.net/lamp03/yfjvd200/9/. I have commented some lines
$(function () {
//$('#datepicker').val("");
//$('#timepicker').val("");
console.clear();
$('#datepicker').datetimepicker({
minDate: moment().add(300, 'm').startOf("day")
})
//.val(moment().add(300, 'm').format("DD-MM-YYYY")) // To set correct "valid" date from start
.on('dp.change', function(e){
var now = moment().format("X");
//console.log(e.date.format("X"));
//console.log(now);
// Comparing selected date (moment object) in milliseconds
if(e.date.format("X")+(300*60*1000) > now ){
console.log("above 5 hours, unlocking time.");
$('#timepicker').data("DateTimePicker").minDate(false);
}else{
console.log("below 5 hours, locking time (and probably resetting the value to min...)");
$('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
$('#timepicker').datetimepicker({
//minDate: moment().add(300, 'm'),
}).on('dp.change', function(e){ $('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));});
});

How to get the selected date from jquery datepicker

I am using jquery datepicker to show a calendar.Now as per my requirement i want to get the date selected by the user in my jquery variable which i will use in my application but i am not able to get the date ..
Here is the code for datepciker
<div id="datepicker"></div>
and here i am trying to get the selected code..
$(document).ready(function () {
$("#datepicker").datepicker({
onSelect: function (dateText, inst) {
var date = $(this).val();
alert(date);
}
});
});
But, I am not able to get the date ..Please help me ..Thanks..

This should do the trick
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
It's basic but here is a jsfiddle with it alerting the selected date when selected
update to change the date format
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
jsfiddle
3rd update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).val();
alert(selected);
}
});
});
I have used a little more of the native markup for datepicker ui here try this and see if you get the alert as you are after.
4th Update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).datepicker("getDate");
alert(selected);
}
});
});
The 4th method uses $(this).datepicker("getDate") instead of $(this).val() as $(this).datepicker("getDate") returns a date object and $(this).val() returns the date as a string.
Depending on your needs select which one is appropriate.
(Added 4th method and explanation of the difference after #TimothyC.Quinn commented that the getDate being the correct method)

Though, question is answered, for people who just want a date object or set a date with specific format. There is simple functions jQuery provides. Here's working jsfiddle
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
$("#datepicker").datepicker('setDate', '10-03-2020');
// pass string of your format or Date() object
$("#datepicker").datepicker('getDate');
// returns Date() object
$("#another_datepicker").datepicker('setDate', $("#datepicker").datepicker('getDate'));
// pass string of your format or Date() object

Try
$("#datepicker").datepicker({
onSelect:function(selectedDate)
{
alert(selectedDate);
}
});
OR
$("#datepicker").datepicker({
onSelect:function (dateText, inst)
{
alert(inst);
}
});

try this
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
})
you have two elements with the class .datepicker, the selector won't know which element to choose from. So, you'll have to specify the name of the input you're trying to get the date from
first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');

You can use the changeDate event outlined here instead of onSelect and then reference e.date or e.dates. See the JSON below.
HTML:
<div id='QA'></div>
<div id='datepicker'></div>
JS:
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
clearBtn: true,
todayHighlight: false,
multidate: true
}) .on('changeDate', function(e){
$('#QA').html(JSON.stringify(e));
});
});
/*
{
"type":"changeDate",
"date":"2015-08-08T07:00:00.000Z",
"dates":[
"2015-08-08T07:00:00.000Z"
],
"timeStamp":1438803681861,
"jQuery21409071635671425611":true,
"isTrigger":3,
"namespace":"",
"namespace_re":null,
"target":{
},
"delegateTarget":{
},
"currentTarget":{
},
"handleObj":{
"type":"changeDate",
"origType":"changeDate",
"guid":52,
"namespace":""
}
}
*/
</script>

The ideal way is to get the date and convert it to a common format and utilize the same. (may passing to server or so.)
$("#datepicker").datepicker('getDate').toISOString()
so it will get the date in ISO stander.

All code is for Bootstrap Datepicker
var calendar = $('#calendar').datepicker("getDate"); // Ex: Tue Jun 29 2021 00:00:00 GMT+0600 (Bangladesh Standard Time)
or
var calendar = $('#calendar').data('datepicker').getFormattedDate('yyyy-mm-dd'); // Ex: 2021-06-30
if(calendar){
alert(calendar);
} else {
alert('null');
}

If you need it in specific format like '2021/09/28':
$.datepicker.formatDate('yy/mm/dd',
$('.date-picker-2').datepicker("getDate")
);

Here is how to get Date object from datepicker in the onSelect event:
$("#datepickerid").datepicker({
onSelect: function (dateText, inst) {
var date_obj = $(this).datepicker('getDate');
}
});
I find it strange that the onSelect caller would not return the date object by default.

Bootstrap datepicker today's date selected when calendar open first time

I am using this datepicker .
My issue is when I click on textbox on which datepicker is attached, it opens the calendar with today's date selected.
What I want is when a calendar opens first time it should not have any date selected until a user select a date.
Example:(Today's Date is 08/06/2014)
As in the second picture the calendar opens with today's date selected.
Below is my code for assigning datepicker to textbox
$("input[id*=txt_DateFrom]").datepicker({
beforeShowDay: function(date) {
if (pnlValue == 'none') {
return date.valueOf() >= now.valueOf();
}
},
daysOfWeekDisabled: [0, 6],
autoclose: true,
todayHighlight: false,
todayBtn: true
});

use set date function to set null date. try this its simple.
$("input[id*=txt_DateFrom]").datepicker("setDate" , null);

I found the solution
$("input[id*=txt_DateFrom]").datepicker({
beforeShowDay: function(date) {
if (pnlValue == 'none') {
return date.valueOf() >= now.valueOf();
}
},
daysOfWeekDisabled: [0, 6],
autoclose: true,
todayHighlight: false,
todayBtn: true
}).datepicker("setDate",null);
I Hope it might help someone..

The problem in selecting current date when using minDate : moment().
Solution: try using like below:
$('#datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
clear : false
});