Sha*_*aka 5 javascript jquery jquery-ui datepicker jquery-ui-datepicker
我的要求是允许用户在一个日历中选择多个日期范围,也不允许更改以前的日期选择.这怎么可能？下面是代码和小提琴的链接
HTML
<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">
脚本
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#sproid-bookingcondition-datefrom" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#sproid-bookingcondition-dateto" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
小智 -2
尝试这个
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.11.1.js"></script>
<script src="Scripts/jquery-ui-1.11.1.js"></script>
<script src="Scripts/jquery-ui.multidatespicker.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/jquery-ui.structure.css" rel="stylesheet" />
<link href="css/jquery-ui.theme.css" rel="stylesheet" />
<link href="css/pepper-ginder-custom.css" rel="stylesheet" />
<link href="css/prettify.css" rel="stylesheet" />
</head>
<body>
<input type="text" id="fromDate" />
<script>
$(function () {
$('#fromDate').multiDatesPicker();
});
</script>
</body>
</html>
您可以从链接https://sourceforge.net/projects/multidatespickr/下载js文件
| 归档时间： |
|
| 查看次数： |
14926 次 |
| 最近记录： |