ASP.NET MVC3: Validating Date Times and Custom Validation messages

Question

How would I prevent users typing into a datetimepicker (text field), but allow them to use the datetimepicker.
How can I validate that one date is AFTER another, and display it inline (and prevent submitted) exactly like ASP.Net MVC3 does. The javascript isnt so much the problem of checking its after the other, its how I go about displaying this inline message and prevent submitting, Tieing it in with the other validation.

so far I have

            $("#Save").click(function (e) {
                if (  $('#EndTime').val() < $('#StartTime').val() )
                    alert("AHRR"); // Should add an inline message and NOT submit.
            });

I'm also interested in learning this specific MVC 3 validation things... check this one: http://forums.asp.net/t/1698991.aspx/1 hope it helps as a start. — Davide Piras, Dec 01 '11 at 15:34
Did I misread your question? Are you looking to use the MVC 3 validation to validate a date, or write custom JS? — petebowden, Dec 01 '11 at 15:38
Which ever. I just want it to work seemlessly in the same manner — IAmGroot, Dec 01 '11 at 15:43

score 2 · Answer 1 · edited May 23 '17 at 12:11

As far as preventing typing into the datetimepicker fields, use jQuery to hook into the keyup event, and clear any text from the field. Assuming you are using jquery 1.6 or earlier, the code would look like the following:

$("input[id$='Time']").live("keyup", function() {
    $(this).val("");
});

In addition, you might consider adding a placeholder attribute directing the user not to type in the date.

As far as a compare date validator, you will find a good example in this question: MVC3 custom validation: compare two dates

score 1 · Accepted Answer · answered Dec 01 '11 at 18:25

I would suggest using jQuery's datepicker to do date-range constraining on the client side. You would need to disable the input elements <input readonly/>. I've implemented a date range constraint recently that works for me. It constrains an end-date to be within 90 days of the start-date

FYI, I stopped using startElement and endElement as a test, never went back as this code isn't currently reused.

// ============================================================================
// FUNCTION: InitializeDates(startElement, endElement)
// PARAMETERS
// ----------
// startElement:    The element which will be initialized as the start-date 
//                  datepicker.
//
// endElement:      The element which will be initialized as the start-date 
//                  datepicker.
//
// DESCRIPTION
// -----------
// InitializeDates updates the start and end dates for non-employees.  It 
// creates a date-picker object on both fields and then constrains the end 
// end date:
// * No date selections available prior to the start date
// * No date selections available after 90 days beyond the start date.
// ----------------------------------------------------------------------------
function InitializeDates(startElement, endElement)
{
    $("#f-start-date").datepicker({
        showOn: "button",
        buttonImage: "images/calendar.png",
        buttonImageOnly: true,
        onSelect: function(dateText, inst) { StartDateSelected(dateText, inst) }
    });

    $("#f-end-date").datepicker({
        showOn: "button",
        buttonImage: "images/calendar.png",
        buttonImageOnly: true,
        numberOfMonths: 3
    });

    $("#f-start-date").val('');
    $("#f-end-date").val('');
}

// ============================================================================
// FUNCTION: StartDateSelected(dateText, endElement)
// PARAMETERS
// ----------
// dateText:    The dateText passed from jQuery.datepicker.onSelect
// inst:        The instpassed from jQuery.datepicker.onSelect//
//
// DESCRIPTION
// -----------
// Updates the end-date maxDate and minDate fields to 91 dates from the selected
// start date.
// ---------------------------------------------------------------------------
function StartDateSelected(dateText, inst)
{
    var second = 1000;
    var minute =second * 60;
    var hour = minute * 60;
    var day = hour * 24;

    // The datepicker updates maxDate and minDate based on today's date.  I've
    // got to math out dates so that the maxDate is actually 91 days from the
    // selected date.  
    var todaysDate = new Date();
    var selectedDate = new Date(dateText);          
    var duration = Math.floor((selectedDate - todaysDate) / day) + 91;

    $("#f-end-date").datepicker("option", "minDate", selectedDate);
    $("#f-end-date").datepicker("option", "maxDate", duration);
    $("#f-end-date").val('');
}

+1 for a good concept. And the readonly attribute. Much better than the disable attribute. CHeers — IAmGroot, Dec 02 '11 at 10:07

petebowden · Answer 3 · 2011-12-01T15:42:39.297

0

Disable the input box: <input type="text" disabled="disabled"/> Then use the datepicker to insert the value into the text box.
You could disable the submit button on your form until the date validation is correct. You could write custom javascript for this, but it would only validate on the client side. You could also write a custom validator in MVC 3 that validates the date.

Please see JQuery Validation for more information. MVC 3 uses the JQuery libraries to perform validation and you can override these methods to implement your date validation.

edited Dec 01 '11 at 15:42

answered Dec 01 '11 at 15:18

petebowden

900
2
8
21

Has the same effect as `disabled= true` - Which prevents me clicking on it and hence, activated the datetimepicker. (I could add the icon to open datetimepicker next to it, but id rather not.) – IAmGroot Dec 01 '11 at 15:45

ASP.NET MVC3: Validating Date Times and Custom Validation messages

3 Answers3