validating date in the datepicker

Question

I have two datepickers:

$(".From").datepicker({
dateFormat: 'dd/mm/yy',
numberOfMonths: 1,
autoclose: true,
onClose: function(selectedDate) {
    $(".To").datepicker("option", "minDate", selectedDate);
}});


$(".To").datepicker({
dateFormat: 'dd/mm/yy',
numberOfMonths: 1,
autoclose: true,
onClose: function(selectedDate) {
    $(".From").datepicker("option", "maxDate", selectedDate);
}});

View:

 @Html.TextBoxFor(model => model.From, new { @class = "form-control From" })
 @Html.TextBoxFor(model => model.To, new { @class = "form-control To" })

Model:

    [Display(Name = "From")]
    public string From { get; set; }

    [Display(Name = "To")]
    public string To { get; set};

When the user manually enters the date, it fails.

Is there a way to allow users to enter the date and validate it?

option 1: Should I use regex?

Could you explain what you mean when you say "it fails"? What exactly happens and what do you expect to happen? Also, you don't appear to have any validation rules to validate against. — Jasen, Dec 01 '14 at 18:17
@Jasen It is not validating the date entered by the user. For ex: 11/13/2014 as 13th month does not exist. Expected output : "Please enter a valid date" - as a error message which must be added to validation rules. Should I use data annotation? — test acc, Dec 02 '14 at 17:41
Well, you would need to use _something_ and Data Annotations with ValidationMessageFor helper is a good built-in tool to validate input. You may possibly need to use the `DateTime` data type for this to work. What you have now will programmatically restrict options but does not explicitly validate input. Another option is to prevent direct keyboard entry so the only values available are via the datepicker widget -- which should be _valid_ dates. — Jasen, Dec 02 '14 at 18:00

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

Here's a working example

Model

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode=true)]
[DisplayName(Name = "From")]
public DateTime? From { get; set; }  // note the data type

View

@Html.TextBoxFor(model => model.From, new { @class = "form-control From" })
@Html.ValidationMessageFor(model => model.From)

Don't forget to load the validation scripts.

jquery.validate.js
jquery.validate.unobtrusive.js

This will give you a validation error message when you attempt to type a bad date.

edited May 23 '17 at 10:26

Community

1
1

answered Dec 02 '14 at 18:21

Jasen

14,030
3
51
68

It didn't work for me- that throws an error : The field must be a date. so I have used the datatype string. and when the user enters 11/13/2014 "To" field is set to 24/06/2020 – test acc Dec 03 '14 at 11:29
It didn't work for me. Throws an error for valid dates as: Field must be a date- which is not right. I tried this before and changed to datatype string – test acc Dec 03 '14 at 11:37
I guess we need to use something like this.. var validator = $( "#From" ).validate(); validator.showErrors({ "From": "Please enter a valid date " }); – test acc Dec 03 '14 at 12:14
It looks like you're having [date culture format](http://stackoverflow.com/questions/18548816/mvc-4-date-culture-issue) issues. If you use instead `dateFormat: 'mm/dd/yy'` this may work. However, it would be nice to specify a different format -- which the linked post explains in detail. – Jasen Dec 03 '14 at 19:15
Yes, It accepts the format mm/dd/yy. But we need the format dd/mm/yy. In order to overcome that error, it is changed to string. – test acc Dec 03 '14 at 21:13
can you send me the link of that post again please – test acc Dec 03 '14 at 21:21
It is a link in the comment. But here it is http://stackoverflow.com/questions/18548816/mvc-4-date-culture-issue – Jasen Dec 03 '14 at 21:25
I have already included the in web.config – test acc Dec 03 '14 at 21:30

validating date in the datepicker

1 Answers1