Compare 2 Date Picker Values During Registration

Question

I have extended the default registration form in ASP.NET MVC with 2 jquery-ui datepickers.

<div class="form-group">
                @Html.LabelFor(m => m.LicenseDateOfIssuance, "Date of Issue", new { @class = "col-md-3 control-label required-field" })
                <div class="col-md-9">
                    @Html.EditorFor(m => m.LicenseDateOfIssuance, new { htmlAttributes = new { @class = "form-control DateTimePicker", placeholder = "Date of Issuance", @readonly = "true" } })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.LicenseDateOfExpiry, "Date of Expiry", new { @class = "col-md-3 control-label required-field", placeholder = "eg 1 Jan 2015" })
                <div class="col-md-9">
                    @Html.EditorFor(m => m.LicenseDateOfExpiry, new { htmlAttributes = new { @class = "form-control DateTimePicker", placeholder = "Date of Expiry", @readonly = "true" } })
                </div>
            </div>

I would like to compare the dates held by both datepickers and ensure that the expiry div's date is later than the issuance div.

Any suggestions would be very much appreciated.

The concepts of what you want are in here: https://thewayofcode.wordpress.com/2012/01/18/custom-unobtrusive-jquery-validation-with-data-annotations-in-mvc-3/ — Tewr, Nov 10 '17 at 14:10
Are you using MVC validators? This can be set up for running both server and client side. — derloopkat, Nov 10 '17 at 14:16
Consider a [foolproof](http://foolproof.codeplex.com/) `[GreaterThan]` or similar conditional validation attribute so that you get client and server side validation. — , Nov 10 '17 at 20:59
Or if you want to write your own - [The Complete Guide To Validation In ASP.NET MVC 3 - Part 2](https://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2) — , Nov 10 '17 at 21:00

score 1 · Answer 1 · answered Nov 10 '17 at 15:23

1

Hi you can use foolproof mvc extensions: http://foolproof.codeplex.com

or you may also use MVC remote validation that is my personal favorite. Here is an example:

MVC 5 Remote Validation

answered Nov 10 '17 at 15:23

jLopez

26
4

derloopkat · Answer 2 · 2017-11-10T16:16:46.297

I prefer to use MVC validation but if you want only client side then try this script. It does format date as day/month/year.

$(document).ready(function() {
  var options = {
    dateFormat: "dd/mm/yy"
  };
  $("#LicenseDateOfIssuance").datepicker(options);
  $("#LicenseDateOfExpiry").datepicker(options);
  $("#validate").click(function() {
    var from = GetDate($("#LicenseDateOfIssuance").val());
    var to = GetDate($("#LicenseDateOfExpiry").val());
    if (from > to) {
      alert("Invalid Date Range");
    } else {
      alert('ok');
    };
  });
});

function GetDate(date) {
  var parts = date.split('/');
  return new Date(parts[2], parts[1], parts[0]);
};

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>License of issuance: <input type="text" id="LicenseDateOfIssuance"></p>
<p>License of expiry: <input type="text" id="LicenseDateOfExpiry"></p>
<button id="validate">Validate range</button>

Compare 2 Date Picker Values During Registration

2 Answers2