19'C 흐림
서울 강남구
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>datepicker - calendar custom & time select</title>
</head>
<body>
<div id="wrapper">
<label class="label_title" for="searchDateStart">기간</label>
<!-- 시작일시 -->
<div class="date_group">
<input type="text" id="searchDateStart" name="searchDateStart" class="date" />
<select class="sel" id="beginTime">
</select>
<span class="unit">시</span>
<select class="sel" id="beginMin">
</select>
<span class="unit">분</span>
</div>
<span class="icon_wave"> ~ </span>
<!-- 종료일시 -->
<div class="date_group">
<input type="text" id="searchDateClose" name="searchDateStart" class="date" />
<select class="sel" id="endTime">
</select>
<span class="unit">시</span>
<select class="sel" id="endMin">
</select>
<span class="unit">분</span>
</div>
</div>
<!-- //wrapper -->
<script>
//한국어버전
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년'
});
var searchDate = $( "#searchDateStart, #searchDateClose" ).datepicker({
dateFormat: "yy.mm.dd",
changeMonth: false,
changeYear: false,
showMonthAfterYear: true,
onSelect: function( selectedDate ) {
var option = this.id == "searchDateStart" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
searchDate.not( this ).datepicker( "option", option, date );
}
});
$(function(){
//시간 select option 생성
$("#beginTime").empty();
$("#endTime").empty();
for(var i=0;i<24;i++){
var time = i<10?("0"+i):i;
$("#beginTime").append('<option value="'+time+'">'+time+'</option>');
$("#endTime").append('<option value="'+time+'">'+time+'</option>');
}
//분 select option 생성
$("#beginMin").empty();
$("#endMin").empty();
for(var i=0;i<60;i++){
var time = i<10?("0"+i):i;
$("#beginMin").append('<option value="'+time+'">'+time+'</option>');
$("#endMin").append('<option value="'+time+'">'+time+'</option>');
}
});
</script>
</body>
</html>