Question

I have a dialog form that pops up and its content is loaded using the jQuery load function. On that ajax loaded page there is a jQuery UI datepicker and in the Model that I pass to the view, I have MinDate and MaxDate properties that are used to set the min and max dates of the datepicker. On a non-ajax page I usually do something like this:

<script type="text/javascript">
$(function () {
     var model = @(Model.ToJson());

        $('.date').datepicker('option', 'minDate', new Date(parseInt(model.MinDate.substr(6))));
        $('.date').datepicker('option', 'maxDate', new Date(parseInt(model.MaxDate.substr(6))));

});
</script>

The problem is that if I include any javascript in the view that is loaded from the jQuery load function, it is stripped out and not executed. So, if I included the above code to specify the min and max dates for the datepicker in the dialog form doesn’t work.

How can I specify min and max dates for a jQuery UI datepicker where the datepicker is being loaded via ajax and the min and max dates come from the model?

Answer 1

You could serialize those two model properties as HTML5 data-* attributes somewhere in the DOM. For example as part of the datepicker itself it would be great:

<input type="text" class="date" name="myDate" data-min="@Model.MinDate" data-max="@Model.MaxDate" />

and then define some functions:

function initPicker() {
    $('.date').each(function() {
        $(this).datepicker('option', 'minDate', $(this).data('min'))
               .datepicker('option', 'maxDate', $(this).data('max'));
    });
}

and then invoke this function in your DOM ready:

$(initPicker);

as well as in your AJAX success callbacks in order to reattach them.