반응형
제가 자주쓰는 bootstrap datepicker 입니다.
https://uxsolutions.github.io/bootstrap-datepicker
보통은 위 sandbox에서 다 해결이되는데, Range가 이쁘지 않고 inline으로 쓰려고 하면 뭔가 할때마다 삽질하는 것 같아서 정리해보았습니다.
아래 JSFiddle의 Result 탭에서 결과를 확인할 수 있습니다.
<html>
<form class="form-inline">
<div class="form-group">
<label for="expireDate" style="padding-right: 15px;">검색기간 </label>
<div class="input-daterange date" id="datepicker1" style="width: 320px; display: inline-table;">
<input type="text" class="form-control" id="sdate1" style="width: 115px;" />
<label class="date-range" for="sdate1">
<i class="glyphicon glyphicon-calendar"></i>
</label>
<span style="display: table-cell; padding: 0px 10px;"> ~ </span>
<input type="text" class="form-control" id="edate1" style="width: 115px; border-radius: 3px 0 0 3px;" />
<label class="date-range" for="edate1">
<i class="glyphicon glyphicon-calendar"></i>
</label>
</div>
</form>
<js>
!function(a) {
days : [ "일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일" ],
daysShort : [ "일", "월", "화", "수", "목", "금", "토" ],
daysMin : [ "일", "월", "화", "수", "목", "금", "토" ],
months : [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월",
"11월", "12월" ],
monthsShort : [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월",
"10월", "11월", "12월" ],
titleFormat : "yyyy년 MM", /* Leverages same syntax as 'format' */
}
}(jQuery);
$(document).ready(function() {
$('#datepicker1').datepicker({
format : "yyyy-mm-dd",
language : "kr",
autoclose : true,
todayHighlight : true
}).on('hide', function(e) {
e.stopPropagation(); // 모달 팝업도 같이 닫히는걸 막아준다.
});
var sdate1 = new Date();
sdate1.setDate(sdate1.getDate() - 7);
$("#sdate1").datepicker('setDate', sdate1);
$("#edate1").datepicker('setDate', new Date());
$('#datepicker1').datepicker('updateDates');
})
<css>
.date-range {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 4px;
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
cursor: pointer;
width: auto;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
}
반응형
'스크립트' 카테고리의 다른 글
| 자바스크립트 javascript uuid (0) | 2018.03.21 |
|---|---|
| 자바스크립트 한영변환 한영전환 (0) | 2018.02.07 |
| css 말줄임 표시 cut string truncate string (0) | 2018.01.31 |
| javascript long to date (0) | 2018.01.15 |
| javascript isArray (0) | 2018.01.12 |
| javascript 한글 초성, 중성, 종성 (2) | 2018.01.10 |
| maven 자주 사용하는 빌드 옵션 (0) | 2018.01.08 |
| javascript 정규식 생성 방법 (0) | 2018.01.07 |