jquery datepickerで特定の日付を動的に無効にする方法はありますか？

データベースに既に存在する日付（jquery datepicker）を動的に無効にしようとしています。私は目標を達成することができていますが、ここでjquery datepickerで特定の日付を動的に無効にする方法はありますか？

<script language="javascript"> 
$(document).ready(function() { 
    var getfromdb = @Html.Raw(@ViewBag.bookdate); 
    var result = '\'' + getfromdb.toString().split(',').join('\',\'') + '\''; 
    var disableddates = [result]; 

    var newdisableddates = ['17/10/2017','18/10/2017','19/10/2017','22/10/2017','23/10/2017','24/10/2017','25/10/2017']; // Static Approach 

    $("#txtFromdate").datepicker({ 
     minDate: 0, 
     beforeShowDay: DisableSpecificDates, 
     dateFormat: 'dd/mm/yy' 
    }); 
    $("#txtTodate").datepicker({ 
     minDate: 0, 
     beforeShowDay: DisableSpecificDates, 
     dateFormat: 'dd/mm/yy' 
    }); 

    function DisableSpecificDates(date) { 
     var string = jQuery.datepicker.formatDate('dd/mm/yy', date); 
     return [disableddates.indexOf(string) == -1]; 
    } 
});

動的なアプローチでの成功を取得していないが、私のコントローラコードがあるという点で静的メソッドを行っている：

List<string> getbookdate = new List<string>(); 
    getbookdate = BookDate(id); 
    ViewBag.bookdate = JsonConvert.SerializeObject(getbookdate.ToList()); 


    public List<string> BookDate(int? id) 
     { 
      DateTime dt = System.DateTime.Now.Date; 
      var getbookdate = (from x in entity.BookingMasters 
           join 
           y in entity.BookingDetails on x.BookingId equals y.BookingId 
           where x.ProductId == id && y.FromDate > dt && y.ToDate > dt 
           select new BookingModel { ProductId = x.ProductId.Value, FromDate = y.FromDate.Value, ToDate = y.ToDate.Value }).ToList(); 

      List<string> allDates = new List<string>(); 

      foreach (var r in getbookdate) 
      { 
       for (DateTime date = r.FromDate; date <= r.ToDate; date = date.AddDays(1)) 
       { 
        allDates.Add(Convert.ToString(date.ToShortDateString())); 
       } 
      } 
      return allDates; 
     }

出典

2017-10-04 Anonymous

無効化が機能しません日付ピッカーでうまくいきます。私のplnkrを試してみてください。

https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/

それはクリックで日付ピッカーを取得し、指定した日付とデータセットを解析し、一致が見つかった場合、それはそれでクリックイベントを削除します。各レンダリングで繰り返し、htmlのための私のplnkrのリンクを見てください。希望すると助かります

<!--Disable doesn't work well with date picker. Try this. Hope it helps--> 
<!--Working example https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/ --> 
<!--Code--> 
<!--HTML PART--> 
<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script data-require="[email protected]*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
    <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="1.12.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
    <script data-require="[email protected]*" data-semver="1.12.1" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
</head> 

<body class="container"> 
    <h1>Hello User</h1> 
    <div class="box"> 
    <div class="box-content"> 
     <div class="row"> 
     <div class="col-md-4"> 
      <label>Date:</label> 
      <input type="text" id="date-picker-control" /> 
     </div> 
     </div> 
    </div> 
    </div> 
    <script> 
    var element = $('#date-picker-control'); 
    element.datepicker(); 

    element.off('click').on('click', function() { 

     // Setup DatePicker 
     console.log('Update Date Picker'); 

     // If user changes month or year, update date picker 
     // based on the date list you have 
     $("#ui-datepicker-div") 
     .find("div.ui-datepicker-header") 
     .find('a.ui-datepicker-next, a.ui-datepicker-prev') 
     .on('click', function() { 
      element.click(); 
     }); 

     // Get all available dates in current displayed dates 
     var availableDates = $("#ui-datepicker-div") 
     .find("table.ui-datepicker-calendar") 
     .find('td[data-handler="selectDay"]'); 

     availableDates.filter(function(i) { 
     var targetDateElement = $(this); 

     //Get date parts 
     var year = +targetDateElement.data("year"); 
     var month = targetDateElement.data("month") + 1; //JS fix 
     var day = +targetDateElement.find('a.ui-state-default').text(); 
     var builtDate = month + '/' + day + '/' + year; 

     // you can substitute your json data 
     var targetDates = [ 
      "10/2/2017", "10/6/2017", "10/8/2017" 
     ]; 

     $.each(targetDates, function(i, targetDate) { 
      // If builtDate match targetdate then turn click event oFF on that date 
      if (targetDate == builtDate) { 
      targetDateElement.css({ 
       'border': '1px solid gray', 
       'background': 'darkgray',  
       'font-weight': 'bold', 
       'color': 'gray' 
      }).off('click'); 
      } 
     }); 

     }); 
    }); 
    </script> 
</body> 

</html>

出典

2017-10-04 20:18:59

ありがとうございました。 –

私のplnkrリンクを確認しましたか？それは動作します..何が起こっているか教えてください –

オリジナルのアイデアは正しい方向ですが、おそらく変わったことがあります。私はちょうど日付を通過した日付ではなく、すべての糸のものと比較したい：...私はこの簡単なテストを書いたを

コントローラ：

//Replace with however you get dates 
ViewBag.DatesList = new List<DateTime>() 
    { 
     new DateTime(2018, 01, 01), 
     new DateTime(2018, 01, 02), 
     new DateTime(2018, 01, 03) 
    }; 
    return View();

ビュー：

<script language="javascript"> 
$(document).ready(function() { 

var disableddates = []; 
@foreach (DateTime date in ViewBag.DatesList) 
{ 
    //note JS month is zero-based for no good reason at all... 
    @:disableddates.push(new Date(@date.Year, @date.Month-1, @date.Day)) 
} 

$("#txtFromdate").datepicker({ 
    minDate: 0, 
    beforeShowDay: DisableSpecificDates, 
    dateFormat: 'dd/mm/yy' 
}); 
$("#txtTodate").datepicker({ 
    minDate: 0, 
    beforeShowDay: DisableSpecificDates, 
    dateFormat: 'dd/mm/yy' 
}); 

function DisableSpecificDates(date) { 
    //filter array to find any elements which have the date in. 
    var filtereddates = disableddates.filter(function (d) { 
     return d.getTime() === date.getTime(); 
    }); 

    //return array with TRUE as the first (only) element if there are NO 
    //matching dates - so a matching date in the array will tell calling 
    //code to disable that day. 
    return [filtereddates.length == 0]; 
} 
}); 
</script>

これは私のために働くようです。

出典

2017-10-05 09:37:52 GPW

追加することを忘れました - これは、ローカリゼーションの問題を回避する（元のコードでは、ToShortDateString（）は常にJSでテストする形式の日付を返します。[MSDN]（https://msdn.microsoft.com/en-us/library/system.datetime.toshortdatestring（v = vs.110）.aspx）から： "ToShortDateStringメソッドによって返される文字列はカルチャーセンシティブです現在の文化のDateTimeFormatInfoオブジェクトによって定義されたパターンを反映します。 – GPW

jquery datepickerで特定の日付を動的に無効にする方法はありますか？

答えて

関連する問題