datepickerをフォーマットする方法

予約フォームを作成しました。私のページにPikaday datepicker pluginを使用しています。私の予約フォームは空の日、rezerved daysと空き日があるので、.class datepickerでそれらを着色する日と私は実際に何をしたいかを示すために画像を作成しました..私はどのようにarraylistを使用してjqueryでこれを行うことができますか？何か案が？datepickerをフォーマットする方法

例えば私の空の日付が

theeseであり、これは私の無効機能

disableDayFn: function(theDate) { 
     theDate = theDate.toISOString().split('T')[0]; 
     if (disallowedDates.indexOf(theDate) != -1) { 
      console.log(theDate + ' - BLOCKED'); 
     } else { 
      console.log(theDate); 
     } 

     return (disallowedDates.indexOf(theDate) != -1) 
     }

ですが、私はそれを行うことができますあまりにもどのように予約した日のためにこれを行うにはしたいですか？

$(document).ready(function() { 
 

 
    var disallowedDates = [ 
 
    '2017-02-20', '207-02-10', '2017-02-15', '2017-02-09' 
 
    ] 
 
    var startDate, 
 
    endDate, 
 
    updateStartDate = function() { 
 
     startPicker.setStartRange(startDate); 
 
     endPicker.setStartRange(startDate); 
 
     endPicker.setMinDate(startDate); 
 
    }, 
 
    updateEndDate = function() { 
 
     startPicker.setEndRange(endDate); 
 
     startPicker.setMaxDate(endDate); 
 
     endPicker.setEndRange(endDate); 
 
    }, 
 
    startPicker = new Pikaday({ 
 
     field: document.getElementById('checkin'), 
 
     format: "DD.MM.YY", 
 
     firstDay: 1, 
 
     disableDayFn: function(theDate) { 
 
     theDate = theDate.toISOString().split('T')[0]; 
 
     if (disallowedDates.indexOf(theDate) != -1) { 
 
      console.log(theDate + ' - BLOCKED'); 
 
     } else { 
 
      console.log(theDate); 
 
     } 
 

 
     return (disallowedDates.indexOf(theDate) != -1) 
 
     }, 
 
     onSelect: function() { 
 
     startDate = this.getDate(); 
 
     updateStartDate(); 
 
     $('#checkout').trigger("click"); 
 
     } 
 
    }), 
 
    endPicker = new Pikaday({ 
 
     field: document.getElementById('checkout'), 
 
     format: "DD.MM.YY", 
 
     minDate: new Date(), 
 
     maxDate: new Date(2020, 12, 31), 
 
     onSelect: function() { 
 
     endDate = this.getDate(); 
 
     updateEndDate(); 
 
     } 
 
    }), 
 
    _startDate = startPicker.getDate(), 
 
    _endDate = endPicker.getDate(); 
 
    if (_startDate) { 
 
    startDate = _startDate; 
 
    updateStartDate(); 
 
    } 
 
    if (_endDate) { 
 
    endDate = _endDate; 
 
    updateEndDate(); 
 
    } 
 

 
});

body { 
 
    padding: 30px; 
 
} 
 

 
input, 
 
select { 
 
    width: 100%; 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" /> 
 

 

 

 

 

 
</head> 
 

 
<body> 
 

 

 
    <div class="container"> 
 

 

 
    <div class="row"> 
 

 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 
     <input type="text" class="checkin" id="checkin" /> 
 
     </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 

 
     <input type="text" class="checkout" id="checkout" /> 
 
     </div> 
 

 
    </div> 
 

 

 
    </div> 
 

 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script> 
 

 
    <script src="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script> 
 

 
</body> 
 

 
</html>

出典

2017-02-23 ani_css

ありがとうございます。 –

私は、私はあなたの問題への解決策を見つけたと思います。

私のアプローチでは、保存した日付の配列を反復する機能を実装していました。予約できる日数、空の日数、またはw/eで、私ができる日の年、月、日を取得できます選択した日付のみを選択するセレクタを作成し、希望のクラスを追加するにはaddClass()を作成します。ここで

はコードです：

var disableDays = []; 
var picker; 
$(document).ready(function() { 
    picker = new Pikaday({ 
     field: $('#datepicker')[0], 
     disableDayFn: function (date) { 
      return disableDays.indexOf(date.toString()) != -1; 
     }, 
     onSelect: function (date) { 
      disableDays.push(date.toString()); 
     }, 
     onOpen: function() { 
      $.each(disableDays, function (i, v) { 
       var date = new Date(v); 
       var yearSelector = '[data-pika-year="' + date.getFullYear() + '"]'; 
       var monthSelector = '[data-pika-month="' + date.getMonth() + '"]'; 
       var daySelector = '[data-pika-day="' + date.getDate() + '"]'; 
       $(yearSelector + monthSelector + daySelector).addClass('yellow'); 
      }) 
     } 
    }); 
});

私が助けることができる願っています。

出典

2017-02-23 14:18:50

datepickerをフォーマットする方法

答えて

関連する問題