CSS
<!-- Date Picker --> <link rel="stylesheet" href="https://cdn.rawgit.com/braverokmc79/Admin_Temp_LTE/master/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"> <!-- Daterange picker --> <link rel="stylesheet" href="https://cdn.rawgit.com/braverokmc79/Admin_Temp_LTE/master/bower_components/bootstrap-daterangepicker/daterangepicker.css">
추가한 부분은 다음과 같다.
주말 색깔 변경
.daterangepicker .table-condensed tbody tr td.available:first-child { color: red; } .daterangepicker .table-condensed tbody tr td.available:last-child { color: blue; } .daterangepicker .table-condensed tbody tr td.off { color: #999 !important; opacity:0.5; }
JS
<script src="https://cdn.rawgit.com/braverokmc79/Admin_Temp_LTE/master/bower_components/bootstrap-daterangepicker/daterangepicker2.js"></script>
나의 깃 허브 주소를 보면 다음과 같이 변경하였다.
this.locale = { direction: 'ltr', format: 'YYYY-MM-DD', separator: ' - ', applyLabel: '적용', cancelLabel: '취소', weekLabel: 'W', customRangeLabel: '사용자 설정', daysOfWeek: ['일', '월', '화', '수', '목', '금','토'], monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], firstDay: moment.localeData().firstDayOfWeek() };
HTML
<!-- Date and time range --> <div class="form-group"> <label></label> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" name="searchRange" id="searchRange" class="form-control pull-right" value=""> </div> <!-- /.input group --> </div> <!-- /.form group -->
다음 추가
<script> $(function () { $('#searchRange').daterangepicker({ ranges: { '오늘': [moment(), moment()], '어제': [moment().subtract('days', 1), moment().subtract('days', 1)], '지난 7일': [moment().subtract('days', 6), moment()], '지난 30 일': [moment().subtract('days', 29), moment()], '이번 달': [moment().startOf('month'), moment().endOf('month')], '지난 달': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')], } }, function (start, end) { }); }) </script>
댓글 ( 5)
댓글 남기기