CODEWITHSUNDEEP
javascriptasp.net-mvc-5eonasdan-datetimepicker
Grizzly
Grizzly

Reputation: 5943

Disable Specific Date and all Dates before it

I am using the datetimepicker and I want to disable a specific date from the controller and all dates before it.

So how do I pass the date from the controller to the datetimepicker?

Here is what I mean:

MRecord firstMR = db.MRecords.Where(x => x.AID == dSum.AircraftID).OrderBy(x => x.DateEntered).FirstOrDefault();

<script type="text/javascript">
    $(function () {
        $('#datetimepicker5').datetimepicker({
            disabledDates: [
                // how do I disable all dates before and including firstMR.DateEntered?
            ]
        });
    });
    </script>

Is it possible to do this all in the view? I am using razor.

Any help is appreciated.

UPDATE

I am trying this in Razor View:

@{
    ViewBag.Title = "Create";
    var firstMR = new ALogSummary.Models.MRecord();

    using (var db = new AviationLogSummary.Models.ALogsEntities())
    {
        firstMR = db.MRecords.Where(x => x.AID == Model.AID).OrderBy(x => x.DateEntered).FirstOrDefault();
    }

}



<div id="datetimepicker2" class="input-group date">
    @Html.EditorFor(model => model.Day, new { htmlAttributes = new { id = "Day", @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.Day, "", new { @class = "text-danger" })
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker2').datetimepicker({
            format: 'MM/DD/YYYY HH:mm',
            minDate: [@firstMR.DateEntered.Date]
        });
    });
 </script>

I am receiving this error when I debug:

JavaScript critical error at line 160, column 49 in http://localhost:xxxxx/DSummaries/Create/7\n\nSCRIPT1007: Expected ']'

UPDATE 2:

<div id="datetimepicker2" class="input-group date" >
    @Html.EditorFor(model => model.Day, new { htmlAttributes = new { id = "Day", @class = "form-control", data_mindate = firstMR.DateEntered.Date } })
    @Html.ValidationMessageFor(model => model.Day, "", new { @class = "text-danger" })
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

SCRIPT:

This is in it's own JS file

$(function () {
    $('#datetimepicker2').datetimepicker({
        format: 'MM/DD/YYYY HH:mm',
        minDate: $(this).data('mindate')
    });
});

The HTML output is:

<input class="form-control text-box single-line valid" id="Day" type="datetime" data-val-required="This field is required!" data-val="true" data-mindate="05/28/2016 00:00:00" data-val-date="This field: must be a date." value="06/28/2016 09:07"></input>

so the correct mindate is being populated but my script isn't working.

Upvotes: 0

Views: 1275

Answers (1)

user3559349
user3559349

Reputation:

Rather than using the disabledDates options, use the minDate option to prevent users selecting dates before the minDate value

$('#datetimepicker2').datetimepicker({
    format: 'MM/DD/YYYY HH:mm',
    minDate: '@firstMR.DateEntered.Date'
});

Since this script is in an external js file (and razor code is not parsed in external files), you can pass the value using a data-* attribute on your element

@Html.EditorFor(model => model.Day, new { htmlAttributes = new { data_mindate = firstMR.DateEntered.Date, @class = "form-control" } })

Note there is no need to include id = "Day" since that's already added by the EditorFor() method (and you appear to have made a typo anyway since the script refers to an element with id="datetimepicker2").

Then in the external file

var day = $('#Day')
day.datetimepicker({
    format: 'MM/DD/YYYY HH:mm',
    minDate: day.data('mindate')
});

Upvotes: 1

Related Questions