I have an MVC date field that I am trying to validate to mm/dd/yyyy format. I don't want the user to enter 1,2, or 3 digits for year. And, I want to make sure a valid date is entered. Here is the code that I am using:
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker();
ForceDatePickerFormat();
});
function ForceDatePickerFormat() {
$(".datepicker").on("blur", function (e) {
var date, day, month, newYear, value, year;
value = e.target.value;
if (value.search(/(.*)\/(.*)\/(.*)/) !== -1) {
date = e.target.value.split("/");
month = date[0];
day = date[1];
year = date[2];
if (year === "") {
year = "0";
}
if (year.length < 4) {
alert ("Date year must by 4 digits");
}
}
});
}
</script>
I used "blur" because "keyup" caused a weird issue with the year when a user tried to change it. "Blur" is good except the user has to click to have the calendar go away, tab doesn't work, and clicking the date doesn't work. If the user hits return, it accepts the date without validating. I need to allow the user to manually enter the date, because they often enter dates way in the future. Does anyone have any suggestions for how to tweak this so that clicking the date closes the calendar, tab closes the calendar, and the date is still validated?
Here's the snippet you need. All you need to pass date to below function which returns true/false if the given date is valid/invalid
function validateDate(dateValue)
{
var selectedDate = dateValue;
if(selectedDate == '')
return false;
var regExp = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //Declare Regex
var dateArray = selectedDate.match(regExp); // is format OK?
if (dateArray == null){
return false;
}
month = dateArray[1];
day= dateArray[3];
year = dateArray[5];
if (month < 1 || month > 12){
return false;
}else if (day < 1 || day> 31){
return false;
}else if ((month==4 || month==6 || month==9 || month==11) && day ==31){
return false;
}else if (month == 2){
var isLeapYear = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (day> 29 || (day ==29 && !isLeapYear)){
return false
}
}
return true;
}
The above function will:
Checks for proper date format as MM/DD/YYYY.
Checks whether the given date is valid or not. Ex: April month is having only 30 days. If we specify day as 31 for the month of April then this function will validate it as invalid date.
Checks for 29th day of February. It will validate as a valid date only if the specified year is a leap year.
For more info please go through the link: http://www.j2eekart.com/2015/01/date-validation-in-javascript.html
Change your code as:
<script type="text/javascript">
$(document).ready(function(){
$('.datepicker').datepicker();
$(".datepicker").on("blur", function (e){
var isValidDate = validateDate(e.target.value);
if(!isValidDate){
alert("Please enter a valid date in MM/DD/YYYY format");
}
});
});
function validateDate(dateValue)
{
var selectedDate = dateValue;
if(selectedDate == '')
return false;
var regExp = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //Declare Regex
var dateArray = selectedDate.match(regExp); // is format OK?
if (dateArray == null){
return false;
}
month = dateArray[1];
day= dateArray[3];
year = dateArray[5];
if (month < 1 || month > 12){
return false;
}else if (day < 1 || day> 31){
return false;
}else if ((month==4 || month==6 || month==9 || month==11) && day ==31){
return false;
}else if (month == 2){
var isLeapYear = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (day> 29 || (day ==29 && !isLeapYear)){
return false
}
}
return true;
}
</script>
Related
ive written a html form that allows a user to select their birthday from a drop down menu. Once the user submits the form those values are then stored into variables in a javascript function that will will first check that the user selected a value from each field(month, day year) and then verify the birthday is a valid date. If everything is correct then the next form is suppose to load. My problem is that once the function verifies that a month and day has been selected the program loads the next form without checking the year.
Here is the java script function:
function checkBday() {
var day = document.forms["register"]["DateOfBirth_Day"].value;
var month = document.forms["register"]["DateOfBirth_Month"].value;
var year = document.forms["register"]["DateOfBirth_Year"].value;
if(month == "- Month -") {
alert("Select a month");
return false;
}
if(day == "- Day -") {
alert("Select a day");
return false;
}
if(year == "- year -") {
alert("Select a year");
return false;
}
if((month == 2 && day > 28) || (month == 4 && day == 31) || (month == 6 && day == 31) || (month == 9 && day == 31) || (month == 11 && day == 31)) {
alert("Invalid birthday");
return false;
}
}
Here is the function call:
if(checkBday() == false) {
return false; }
else {
alert("Registration was successful!");
return true; }
- Day- - Month - and - Year- are default values if nothing is selected from the drop down menu. Thanks for the help im a noob at this.
I would refactor your code to look something like this:
function checkBday() {
var day = document.forms["register"]["DateOfBirth_Day"].value;
var month = document.forms["register"]["DateOfBirth_Month"].value;
var year = document.forms["register"]["DateOfBirth_Year"].value;
var default_month = "- Month -";
var default_day = "- Day -";
var default_year = "- Year -"
// Validate presence of all fields.
if (month == default_month) {
alert("Select a month");
return false;
} else if (day == default_day) {
alert("Select a day");
return false;
} else if (year == default_year) {
alert("Select a year");
return false;
}
// Validate date.
if((month == 2 && day > 28) || (month == 4 && day == 31) || (month == 6 && day == 31) || (month == 9 && day == 31) || (month == 11 && day == 31)) {
alert("Invalid birthday");
return false;
} else {
return true;
}
}
Also, I believe there might have been a typo in your code. You are comparing the year to "- year -". Where the year is not capitalized("- Year -"). Maybe this was the problem in addition to the function not returning anything.
It is coming back as undefined because you dont give a return value if the condition falls all the way through the nested values.
Take your "else" statement and put it before the closing bracket in the actual function, like this:
function checkBday() {
var day = document.forms["register"]["DateOfBirth_Day"].value;
var month = document.forms["register"]["DateOfBirth_Month"].value;
var year = document.forms["register"]["DateOfBirth_Year"].value;
if(month == "- Month -") {
alert("Select a month");
return false; }
if(day == "- Day -") {
alert("Select a day");
return false; }
if(year == "- year -") {
alert("Select a year");
return false; }
if((month == 2 && day > 28) || (month == 4 && day == 31) || (month == 6 && day == 31) || (month == 9 && day == 31) || (month == 11 && day == 31)) {
alert("Invalid birthday");
return false;
}
alert("Registration was successful!");
return true;
}
create a new variable called registration_successful.
If variable is true after running checkBday, proceed with next form.
function checkBday() {
var registration_succesfull = false;
var day = document.forms["register"]["DateOfBirth_Day"].value;
var month = document.forms["register"]["DateOfBirth_Month"].value;
var year = document.forms["register"]["DateOfBirth_Year"].value;
if(month == "- Month -") {
alert("Select a month");
registration_succesfull = false; }
else if (day == "- Day -") {
alert("Select a day");
registration_succesfull = false; }
else if (year == "- year -") {
alert("Select a year");
registration_succesfull = false; }
else if((month == 2 && day > 28) || (month == 4 && day == 31) || (month == 6 && day == 31) || (month == 9 && day == 31) || (month == 11 && day == 31)) {
alert("Invalid birthday");
registration_succesfull = false; }
else {registration_succesfull = true; }
return registration_succesfull;
}
note: february can have 29 days as well
I have an jsp page where the user selects two dates. I need to validate this date to ensure that the 1st date is not less than today's date. This is the script I am using:
var todaysDate = new Date();
if(document.frm.rentedOnDate.value < todaysDate )
{
alert("Rented date should not be before today");
document.frm.bank.focus();
return false;
}
if(document.frm.rentedOnDate.value> document.frm.returnDate.value )
{
alert("Return date should be after rented date");
document.frm.bank.focus();
return false;
}
These are the date selection fields:
<p>Select Rental Date: <input type="date" name="rentedOnDate"> </p>
<p>Select Return Date: <input type="date" name="returnDate"> </p>
The second script function works when the user enters a return date which is before the rented date but the first function does not work. Any ideas why?
Your second test is comparing strings, so I wouldn't count on it being perfectly reliable (a preceding zero could break it for instance).
You need to convert the strings (the .value fields) to proper date objects, and then compare them. This will resolve your first check, and improve your second check.
This function will parse a date provided in the "yyyy-mm-dd" fashion (optional 2-digit year yields 20xx). null is returned for an invalid date.
function getDate(str)
{
var dateParts = /^(\d\d(?:\d\d)?)-(\d\d?)-(\d\d?)$/.exec(str);
if (dateParts === null)
{
return null;
}
var year = parseInt(dateParts[1]);
if (year < 100)
{
year += 2000;
}
var month = parseInt(dateParts[2]) - 1;
var day = parseInt(dateParts[3]);
var result = new Date(year, month, day);
return year === result.getFullYear()
&& month === result.getMonth()
&& day === result.getDate() ? result : null;
}
function validateDate(dates){
re = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
var days=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if(regs = dates.match(re)) {
// day value between 1 and 31
if(regs[1] < 1 || regs[1] > 31) {
return false;
}
// month value between 1 and 12
if(regs[2] < 1 || regs[2] > 12) {
return false;
}
var maxday=days[regs[2]-1];
if(regs[2]==2){
if(regs[3]%4==0){
maxday=maxday+1;
}
}
if(regs[1]>maxday){
return false;
}
return true;
} else {
return false;
}
}
I saw this fiddle for validating mm/dd/yyyy or mm-dd-yyyy but I would like to validate yyyy-mm-dd hh:mm:ss format also how do I ensure that today is lesser than from date with the yyyy-mm-dd hh:mm:ss format?.
this is how I have initiated my date time picker..
$("#startDate, #endDate").datetimepicker({ dateFormat: 'yyyy-mm-dd hh:mm:ss'});
Please do help me to get this done.
Thanks
The date format that you have specified is ISO 8601. Most modern browsers support Date parsing of this string format. So you can do something like this.
Javascript
var iso8601 = "2013-02-01 10:00:00",
userDate = new Date(iso8601),
today = new Date(),
dateTime,
date,
time,
value;
// check is valid date
if (isNaN(userDate)) {
alert("invalid userDate");
}
// check if userDate is before today
if (userDate.getDate() < today.getDate()) {
alert("userDate is in past");
}
// check the string specifically matches "yyyy-mm-dd hh:mm:ss" and is valid
function isGregorianLeapYear(year) {
return year % 400 === 0 || year % 100 !== 0 && year % 4 === 0;
}
function daysInGregorianMonth(year, month) {
var days;
if (month == 2) {
days = 28;
if (isGregorianLeapYear(year)) {
days += 1;
}
} else {
days = 31 - ((month - 1) % 7 % 2);
}
return days;
}
if (typeof iso8601 !== "string") {
alert("not an iso8601 string");
} else {
dateTime = iso8601.split(" ");
if (dateTime.length !== 2) {
alert("missing date or time element");
} else {
date = dateTime[0].split("-");
if (date.length !== 3) {
alert("incorrect number of date elements");
} else {
value = +date[0];
if (date[0].length !== 4 || value < -9999 || value > 9999) {
alert("year value is incorrect");
}
value = +date[1];
if (date[1].length !== 2 || value < 1 || value > 12) {
alert("month value is incorrect");
}
value = +date[2];
if (date[2].length !== 2 || value < 1 || value > daysInGregorianMonth(+date[0], +date[1])) {
alert("day value is incorrect");
}
}
time = dateTime[1].split(":");
if (time.length !== 3) {
alert("incorrect number of time elements");
} else {
value = +time[0];
if (time[0].length !== 2 || value < 0 || value > 23) {
alert("hour value is incorrect");
}
value = +time[1];
if (time[1].length !== 2 || value < 0 || value > 59) {
alert("minute value is incorrect");
}
value = +time[2];
if (time[2].length !== 2 || value < 0 || value > 59) {
alert("second value is incorrect");
}
}
}
}
console.log(userDate);
console.log(today);
jsFiddle
Checking yyyy-mm-dd hh:mm:ss strings against each other is pretty easy because they're already in order; you can forget about what base the numbers are in and simply do < or > as in string comparison. This may not work with other dates.
function compISOZDate(d1, d2) { // d1 is
if (d1 < d2) return -1; // smaller
if (d1 === d2) return 0; // the same
/* else */ return 1; // bigger
}
Validating dates is a bit more complicated, because the number of days in months can change. You can ignore this fact and just test for digits, but I prefer meeting half way, introducing upper limits.
function verifyMyDate(d) {
var re = /^\d{4}-(0[1-9]|1[0-2])-([0-2]\d|3[01]) (0\d|1[01]):[0-5]\d:[0-5]\d$/;
// yyyy - MM - dd hh : mm : ss
return re.test(d);
}
So for example using it
var d1 = '2013-10-07 11:58:26',
d2 = '2012-06-14 19:22:03';
// check
if (!verifyMyDate(d1)) throw new Error('Invalid date: ' + d1);
if (!verifyMyDate(d2)) throw new Error('Invalid date: ' + d2);
// compare
compISOZDate(d1, d2); // 1, d1 is bigger than d2
// also
compISOZDate(d2, d1); // -1
compISOZDate(d1, d1); // 0
Now all that is left is to get the value from your inputs.
Change your RegExp inside the ValidateDate function to below code
function ValidateDate(dtValue)
{
var dtRegex = new RegExp(/\b\d{4}[\/-]\d{1,2}[\/-]\b\d{1,2} (0\d|1[01]):[0-5]\d:[0-5]\d$\b/);
return dtRegex.test(dtValue);
}
try this and let me know, same way u can validate the hh:mm:ss also
For 24 hour variation, instead of AM/PM, use:
regex = new RegExp(^\d{4}-(0[1-9]|1[0-2])-([0-2]\d|3[01]) (0\d|1\d|2[0-3]):[0-5]\d:[0-5]\d$);
This is mine I wrote and works fine :
function validateDate(dtValue) {
// Format expected dd/mm/aaaa or dd-mm-aaaa (French Date)
// Accept also d/m/aaaa or d-m-aaaa (ok for MySQL Database to have one number only for days and months)
// Before the insert into database I will convert to aaaa-mm-jj or aaaa-m-j
var dtRegex = new RegExp(/\b(0?[1-9]|([1-2]?[0-9]|3[0-1]))[\/-]([0]?[1-9]|1[0-2])[\/-]\b\d{4} ([0-1]?[0-9]|2[0-3]):[0-5]\d$\b/);
// Accept range => (01 to 31) (/ or -) (01 to 12) (/ or -) (4 numbers) space (00 to 23) : (00 to 59)
var bValidateDate= dtRegex.test(dtValue);
// Test if bValidateDate true, test and throw out (accepted from regex expression) :
// 30/02, 31/02, 31/04, 31/06, 31/09, 31/11
// 30-02, 31-02, 31-04, 31-06, 31-09, 31-11
// Get the 5 first characters
var sFebruary29= dtValue.substring(0, 5);
if (bValidateDate)
{
var aOfDateErrors= ["30/02", "31/02", "31/04", "31/06", "31/09", "31/11", "30-02", "31-02", "31-04", "31-06", "31-09", "31-11"];
if (aOfDateErrors.indexOf(sFebruary29) > -1)
{
bValidateDate= false;
}
}
// Then, if bValidateDate is still true (good format)
// check if the date is a leap year to accept 29/02 or 29-02
// And finally, my customer asked me to have a year between 2017 and now
if (bValidateDate)
{
// Get the year
var sYear= dtValue.substring(6, 10);
// Customer's constraints
var bYearCustomerOK= ((parseInt(sYear) >= 2017) && (parseInt(sYear) <= new Date().getFullYear()));
// I promise, this is the "last test'em all !"
var bFinalDate= (bYearCustomerOK) && (sYear % 400 === 0 || sYear % 100 !== 0 && sYear % 4 === 0) && ((sFebruary29 == "29/02") ||(sFebruary29 == "29-02"));
if (! bFinalDate)
{
bValidateDate= false;
}
}
return bValidateDate;
}
Please, let me know if you find a bad date :)
Possible Duplicate:
Detecting an “invalid date” Date instance in JavaScript
I was using the following to detect a valid date:
var text = $('#Date').val();
var date = Date.parse(text);
if (isNaN(date)) {
// Invalid date
}
But found that Date.parse thinks the following are valid dates (mm/dd/yyyy)
2/30/2011
11/31/2011
Any other way to detect invalid dates when the number of days surpasses the total number of
days in the month?
UPDATE: An even larger problem is that the jQuery validation plugin doesn't detect this as an invalid date either!
SOLUTION:
Based on #Guffa's comments I have created the following function to validate dates:
function validDate(text) {
var date = Date.parse(text);
if (isNaN(date)) {
return false;
}
var comp = text.split('/');
if (comp.length !== 3) {
return false;
}
var m = parseInt(comp[0], 10);
var d = parseInt(comp[1], 10);
var y = parseInt(comp[2], 10);
var date = new Date(y, m - 1, d);
return (date.getFullYear() == y && date.getMonth() + 1 == m && date.getDate() == d);
}
To check if a date is valid you can parse the components of the date, create a Date object from it, and check if the components in the data is the same as the parsed components. If you create a Date object from compnents that are out of range, the values will flow over to the next/previous period to create a valid date.
For example, new Date(2011,0,42) will create an object that contains the date 2/11/2011 instead of 1/42/2011.
By parsing the components instead of the full date you will also get around the problem with different date formats. My browser will for example expect a date format like y-m-d rather than d/m/y.
Example:
var text = '2/30/2011';
var comp = text.split('/');
var m = parseInt(comp[0], 10);
var d = parseInt(comp[1], 10);
var y = parseInt(comp[2], 10);
var date = new Date(y,m-1,d);
if (date.getFullYear() == y && date.getMonth() + 1 == m && date.getDate() == d) {
alert('Valid date');
} else {
alert('Invalid date');
}
Demo: http://jsfiddle.net/Guffa/UeQAK/
If your date format is fixed as M/D/YYYY, you could re-format the parsed date and see if it matches the input:
var d = new Date(Date.parse(str))
return str === (d.getMonth()+1)+'/'+d.getDate()+'/'+d.getYear();
However, that won't tolerate whitespace or zero-padded numbers.
If you don't need to keep the user's input exactly, you could just reformat the date anyway and pretend that was what they typed.
But if you can't do that either, I'd parse out the components myself using a RegExp and then compare them to values from the Date methods.
You could write a script to do this manually:
function checkDate(day, month) {
if ((month == 4 || month == 6 || month == 9 || month == 11) && day < 30) {
alert("Date is valid")
}
else if (month == 2 && day <= 28) {
alert("Date is valid")
}
else if ((month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) && day <= 31) {
alert("Date is valid")
}
else {
alert("Date is in-valid")
}
}
Of course, you would also need something to look out for leap years, but just remember that any year divisible by 4 and not by 100 is a leap year unless the first two digits of the year are divisible by 4. That should be easy to include in this function.
The example is wrong
the correct is
if ((month == 4 || month == 6 || month == 9 || month == 11) && day <= 30)
<= instead of =
But the example are great!
A simple, intrinsic way to achieve this can be:
let dateObj = document.getElementById('Date');
if (dateObj.validity.badInput) {
// show error message
}
Now some date formatting can be done, but HTML date-picker event has properties like badInput and valid to check invalid dates.
Is there a fast way to validate that a date/time in this format is valid?
I would prefer not to breaking it down with substrings and rebuilding it if possible
"YYYY-MM-DD HH:MM:SS"
You could parse the date string as an ISO string (by converting the space to a "T" and appending the Zulu timezone, e.g. "2011-08-16T12:34:56Z") then compare the resulting date's ISO string to the original ISO string.
function isValidDateString(s) {
try {
var isoStr = (""+s).replace(/ /,'T') + "Z"
, newStr = new Date(isoStr).toISOString();
return isoStr.slice(0,19) == newStr.slice(0,19);
} catch (e) {
return false;
}
}
This way, if the date string has invalid format, then the string "Invalid Date" will not equal the original and if it were to roll (e.g. if the day was invalid for the month) then the string value of the parsed date will not equal the original string.
[Edit]
Note the changes to the example code required by the timezone fix.
Try a regular expression like this.
Edit: Here is the string you'll want to match against:
^([1-3][0-9]{3,3})-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2][1-9]|3[0-1])\s([0-1][0-9]|2[0-4]):([0-5][0-9]):([0-5][0-9])$
You can use this regex.
/^([0-9]{4})-([0-1][0-9])-([0-3][0-9])\s([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/.test("2007-08-04 18:01:01"); //true
/^([0-9]{4})-([0-1][0-9])-([0-3][0-9])\s([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/.test("2007-08-04 18:01:0"); //false
The following code below will check to see if the date input is actually a valid date.
At first glance it looks big, but it's mostly the comments.
It requires no substrings and no regular expression.
The way JavaScript works is that, if you break down a Date object with an invalid date (04/32/2010) to it's total milliseconds and then create another Date object with those milliseconds, it will not create a Date object that displays the incorrect date (04/32/2010) it will compensate and create the proper Date (05/01/2010).
So simply, if the input is different than the new Date object, then the date is not valid.
http://jsfiddle.net/dceast/vmHjN/ - Here is an example of it on JSFiddle.
var compareDate, checkDates = false;
var validateObject = {
init: function(year, month, day) {
return this.compareDate.init(year, month, day);
},
compareDate: {
init: function(year, month, day) {
var isValid = false;
// Compensate for zero based index, if month was not
// subtracted from one 0 === Jan, 1 === Feb, 2 === Mar
month -= 1;
// Create a new date object with the selected
// year, month, and day values and retrieve the
// milliseconds from it.
var mSeconds = (new Date(year, month, day)).getTime();
var objDate = new Date();
// Set the time of the object to the milliseconds
// retrieved from the original date. This will
// convert it to a valid date.
objDate.setTime(mSeconds);
// Compare if the date has changed, if it has then
// the date is not valid
if (objDate.getFullYear() === year &&
objDate.getMonth() === month &&
objDate.getDate() === day)
{
isValid = true;
}
return isValid;
}
}
};
I did so and it worked
<html>
<head>
<title>valida data</title>
<script>
function valData(data){//dd/mm/aaaa
day = data.substring(0,2);
month = data.substring(3,5);
year = data.substring(6,10);
if( (month==01) || (month==03) || (month==05) || (month==07) || (month==08) || (month==10) || (month==12) ) {//months 31 days
if( (day < 01) || (day > 31) ){
alert('invalid date');
}
} else
if( (month==04) || (month==06) || (month==09) || (month==11) ){//months 30 days
if( (day < 01) || (day > 30) ){
alert('invalid date');
}
} else
if( (month==02) ){//February and leap year
if( (year % 4 == 0) && ( (year % 100 != 0) || (year % 400 == 0) ) ){
if( (day < 01) || (day > 29) ){
alert('invalid date');
}
} else {
if( (day < 01) || (day > 28) ){
alert('invalid date');
}
}
}
}
</script>
</head>
<body>
<form>
<input type="text" name="data" id="data" onBlur="return valData(this.value)" />
</form>
</body>
</html>