kendoUI
kendo datePicker component 사용
kendo Date picker 날짜 선택 옵션
"month" - Shows the days of the month.
"year" - Shows the months of the year.
"decade" - Shows the years of the decade.
"century" - Shows the decades from the century.
kendoUI datePicker sample code
use library
1. kendoUI 사이트 바로가기
2. jQuery 사이트 바로가기
3. moment 사이트 바로가기
<body>
<form>
<input type="text" name="searchYear">
<input type="text" name="searchBeginDate">
<input type="text" name="searchEndDate">
</form>
<script>
//연도
$("#searchYear").kendoDatePicker({
dateInput: true // 날짜형식 입력 선언
, start: "decade" // 연도 선택
, depth: "decade" // 연도 선택
, format: "yyyy" // 달력 표시 형식
, culture: "ko-KR" // 달력 표시 언어
, value: new Date() // 기본값. 오늘.
});
//시작일
$("#searchBeginDate").kendoDatePicker({
dateInput: true // 날짜형식 입력 선언
, start: "day" // 날짜 선택
, depth: "day" // 날짜 선택
, format: "yyyy-MM-dd" // 달력 표시 형식
, culture: "ko-KR" // 달력 표시 언어
//, value: moment().subtract(90, 'days').format("YYYY-MM-DD") // 기본값. 오늘. value에 moment() 라이브러리 사용 가능.
, close: function(e) { // 달력 닫힐 때
// 날짜값이 일부라도 지워진 경우 날짜를 지우는것으로 판정
if ($("#searchBeginDate").data("kendoDatePicker").value() == null) {
$("#searchBeginDate").val(""); //날짜값 삭제
} else {
// 시작일이 종료일보다 큰 경우
if ($("#searchBeginDate").data("kendoDatePicker").value() > $("#searchEndDate").data("kendoDatePicker").value() {
// 종료일을 시작일과 같은날로 변경
$("#searchEndDate").data("kendoDatePicker").value($("#searchBeginDate").val());
}
// 종료일의 선택 가능날짜를 시작일 보다 큰 날짜만 선택할 수 있도록 제한
$("#searchEndDate").data("kendoDatePicker").min($("#searchBeginDate").val());
}, change: function() {
//날자값이 일부라도 지워진 경우
if (this.value() == null) {
$("#searchBeginDate").val("");
$("#searchEndDate").val("");
}
// 종료일 달력 열기
$("#searchBeginDate").data("kendoDatePicker").open();
}
});
// 화면 최초 로딩시 시작일 달력에 빈값 상태를 유지.
$("#searchBeginDate").val("");
//종료일
$("#searchEndDate").kendoDatePicker({
dateInput: true // 날짜형식 입력 선언
, start: "day" // 날짜 선택
, depth: "day" // 날짜 선택
, format: "yyyy" // 달력 표시 형식
, culture: "ko-KR" // 달력 표시 언어
//, value: moment().format("YYYY-MM-DD") // 기본값. 오늘. value에 moment() 라이브러리 사용 가능.
//, min: $("#searchBeginDate").val()
}, change: function() {
//날자값이 일부라도 지워진 경우
if (this.value() == null) {
$("#searchBeginDate").val("");
$("#searchEndDate").val("");
}
}
});
// 화면 최초 로딩시 종료일 달력에 빈값 상태를 유지.
$("#searchEndDate").val("");
</script>
</body>
글 남기기