프로젝트에서는 날짜 및 시간 범위 선택을 사용하여 데이터를 필터링해야 합니다. 처음에는 Laui의 시간 및 날짜 선택 플러그인을 사용했습니다. 그런데 IIE8을 처음 클릭했을 때 설정 형식 오류가 보고되었습니다. 오랫동안 연구해 왔지만 제가 작성한 데모는 IE8에서 실행될 수 있기 때문에 확실히layui에는 문제가 없습니다. ; 단지 내 프로젝트 환경에서 일부 코드가 충돌했기 때문에 부트스트랩 플러그인 daterangepicker로 전환했습니다. 나는 문서를 공식 웹사이트와 결합했습니다. 기본적으로 내 요약 코드를 모든 사람과 공유했습니다. daterangepicker 플러그인을 사용하는 초보자에게 도움이 되기를 바랍니다.
요약은 날짜 범위 선택 구현, 날짜 시간 선택, 두 개의 단일 달력을 사용하여 범위 선택 구현, 입력 대신 p를 사용하여 날짜 시간 선택 구현의 네 부분으로 나뉩니다. 다음은 코드
css 코드
<style type="text/css">
body,
ul,
p,
h3,
img,
input {
margin: 0;
padding: 0;
}
.box {
display: block;
text-align: center;
margin: 20px auto;
}
input {
width: 400px;
height: 40px;
}
label {
display: inline-block;
width: 90px;
line-height: 40px;
height: 40px;
margin: 0;
font-weight: normal;
font-family: "宋体";
background-color: #ddd;
}
.pDateSelect{
width: 185px;
height: 50px;
line-height: 50px;
margin:10px auto;
border:2px solid #ddd;
border-radius: 5px;
}
</style>로그인 후 복사
입니다.
html 코드:
<!-- 日期时间范围选择代码 -->
<p class="box">
<label for="datePicker">双日历</label>
<input type="text" name="datePicker" class="datePicker" id="datePicker">
</p>
<!-- 日期时间选择代码 -->
<p class="box">
<label for="singledatePicker">单日历</label>
<input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker">
</p>
<!-- 两个单日历实现日期时间范围选择代码 -->
<p class="box">
<label for="from">从</label>
<input type="text" name="from" class="from" id="from">
<label for="to">到</label>
<input type="text" name="to" class="to" id="to">
</p>
<!-- 不使用input,用p实现代码 -->
<p class="pDateSelect" id="pDateSelect">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</p>
로그인 후 복사
js 코드, 위쪽 및 아래쪽 순서로 html의 네 부분에 해당
$('input[name="datePicker"]').daterangepicker({
timePicker: true, //显示时间
timePicker24Hour: true, //时间制
timePickerSeconds: true, //时间显示到秒
startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
endDate: moment(new Date()), //设置结束器日期
maxDate: moment(new Date()), //设置最大日期
"opens": "center",
ranges: {
// '今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'上周': [moment().subtract(6, 'days'), moment()],
'前30天': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
applyLabel: '确定', //确定按钮文本
cancelLabel: '取消', //取消按钮文本
customRangeLabel: '自定义',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, function(start, end, label) {
timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
console.log(timeRangeChange);
});로그인 후 복사
$('input[name="singledatePicker"]').daterangepicker({
"autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
singleDatePicker: true, //单日历
showDropdowns: true, //年月份下拉框
timePicker: true, //显示时间
timePicker24Hour: true, //时间制
timePickerSeconds: true, //时间显示到秒
startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
maxDate: moment(new Date()), //设置最大日期
"opens": "center",
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
applyLabel: '确定', //确定按钮文本
cancelLabel: '取消', //取消按钮文本
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, function(start) {
console.log(start.format('YYYY-MM-DD HH:mm:ss'));
});로그인 후 복사
var minDate = null;
var max = null;
function fromDate(maxDate) {
if(!maxDate){
max = moment(new Date())
}else{
max = maxDate;
}
$('input[name="from"]').daterangepicker({
"autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
singleDatePicker: true, //单日历
showDropdowns: true, //年月份下拉框
timePicker: true, //显示时间
timePicker24Hour: true, //时间制
timePickerSeconds: true, //时间显示到秒
// startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
maxDate: max , //设置最大日期
"opens": "center",
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
applyLabel: '确定', //确定按钮文本
cancelLabel: '取消', //取消按钮文本
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, function(s) {
toDate(s);
});
}
fromDate()
function toDate(minDate) {
$('input[name="to"]').daterangepicker({
"autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
singleDatePicker: true, //单日历
showDropdowns: true, //年月份下拉框
timePicker: true, //显示时间
timePicker24Hour: true, //时间制
timePickerSeconds: true, //时间显示到秒
// startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
maxDate: moment(new Date()), //设置最大日期
minDate: minDate,
"opens": "center",
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
applyLabel: '确定', //确定按钮文本
cancelLabel: '取消', //取消按钮文本
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, function(s) {
fromDate(s)
});
}
toDate();로그인 후 복사
var start = moment(new Date());
function cb(start) {
$('#pDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss'));
}
$('#pDateSelect').daterangepicker({
"autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
singleDatePicker: true, //单日历
showDropdowns: true, //年月份下拉框
// timePicker: true, //显示时间
timePicker24Hour: true, //时间制
timePickerSeconds: true, //时间显示到秒
startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
maxDate: moment(new Date()), //设置最大日期
"opens": "center",
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
applyLabel: '确定', //确定按钮文本
cancelLabel: '取消', //取消按钮文本
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, cb);
cb(start);로그인 후 복사
렌더링:
첫 번째 부분:
두 번째 부분:
세 번째 부분은 두 번째 부분 그룹은 첫 번째 부분을 구현합니다. 시작 날짜가 결정된 후 종료 날짜 달력에 대한 최소 선택 날짜가 설정됩니다. ;
4부:
키 옵션 의미는 코드에 설명되어 있습니다. 가져온 파일 CSS에는 bootstrap의 CSS 파일이 포함되어 있습니다.
설명:
1 moment.js 배열의 indexOf() 메서드가 사용되지만 IE8에서는 이를 지원하지 않습니다. 코드 주소는 https://developer.mozilla.org/zh입니다. -CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf in 폴리필 다음
2 IE8에서 이중 달력 범위를 선택할 때 두 달력을 세로로 배열하는 문제가 있습니다. 두 개의 달력을 보관할 수 있는 상자의 너비를 고정한 다음 두 개의 달력을 넣습니다. 달력의 p를 float으로 설정하세요.
3 공식 웹사이트 주소; : http://www.daterangepicker.com/#options
예: http://www.daterangepicker.com/#examples
관련 추천:
선택기 날짜 및 시간 선택기에 대한 자세한 설명
vue.js 네이티브 iOS 시간 선택 구성 요소 구현
php-datepicker 시간 선택기, SQL 매개변수 쿼리
위 내용은 날짜 및 시간 범위 선택 플러그인 정보: daterangepicker 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
