Gracefullight

Web.dev

Materialize pickadate 설정

작성일 Edited on In , Disqus:

기본예제는 type=“date” 로만 설정이 되있어서 type="text"에도 적용 가능하게 onSet callback 을 설정했고,
한글로 보이게 수정했다.

소스

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<input type="text" name="date" class="date" />

<script>
  $(function () {
    // pickadate 옵션 전역설정
    $.extend($.fn.pickadate.defaults, {
      monthsFull: [
        '1월',
        '2월',
        '3월',
        '4월',
        '5월',
        '6월',
        '7월',
        '8월',
        '9월',
        '10월',
        '11월',
        '12월',
      ],
      monthsShort: [
        '1월',
        '2월',
        '3월',
        '4월',
        '5월',
        '6월',
        '7월',
        '8월',
        '9월',
        '10월',
        '11월',
        '12월',
      ],
      weekdaysFull: ['일', '월', '화', '수', '목', '금', '토'],
      weekdaysShort: ['일', '월', '화', '수', '목', '금', '토'],
      selectMonths: true,
      selectYears: 140,
      showMonthsShort: false,
      showWeekdaysFull: false,
      close: '닫기',
      clear: false,
      today: '오늘',
      format: 'yyyy-mm-dd',
      formatSubmit: 'yyyy-mm-dd',
      max: true, // 이 옵션이 ture면 오늘까지밖에 날짜 선택을 못한다
      closeOnSelect: true,
      onSet: function (e) {
        if (e.select) {
          this.close();
        }
      },
    });

    // 활성화
    $('.date').pickadate();
  });
</script>

결과