locked
How to validate date time texbox with date picker RRS feed

  • Question

  • User205603379 posted

    Hi All,

    I have a date field with date picker, I want to validate date user may not be entered the wrong format.

    and we need to write validation for all date pickers in the entire application in a single file.

    Note: Here date filed need to allow user able type manually or select with the date picker. 

    please reply as soon as possible.

    Thanks in advance.

    Tuesday, March 26, 2019 5:33 AM

All replies

  • User1520731567 posted

    Hi mamidi,

    According to your requirement,I suggest you could use jQuery Validation and it allow Datepicker fields to be validated before submission:

    I make a simple demo,you could refer to:

    @model WebApplication1.Models.YourModel
    
    <style>
        label {
            color:red;
        }
    </style>
    
    @using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { id = "loginForm" }))
    {
        <br/>
        @Html.EditorFor(m => m.Dateofbirth)
    
        <input type="submit" value="submit" />
    }
    
    @section scripts{
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://keith-wood.name/js/jquery.validate.js"></script>
        <script type="text/javascript" src="http://keith-wood.name/js/jquery.ui.datepicker.validation.js"></script>
    <script type="text/javascript"> $(document).ready(function () { $("#loginForm").validate({ rules: { Dateofbirth: { required: true, dpDate: true } } }); $("input[name='Dateofbirth']").datepicker({ dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true }); }); </script> }

    How it works in my project:

    More details about jQuery UI Datepicker Validation,you could refer to this link:

    http://keith-wood.name/uidatepickervalidation.html

    Best Regards.

    Yuki Tao

    Tuesday, March 26, 2019 8:34 AM
  • User-2054057000 posted

    When you have to fetch the date values selected in the date picker control then you simple use the .val() method.

    $("#dp").val()

    Now you can just use a simple validation methods to validate the date time values. 

    jQuery Datepicker 2 minutes Tutorial is the one which you will find very useful.

    Tuesday, March 26, 2019 9:24 AM
  • User205603379 posted

    Hi,

    My main issue with date picker like below

    When I click the textbox the date piker is shows, then click on escape the date picker closed and user able to enter manually.

    That time my validation is not working. when date picker is showing that time validation working

    Here I written code in angular js

    Thanks in advance

    Tuesday, March 26, 2019 1:28 PM
  • User1520731567 posted

    Hi mamidi,

    When I click the textbox the date piker is shows, then click on escape the date picker closed and user able to enter manually.

    What is escape ?

    Could you please post your code,so that I can reproduce your issue.

    Best Regards.

    Yuki Tao

    Wednesday, March 27, 2019 2:15 AM
  • User-2054057000 posted

    What is escape ?

    It is the ESC key of the keyboard.

    Wednesday, March 27, 2019 9:16 AM
  • User205603379 posted

    Yes, its Escape Key...

    Friday, March 29, 2019 4:35 AM
  • User205603379 posted

    Could you please post your code, so that I can reproduce your issue.

    Hi,

    It's not a small code it's linked with multiple sections and it's written in 3 js files.

    Friday, March 29, 2019 4:37 AM
  • User-1038772411 posted

    Try this one. maybe help you.

    $( "#datepicker" ).datepicker();
        $( "#datepicker" ).datepicker( "option", "dateFormat",'yy-mm-dd');

    or

    $('#myDateTextBox').blur(function () {
        var parsedDate = Globalize.parseDate($(this).val());
        if (parsedDate == null) {
            $(this).val('');
        } 
        else {
            $(this).val(Globalize.format(parsedDate, 'd'));
        }
    });
    Friday, March 29, 2019 5:33 AM