[jquery] 다중 선택 datepicker - MultiDatesPicker

 보통 웹에서 캘린더 기능을 사용할때에는 jquery에서 제공되는 datepicker를 사용합니다. 그러던 중 다중으로 선택 할 수 있는 캘린더가 필요해서 해당 기능이 되는지 검색을 해보았습니다. 일반적으로 jquery에서는 제공되지 않았습니다. 그래서 누군가 만들어 놓은 스크립트가 있지 않을까 검색을 하던 중에 발견해서 사용을 해보았습니다. 결과적으로는 매우 만족스러웠습니다.

MultiDatesPicker (MDP)

 MultiDatesPicker 라는 일명 (MDP) 라고 하는 플러그인 입니다. 해당 플러그인은 기존에 있던 날짜를 하나만 선택 할 수 있는 캘린더를 이용해 여러 날짜를 선택할 수 있게 해줍니다. 

MDP는 jQuery UI 캘린더가 다음 기능으로 여러 날짜를 관리할 수 있도록 지원하는 작은 플러그인입니다.

날짜 범위를 선택하십시오.
날짜를 여러 개 선택하십시오.
선택할 수 있는 최대 날짜 수를 정의합니다.
Y 날짜를 선택할 수 있는 X일 범위를 정의합니다.
사용할 수 없는 날짜를 정의합니다.

 

 해당 플러그인은 추가적인 옵션이 존재했고 다양한 메소드들이 추가되어서 사용하기 쉽게 되어있습니다. 또한 사이트에서는 다양한 데모를 제공해주고 있습니다. 아래 링크에서 좀 더 자세한 내용을 보실 수 있습니다.

 

바로가기 - http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#method-destroy 

 

오늘날짜로 계속 리프레쉬 되는 문제

 해당 플러그인을 사용하면서 생긴 문제가 있었습니다. input 형태로 팝업을 띄운후 날짜를 선택하면 달력이 오늘 날짜로 이동하는 문제였습니다. 저는 다른 달을 선택하는데 계속 현재 월로 이동하기 때문에 심각한 문제로 보였습니다. 그래서 해당 오류에 대해서 검색해서 찾아보니 추가적인 스크립트를 이용해서 해당 현상을 막는 방법이 있었습니다. 해당 방법은 아래 소스코드와 같습니다.

 

$("#multidatepicker").multiDatesPicker();

// 현재날짜로 이동하는 현상을 방지 하는 코드
$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function(id, dateStr) {
  var target = $(id);
  var inst = this._getInst(target[0]);
  inst.inline = true;
  $.datepicker._selectDateOverload(id, dateStr);
  inst.inline = false;

  if (target[0].multiDatesPicker != null) {
    target[0].multiDatesPicker.changed = false;
  } else {	
    target.multiDatesPicker.changed = true;
  }
  this._updateDatepicker(inst);

  if (target[0].multiDatesPicker == undefined) {
    this._hideDatepicker();
    target[0].blur();
  }
};