웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > etc

Bootstrap datepicker에 최소 최대 날짜 설정하는 방법은?

Last Modified : 2017-09-21 / Created : 2017-03-30
9,721
View Count
Bootstrap의 datepicker를 사용하여 날짜를 선택할때 만약 선택가능한 날짜를 지정하려면 어떻게할까요?
우선 최소 및 최대 날짜가 필요하고 아래 방법처럼 두 가지의 방법이 존재합니다.

1. html 코드에 설정값을 추가
2. datepicker config에 최소 최대값 추가


# html 코드에 추가하는 방법
<input type="text" datepicker-popup="" 
                   ng-model="dt"
                   is-open="opened" 
                   min="'2017-03-01'"
                   max="'2017-03-30'"
                   datepicker-options="dateOptions" />


# 설정된 Datepicker Config를 수정하는 방법
dateOptions = {
  allowInvalid: true,
  maxDate: new Date(), // 만약 오늘 날짜까지만 설정하는 경우
  minDate: '원하는 날짜 설정',
  formatYear: 'yy'
};

옵션 설정하는 방법 역시 간단합니다. 스크립트에 추가해 주시면됩니다.

코드 스니펫 widget

Previous

CKEDITOR 로딩된 상태를 알아내는 방법은?

Previous

자바스크립트에서 오늘 날짜만 구하는 방법은?