작업

air datepicker 시작일 종료일 minDate, MaxDate 제어

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<link rel="stylesheet" href="/css/datepicker.min.css" />
<script src="/js/datepicker.min.js"></script>
<script src="/js/datepicker.ko.js"></script>
 
 
 
 
 
<script type="text/javascript">
var date = new Date();
var dp = $('#date_start').datepicker({
  //년-월-일
  startDate: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
  language: 'ko',
  autoClose: true,
  //선택한 날짜를 가져옴
  onSelect: function (date) {
      var endNum = date;
      //종료일 datepicker에 최소날짜를 방금 클릭한 날짜로 설정
      $('#date_end').datepicker({
          minDate: new Date(endNum),
      });
  }
}).data('datepicker');
var dp2 = $('#date_end').datepicker({
  startDate: new Date(date.getFullYear(), date.getMonth(), date.getDate()),  // 시간, 분은 00으로 초기 설정
  language: 'ko',
  autoClose: true,
  //선택한 날짜를 가져옴
  onSelect: function (date) {
      var startNum = date;
      $('#date_start').datepicker({
          //시작일 datepicker에 최대날짜를 방금 클릭한 날짜로 설정
          maxDate: new Date(startNum),
      });
  }
}).data('datepicker');
</script>
 
cs

 

빨간색의 사선이 max와 min을 표시해 놓은 것이다 (이미지에만)

 

 

 

airpicker는 스타일이 default도 쓸만하다는게 좋지만

다음에는 오리지널을 커스텀하는게 어떨까 싶다.