2016-05-25 4 views
1

私はbootstrap date pickerで無効にしたい日付のリストを持っています。私は、JSONから返された日付の配列で動作するdatesDisabled関数を取得できません。これは、日付のハードコードされた配列で動作します。ブートストラップDatepickerと日付のC#/ JSON配列を無効にする

JSONから返された日付をフォーマットする必要がありますか?

問合せ:私の見解では

var DatesBooked= JsonConvert.SerializeObject(db.Calendar.Where(x => x.CalLocation != "OFF")).Select(x => x.CalDate).Distinct().ToList()); 

@Html.TextBox("AddedDates", null, new { @class = "form-control small", @Value = ViewBag.SelDate, autocomplete = "off" }) 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
    <script src="~/Scripts/jquery.timepicker.js"></script> 
    <script src="~/Scripts/bootstrap-datepicker.min.js"></script> 
    <script> 
    var unavailableDates= @Html.Raw(Json.Encode(Model.DatesBooked)); 

    $input = $("#AddedDates"); 
        $input.datepicker({ 
         multidate: true, 
         multidateSeparator: ',', 
         datesDisabled: unavailableDates, 
        }); 
    </script> 

unavailableDates値

var unavailableDates = "[\"2016-05-01T00:00:00\",\"2016-05-02T00:00:00\",\"2016-05-03T00:00:00\",\"2016-06-24T00:00:00\",\"2016-06-25T00:00:00\"]" 

私はthisfor unavailableDatesをハードコーディングした場合、すべてが正常に動作します。

var unavailableDates = ["05/25/2016", "05/26/2016"] 

これを機能させるには、どのように日付をフォーマットする必要がありますか?

TIA!

答えて

0

まあ多くの試みとより多くの研究の後、私は次のようにしてこの問題を解決することができたが:

私はC#を使用して、日付を再フォーマット:

var checkdates = db.Calendar.Where(x => x.CalLocation != "OFF")).Select(x => x.CalDate).Distinct().ToList() 

var DatesBooked= JsonConvert.SerializeObject(checkdates, Formatting.None, new IsoDateTimeConverter() { DateTimeFormat = "MM/dd/yyyy" }); 

は、次にビューで、私は「ストリッピングJSONによって返された\ "文字を使用して配列を作成しました。

var unavailableDates = @Html.Raw(Json.Encode(Model.DatesBooked)); 
     var formatDates = unavailableDates.replace(/\\/g, ""); 
     var trimDate = formatDates.slice(1, -1); // to remove " at beginning and end 
     var finalDates = JSON.parse("[" + trimDate + "]"); 
     $input = $("#AddedDates"); 
     $input.datepicker({ 
      multidate: true, 
      multidateSeparator: ',', 
      datesDisabled: finalDates, 
      todayHighlight: true 
    });  
関連する問題