Friday, May 9, 2014

Disabling Dates in Date Picker Control Based on other Date Picker in MVC

<script type="text/javascript">
    $(document).ready(function () {
        var val = $('#Sdate').val();
        var d = new Date();
        var dat1 = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();

        $(function () {
            $('#Sdate').datepicker({
                maxDate: new Date(Date.parse(dat1)),
                onSelect: function (dateText, inst) {
                    var Days = 1296000000; // 15 days in micro seconds
                    var dat = (d.getMonth() + 1) + "/" + d.getDate() + "/"+ d.getFullYear();
                 var presentdate=  new Date(Date.parse(dat));
                 var exdate = new Date(Date.parse(dateText) + 1296000000);
             
                    if (exdate > presentdate)
                    {
                        $('#Edate').datepicker("option", "minDate", new Date(Date.parse(dateText)));
                        $('#Edate').datepicker("option", "maxDate", new Date(Date.parse(dat)));
                        $('#Edate').datepicker("setDate", dateText);
                        $("#Edate").datepicker().datepicker('enable');
                    }

                    if (exdate < presentdate) {
                            $('#Edate').datepicker("option", "minDate", new Date(Date.parse(dateText)));
                            $('#Edate').datepicker("option", "maxDate", new Date(Date.parse(dateText) + Days));
                            $('#Edate').datepicker("setDate", dateText);
                            $("#Edate").datepicker().datepicker('enable');
                    }
               
                }
            });
            $("#Edate").datepicker({
                minDate: new Date(Date.parse(val)),
                maxDate: new Date(Date.parse(val) + 1296000000),
                setDate: new Date(Date.parse(val))
            });

            GetData();
        });
    });
 
</script>

<table>
 <tr>
                <td class="div-left">From Date<span style="color:red">*</span>
                </td>
                <td class="div-right">
                    @Html.TextBoxFor(m => m.SDate, new { @class = "membertextbox", @id = "Sdate", @Value = Model.SDate.ToString("MM/dd/yyyy"),@readonly="readonly"})
                </td>
            </tr>
            <tr>
                <td class="div-left">To Date<span style="color:red">*</span>
                </td>
                <td class="div-right">
                    @Html.TextBoxFor(m => m.EDate, new { @class = "membertextbox", @id = "Edate",@Value = Model.EDate.ToString("MM/dd/yyyy"),@readonly="readonly"})
                    <span style="color:red">(Select dates should be with in 15days)</span>
                </td>
            </tr>
</table>

No comments:

Post a Comment