Jquery datepicker validation is not working (without the use of datepicker by editing the textbox)

Question

I am trying to validate datepicker as startDate should be always less than EndDate. If I change the date manually then StartDate works but EndDate does not work.

My JavaScript Code:

$(document).ready(function () {
       $("#StartDate").datepicker({
        numberOfMonths: 1,
        onSelect: function (selected) {
            $("#EndDate").datepicker("option", "minDate", selected)
        }
    });
      $("#EndDate").datepicker({
       numberOfMonths: 1,
        onSelect: function (selected) {
            $("#StartDate").datepicker("option", "maxDate", selected)
        }
    });

});

My .cshtml code

 <div class="col-sm-6">
    <div class="form-group">
        @Html.LabelFor(m => m.StartDate)
        @Html.TextBoxFor(m => m.StartDate, new { @class = "form-control", placeholder = "Enter start date" })
        @Html.ValidationMessageFor(m => m.StartDate, "", new { @class = "error" })
    </div>
</div>

<div class="col-sm-6">
    <div class="form-group">
        @Html.LabelFor(m => m.EndDate)
        @Html.TextBoxFor(m => m.EndDate, new { @class = "form-control", placeholder = "Enter finish date" })
        @Html.ValidationMessageFor(m => m.EndDate, "", new { @class = "error" })
    </div>
</div>

Anyone please help me. Thank you in advance!

I don't see any problem with your code. Can you add the entire view and your file reference?? — Jibin Balachandran
– Jibin Balachandran, Commented Jan 4, 2018 at 5:07
@JibinBalachandran,In normal circumstance, it is working perfectly fine. But the problem arises only when we change EndDate manually. First please change start date manually by writing any date like 01/16/2010 before current date and it is taking the advantage of calendar to show that particular date in StartDate field but the same calendar is not working for EndDate when we change from current date to any date greater than the date provided like 01/22/2016. Please guide me. — Raj
– Raj, Commented Jan 4, 2018 at 19:28
@Raj I didn't find any issue with your code.I have created a jsfiddle with the same. jsfiddle.net/Jibin/nh6eoj03/534 — Jibin Balachandran
– Jibin Balachandran, Commented Jan 5, 2018 at 4:57
@JibinBalachandran, Yes this fiddle is working as expected. But Please try to change EndDate manually, it is not taking an advantage of calendar. — Raj
– Raj, Commented Jan 5, 2018 at 19:27

Jibin Balachandran · Accepted Answer · 2018-01-09 03:36:11Z

1

If you want the dates to be changed manually(without the use of datepicker by editing the textbox), write an on change function and set the max value of datepickers accordingly.

Add the below functions to your js code.

$('#EndDate').on('change',function(){
    var selected=$('#EndDate').val();
    $("#StartDate").datepicker("option", "maxDate", selected)
});

 $('#StartDate').on('change',function(){
    var selected=$('#StartDate').val();
    $("#EndDate").datepicker("option", "minDate", selected)
});

DEMO

edited Jan 9, 2018 at 3:36

answered Jan 8, 2018 at 4:40

Jibin Balachandran

3,4491 gold badge27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raj Over a year ago

Thann you @Jibin. This is what I was looking for.

Saineshwar Bageri - MVP · Accepted Answer · 2018-01-04 04:24:07Z

1

Hi i have created a similar demo which works. Are you writing JavaScript code in head section of page i think , just write that same code end of your view will work.

Model

public class DemoModel
{
    [Display(Name = "StartDate")]
    [Required(ErrorMessage = "Please Choose StartDate")]
    public DateTime? StartDate { get; set; }

    [Display(Name = "EndDate")]
    [Required(ErrorMessage = "Please Choose EndDate")]
    public DateTime? EndDate { get; set; }
}

View

@model DemoMVC.Models.DemoModel
    @{ Layout = null;}
@{
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/datetimepicker/jquery-1.12.4.js"></script>
<script src="~/Scripts/datetimepicker/jqueryui.js"></script>
<link href="~/Scripts/datetimepicker/jqueryui.css" rel="stylesheet" />

<div class="col-sm-6">
    <div class="form-group">
        @Html.LabelFor(m => m.StartDate)
        @Html.TextBoxFor(m => m.StartDate, new { @class = "form-control", placeholder = "Enter start date" })
        @Html.ValidationMessageFor(m => m.StartDate, "", new { @class = "error" })
    </div>
</div>

<div class="col-sm-6">
    <div class="form-group">
        @Html.LabelFor(m => m.EndDate)
        @Html.TextBoxFor(m => m.EndDate, new { @class = "form-control", placeholder = "Enter finish date" })
        @Html.ValidationMessageFor(m => m.EndDate, "", new { @class = "error" })
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#StartDate").datepicker({
            numberOfMonths: 1,
            onSelect: function (selected) {
                $("#EndDate").datepicker("option", "minDate", selected)
            }
        });
        $("#EndDate").datepicker({
            numberOfMonths: 1,
            onSelect: function (selected) {
                $("#StartDate").datepicker("option", "maxDate", selected)
            }
        });

    });

</script>

Output

answered Jan 4, 2018 at 4:24

Saineshwar Bageri - MVP

4,0317 gold badges46 silver badges50 bronze badges

5 Comments

Raj Over a year ago

Enddate is still not working properly as expected. First please change start date manually by writting any date like 01/16/2010 before current date and it is taking the advantage of calendar to show that particular date in StartDate field but the same calendar is not working for EndDate when we change from current date to any date greater than the date provided like 01/22/2016. Please provide me proper guidance. In normal circumstance, it is working perfectly fine. But the problem arises only when we change EndDate manually.

Saineshwar Bageri - MVP Over a year ago

@raj on keypress or keydown event do not allow user to enter date manually. show alert please choose date. if it help you please mark this as answer.

Raj Over a year ago

Is there any way where I can create a dropdown calendar so that user can select month and year from it. I think this will be easy in spite of doing manual change in date.

Saineshwar Bageri - MVP Over a year ago

@raj it is not change in datepicker just a validation on textbox where you will not allow user to enter date just choose from datepicker.

Saineshwar Bageri - MVP Over a year ago

@raj it is not change in datepicker just a validation on textbox where you will not allow user to enter date just choose from datepicker.

Collectives™ on Stack Overflow

Jquery datepicker validation is not working (without the use of datepicker by editing the textbox)

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related