Unable to assign String Array to Bootstrap DateTimePicker disabledDates

Question

I'm using bootstrap datetimepicker with my ASP.net MVC5 application. I'm trying to fetch the disabled dates from DB, create an Array of disabled dates and then pass that array in javascript:-

C#

public String[] disabledDates { get; set; } // This model property gets set from database.

e.g. disabledDates = ["2017-08-29","2017-11-22"];

<script type="text/javascript">
    $(function () {
        var disabledDatesAr = '@Model.disabledDates';
        $('#scheduleDate').datetimepicker({
            useCurrent: false,
            minDate: new Date(),
            format: 'DD-MM-YYYY hh:mm A',
            showTodayButton: true,
            sideBySide: true,
            showClose: true,
            showClear: true,
            toolbarPlacement: 'top',
            disabledDates: disabledDatesAr
        });
    });
</script>

But the above code doesn't work and DateTimePicker popup getting disabled. Can anyone please guide me on how to assign this array value to disabled dates? Thanks in advance.

Answer 1

When you have this section:

var disabledDatesAr = '@Model.disabledDates';

You are really just calling the ToString method of the object. The ToString method of an array outputs like this System.String[]. So really you are doing this in razor:

var disabledDatesAr = 'System.String[]';

What you want to do is create a JSON array, this will output the syntax you are expecting.

disabledDates = ["2017-08-29","2017-11-22"];

A nice neat way to do this would be as Stephen Muecke has mentioned in the comments.

var disabledDatesAr = @Html.Raw(Json.Encode(Model.disabledDates));

Without the Html.Raw razor would try to encode characters.

Here is some useful documentation: Json.Encode and Html.Raw.