这个是一个网页中常见的日历选择器
一、要求
1.不能选择今天之前和30天以后的日期 2.结束日期不能小于开始日期。如果选择了结束日期小于开始日期，则开始日期为 结束日期-1。
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document
</title>
<link rel="stylesheet" type="text/css" href="jq/jquery-ui.min.css" />
</head>
<style type="text/css">
</style>
<body>
<div id="time" class="box">
<h3>time
</h3>
<div id="demo">
</div>
</div>
<div id="calendar" class="box">
<h3>calendar
</h3>
<p>开始时间：
<input type="text" id="enter" />
结束时间：
<input type="text" id="leave" /></p>
</div>
</body>
</html>
<script type="text/javascript" src="jq/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jq/jquery-ui.min.js"></script>
<script type="text/javascript" src="jq/ui-CH.js"></script>
<script>
$(function() {
function getT() {
var date = new Date();
document.getElementById('demo').innerHTML = showTime(date);
}
function showTime(date) {
var yy = date.getFullYear();
var mm = date.getMonth() + 1;
var dd = date.getDate();
var hh = date.getHours();
var ii = date.getMinutes();
var ss = date.getSeconds();
var ww = date.getDay();
if(ww == 0) ww = '星期日';
if(ww == 1) ww = '星期1';
if(ww == 2) ww = '星期2';
if(ww == 3) ww = '星期3';
if(ww == 4) ww = '星期4';
if(ww == 5) ww = '星期5';
if(ww == 6) ww = '星期6';
mm = getFormatDate(mm);
dd = getFormatDate(dd);
hh = getFormatDate(hh);
ii = getFormatDate(ii);
ss = getFormatDate(ss);
return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + ii + ':' + ss + ' ' + ww;
}
function getFormatDate(arg) {
if (arg == undefined || arg == '') {
return '';
}
var re = arg + '';
if (re.length < 2) {
re = '0' + re;
}
return re;
}
function tick() {
getT();
setInterval(getT, 1000);
}
tick();
$('#enter').datepicker({
minDate: 0,
maxDate: +30
});
$('#leave').datepicker({
minDate: 1,
maxDate: +30
});
$('#enter').val( getD() );
$('#leave').val( addDate( getD(), 1) );
$('#enter').on('change',function() {
if( compareDateTime( $(this), $('#leave') ) ){
$('#leave').val( addDate($(this).val(), 1));
}
});
$('#leave').on('change',function() {
if( compareDateTime( $('#enter'), $(this) ) ){
$('#enter').val( addDate($(this).val(), -1));
}
});
function getD(){
var date = new Date();
var yy = date.getFullYear();
var mm = date.getMonth() + 1;
var dd = date.getDate();
if(mm < 10) {
mm = '0' + mm;
}
if(dd < 10) {
dd = '0' + dd;
}
return yy +'-'+ mm +'-'+ dd;
}
function compareDateTime(CheckInDate, CheckOutDate) {
var inDate = new Date( CheckInDate.val().replace(/-/g, "/") );
var outDate = new Date( CheckOutDate.val().replace(/-/g, "/") );
startDate = Date.parse(inDate);
endDate = Date.parse(outDate);
if( startDate >= endDate ){
return true;
}
return false
}
function addDate(date, days) {
if (days == undefined || days == '') {
days = 1;
}
var date = new Date( date.replace(/-/g, "/") );
date.setDate(date.getDate() + days);
var month = date.getMonth() + 1;
var day = date.getDate();
return date.getFullYear() + '-' + getFormatDate(month) + '-' + getFormatDate(day);
}
});
</script>
转载请注明原文地址: https://ju.6miu.com/read-24963.html
