라이브러리
datepicker
html
<input type="text" class="js-datepicker" autocomplete="off" title="날짜 입력">
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
script
function datePicker() {
$(".js-datepicker").daterangepicker({
locale: {
format: "YYYY-MM-DD",
daysOfWeek: ["일","월","화","수","목","금","토"],
monthNames: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
cancelLabel: "취소", // autoApply: false 일 경우 취소 텍스트 설정
applyLabel: "확인", // autoApply: false 일 경우 확인 텍스트 설정
},
autoApply: true, // 자동 적용 여부 설정
singleDatePicker:true, // 단일 달력 설정
minDate: "2021-10-10", // 선택할 수 있는 최소 날짜 설정
maxDate: "2022-02-10", // 선택할 수 있는 최대 날짜 설정
});
}
$(function() {
datePicker();
/*
$(".js-datepicker").data("daterangepicker").setStartDate("2021-11-11"); // 시작날짜를 해당 날짜로 업데이트
$(".js-datepicker").data("daterangepicker").setEndDate("2021-11-11"); // 종료 날짜를 해당 날짜로 업데이트
// datepicker 노출될 때 이벤트 설정
$(".js-datepicker").on("show.daterangepicker", function(ev, picker) {
console.log(picker);
});
// datepicker 사라질 때 이벤트 설정
$(".js-datepicker").on("hide.daterangepicker", function(ev, picker) {
console.log(picker);
});
// 날짜 적용될 때 이벤트 설정
$(".js-datepicker").on("hide.daterangepicker", function(ev, picker) {
console.log(picker);
});
*/
});
daterangepicker
html
<input type="text" class="js-daterangepicker" autocomplete="off" title="기간 입력">
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
script
function dateRangePicker() {
$(".js-daterangepicker").daterangepicker({
locale: {
format: "YYYY-MM-DD",
separator: "~", // 기간 사이에 구분자 설정
daysOfWeek: ["일","월","화","수","목","금","토"],
monthNames: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
cancelLabel: "취소", // autoApply: false 일 경우 취소 텍스트 설정
applyLabel: "확인", // autoApply: false 일 경우 확인 텍스트 설정
},
autoApply: true, // 자동 적용 여부 설정
singleDatePicker:false, // 단일 달력 설정
linkedCalendars:true, // 두 개의 캘린더를 항상 연속된 달로 설정할 것인지 여부
minDate: "2021-10-10", // 선택할 수 있는 최소 날짜 설정
maxDate: "2022-02-10", // 선택할 수 있는 최대 날짜 설정
});
}
$(function() {
dateRangePicker();
/*
$(".js-datepicker").data("daterangepicker").setStartDate("2021-11-11"); // 시작날짜를 해당 날짜로 업데이트
$(".js-datepicker").data("daterangepicker").setEndDate("2021-11-11"); // 종료 날짜를 해당 날짜로 업데이트
// datepicker 노출될 때 이벤트 설정
$(".js-datepicker").on("show.daterangepicker", function(ev, picker) {
console.log(picker);
});
// datepicker 사라질 때 이벤트 설정
$(".js-datepicker").on("hide.daterangepicker", function(ev, picker) {
console.log(picker);
});
// 날짜 적용될 때 이벤트 설정
$(".js-datepicker").on("hide.daterangepicker", function(ev, picker) {
console.log(picker);
});
*/
});