To date can not be less than From date in ASP.Net MVC

nabilabolo
 
on Jul 18, 2021 11:24 PM
Sample_388850.zip
575 Views

Hi,

I have two datetimepicker which is fromdate and todate.

I manage to insert both in my database and my issue now is when i need to edit the todate only while fromdate remain the same. and the todate cannot be less that from date

My UI looks like this

https://pasteboard.co/KbQuUx4.png

 

 

 

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <table>
        <tr class="spaceUnder">
            <td style="width: 200px">
                @Html.Label("*", new { style = "color:red" })
                @Html.Label("Pattern")
            </td>
            <td> : </td>
            <td>
                <div class="col-md-5" style="width:40%">
                    @Html.DisplayFor(m => m.PATTERN, Model.PATTERN, new { @class = "form-control", @readonly = "readonly" })
                    @Html.HiddenFor(m => m.PATTERN)
                </div>
            </td>
        </tr>
        <tr class="spaceUnder">
            <td>
                @Html.Label("*", new { style = "color:red" })
                @Html.Label("Valid From")
            </td>
            <td> : </td>
            <td>
                <div class="col-md-5" style="width:40%" id="datetimepicker6">
                    @Html.DisplayFor(m => m.VALIDFROM, @Convert.ToDateTime(Model.VALIDFROM).ToString("dd/MM/yyyy"), new { @class = "form-control", @readonly = "readonly" })
                    @Html.HiddenFor(m => m.VALIDFROM)
                </div>
            </td>
        </tr>
        <tr class="spaceUnder">
            <td>
                @Html.Label("*", new { style = "color:red" })
                @Html.Label("Valid To")
            </td>
            <td> : </td>
            <td>
                <div class="col-md-5 input-group date" style="width:40%" id='datetimepicker7'>
                    @Html.TextBoxFor(a => a.VALIDTO, null, new { @class = "form-control" })
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    @Html.ValidationMessageFor(a => a.VALIDTO, "", new { @class = "red", @style = "color:red" })
                </div>
            </td>
        </tr>
    </table>
    <div class="col-md-12">
        <input id="Submit" type="submit" name="ActionType" value="Save" class="btn btn-primary" onclick="return confirm('Are you sure want to add data?');" /> @*add onclick function*@
        <input id="Reset" type="reset" name="ActionType" value="Reset" class="btn btn-primary" />
        @Html.BackButton(url)

    </div>
}

 

<script type="text/javascript">
    $(function () {
        var min = $("#datetimepicker6");
        var dateFormat = 'DD-MM-YYYY';

        $("#datetimepicker7").datetimepicker({
            minDate: '0',
            dateFormat: dateFormat,
            onSelect: function (selectedDate) {
                var date = $.datepicker.parseDate(dateFormat, selectedDate)
                var tod = min;
                $from.prop('disabled', false).datepicker("option", "maxDate", new Date(tod));
            }
        });

        var $from = $("#datetimepicker6").datetimepicker({
            dateFormat: dateFormat
        }).prop('disabled', true);
       
    });
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 18, 2021 11:24 PM

I will get back to you soon.

dharmendr
 
on Jul 19, 2021 05:55 AM

Which version of datetimepicker you are using?

Please share the js.

dharmendr
 
on Jul 21, 2021 12:25 AM

Hi nabilabolo,

Refer below sample code.

Model

public class CustomerModel
{
    public string PATTERN { get; set; }
    public string VALIDFROM { get; set; }
    public string VALIDTO   { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        CustomerModel model = new CustomerModel();
        model.PATTERN = "test";
        model.VALIDFROM = DateTime.Today.AddDays(-15).ToString("MM/dd/yyyy");
        return View(model);
    }
}

View

@model From_To_DateTimePicker_MVC.Models.CustomerModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var dateFormat = 'DD-MM-YYYY';
            var $from = $("#datetimepicker6").datetimepicker({
                format: dateFormat
            }).prop('disabled', true);
            $("#datetimepicker7").datetimepicker({
                format: dateFormat,
                minDate: new Date($from.prop('disabled', false).datetimepicker().text().trim())
            });
        });
    </script>
</head>
<body class="container">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <table>
            <tr class="spaceUnder">
                <td style="width: 200px">
                    @Html.Label("*", new { style = "color:red" })
                    @Html.Label("Pattern")
                </td>
                <td> : </td>
                <td>
                    <div class="col-md-5" style="width:100%">
                        @Html.DisplayFor(m => m.PATTERN, Model.PATTERN, new { @class = "form-control", @readonly = "readonly" })
                        @Html.HiddenFor(m => m.PATTERN)
                    </div>
                </td>
            </tr>
            <tr class="spaceUnder">
                <td>
                    @Html.Label("*", new { style = "color:red" })
                    @Html.Label("Valid From")
                </td>
                <td> : </td>
                <td>
                    <div class="col-md-5" style="width:100%" id="datetimepicker6">
                        @Html.DisplayFor(m => m.VALIDFROM, @Convert.ToDateTime(Model.VALIDFROM).ToString("dd/MM/yyyy"), new { @class = "form-control", @readonly = "readonly" })
                        @Html.HiddenFor(m => m.VALIDFROM)
                    </div>
                </td>
            </tr>
            <tr class="spaceUnder">
                <td>
                    @Html.Label("*", new { style = "color:red" })
                    @Html.Label("Valid To")
                </td>
                <td> : </td>
                <td>
                    <div class="col-md-5 input-group date" style="width:100%" id='datetimepicker7'>
                        @Html.TextBoxFor(a => a.VALIDTO, null, new { @class = "form-control" })
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        @Html.ValidationMessageFor(a => a.VALIDTO, "", new { @class = "red", @style = "color:red" })
                    </div>
                </td>
            </tr>
        </table>
        <div class="col-md-12">
            <input id="Submit" type="submit" name="ActionType" value="Save" class="btn btn-primary" onclick="return confirm('Are you sure want to add data?');" /> @*add onclick function*@
            <input id="Reset" type="reset" name="ActionType" value="Reset" class="btn btn-primary" />
        </div>
    }
</body>
</html>

Screenshot