제이쿼리 UI 간단사용법 (데이터피커 Datepicker Widget) 달력만들기

제이쿼리 '데이터피커' 사용법 - 오쌤

$('.calendar input').datepicker({     // 주말 선택 안되게     // beforeShowDay: $.datepicker.noWeekends,     // 달력이 보이기전에 각각의 부모요소에 추가해줌     beforeShow: function () {       $(this).parent().append($('.ui-datepicker'));     },   });

 

---

js 파일에 해당 코드를 수정하여 적용해보자

 

 

적용확인!

 

---

문제점 1. 창을 줄였을때 캘린더 위치가 지멋대로 바뀜

 

 

왜?

 

데이터 피커 추가시 동적요소가 자동으로 html에 적용된다(슬라이더처럼). 

position이 absolute로 기준이 창기준이라

창크기가 달라지면 위치가 계속 변경된다.

 

따라서 포지션을 우리 요소 안으로 집어 넣어줘야한다.

 

 beforeShow: function ()

데이터피커 요소 메서드를 사용해보자

 

 

$(this).parent().append($('.ui-datepicker'));

append 우리가 원하는 동적요소 넣어줌

 

---

2. 위젯 사이트에서 옵션 참고

 

제이쿼리 라이브러리 데이터피커 위젯 부분에서 옵션을 확인할수 있다.

https://api.jqueryui.com/datepicker/#option-beforeShow

 

 

 

 

 

 

 

---

옵션 스타일 변경

 

 

 

 

 

    // 입력필드의 날짜 형식

    dateFormat: 'yy.mm.dd',

 

 

  // 이전,다음달 툴팁

    prevText: '이전 달',

    nextText: '다음 달',

 

 

 

 

 

 

 

 

 

 

 

    // 월표시 형식

    monthNames: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],

 

 

 

 

 

 

 

 

 

 

 

 

  // 년 뒤의 접미사

    yearSuffix: '.',

 

 

 

 

 

 

 

    // 하단버튼 가리기

    showButtonPanel: false,

 

 

 

 

 

 

 

 

    // 오늘날짜 기준으로한 선택되는 최대날짜

    maxDate: '+w',

 

 

 

 

 

 

 

위치잡기 

 

 

 

 

 

 

 

 

.append()

추가한다 메서드 

 

c

  $('.calendar input[type=text]').datepicker({
    beforeShow: function () {
      console.log('달력이 보여지기 전에 실행');
      // .calendar 마지막에 자식요소로 추가
      $(this).parent().append($('#ui-datepicker-div'));
    },
  });

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

참고 사이트 

 

https://its-easy.tistory.com/12