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>
Related
I'm trying to get it to hide the dates that do not match the datepickers selected date. So in order to do this i'm thinking to check the value of the first 10 characters because as you could see in the console:
Date 2018-01-20T05:00:00.000Z
2018-01-25 08:00:00 10:00:00
the date1 object and the select options text have the same structure for the first 10 characters
var dateToday = new Date();
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd",
showButtonPanel: true,
minDate: 1,
maxDate: 28,
onSelect: function(date){
var date1 = $('#datepicker').datepicker('getDate');
$("#pow > option").each(function() {
if (this.value != date1) {
console.log(date1)
console.log(this.text)
}
});
}
});
});
To check if two strings start with the same 10 characters, just use:
if (date1.substring(0,10) === date2.substring(0,10)) {
}
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.
i have two inputs #date and #date2 and i was in the edit page..so date
come from database . i want if someone click in #date2 input the popup
date picker window hide all dates before #date input.how to do this without use select event in the first input?
example : input date 08/04//2014
input date2 should be 08/04/2014
//// stat date
$("#date").datepicker({
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
onSelect: function(selectedDate) {
$("#date2").datepicker("option", "minDate", selectedDate);
}
});
/// end date
$("#date2").datepicker({
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
minDate: // first input date value will be here //
});
I think it can be helpful for you! Try this
$("#date2").datepicker({
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
minDate: $('#date').val(),
onSelect:function(date){
var start_date = new Date($('#date').val());
var end_date = new Date(date);
if(start_date > end_date ){
alert('date start should be less than date end');
$(this).val('');
//$('#date').val(''); // add if you want
}
}
});
I wrote a simple function to set min/max dates for datepicker and format selected date.
But when I set the range the format returns to default mm/dd/yy
Please note that the page in HTML5.
and here the code
$(function () {
var pickerFormat = {
dateFormat: "dd/mm/yy"
};
var range = {
minDate: "-2y",
maxDate: new Date()
};
$("#datepicker1").datepicker(range, pickerFormat);
});
Use the same object for both date format and picker range.
for example
$(function () {
var pickerFormatrange = {
dateFormat:"dd/mm/yy",
minDate: "-2y",
maxDate: new Date()
};
$("#datepicker1").datepicker(pickerFormatrange);
});
I am trying to check if a date is older than today's date & show an error if true. What is currently happening is if the month is less than today's month, the error is showing even if the year is set to 2014 or beyond. For example today is 4/18/2013 which doesn't have an error, but 4/17/2014 & 3/17/2014 get errors but 5/17/2013 does not. It seems the year is being ignored during the check. Hope that made a little sense...
$("#expDate").datepicker({
changeMonth: true,
changeYear: true,
minDate: 0,
onClose: function(selectedDate) {
var currDate = $.datepicker.formatDate('mm/dd/yy', new Date());
if (selectedDate < currDate) {
$("#warning").append("The number has expired");
} else {
$("#warning").html("");
}
}
});
You can do it directly with maxDate option
$("#datepicker").datepicker({ maxDate: new Date() });