webmanab.html

menu

jQueryUIを利用してミニマルデザインな実用的なカレンダーを表示する -『UI』

 

demo

  • 開始日と終了日を時空が逆転しないようにする
  • 常に表示しておくインラインカレンダー

const setCalender = ($target) => { let $calender = $('.calender', $target); $($calender[0]).datepicker({ showOtherMonths: true, onClose: function(dateText, inst) { $($calender[1]).datepicker('option', 'minDate', dateText); $($calender[0]).val(dateText); } }); $($calender[1]).datepicker({ showOtherMonths: true, onClose: function(dateText, inst) { $($calender[0]).datepicker('option', 'maxDate', dateText); $($calender[1]).val(dateText); } }); }; setCalender($('#js-calender')); const inlineCalender = ($target) => { $('#js-inline-calender').datepicker({ onSelect: function(dateText, inst) { $target.val(dateText); } }); }; inlineCalender($('#js-output'));

share

lab