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
ー

tag
ー

related
ー

lab