<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery数值日期星期月份范围选择器代码</title>
<link href="css/range-picker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper" style="width: 400px; margin: 10px auto; padding: 40px; background-color: #fff;">
<div id="date_range"></div>
<div id="number_range" style="margin-top: 50px;"></div>
<div id="week_range" style="margin-top: 75px"> </div>
<div id="month_range" style="margin-top: 50px"> </div>
<div id="double_date_range" style="margin-top: 75px;"></div>
<div id="double_number_range" style="margin-top: 50px;"></div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/range_picker.js" type="text/javascript"></script>
<script type="text/javascript">
;(function() {
"use strict";
function dateFormat(date, fmt) {
var o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
};
if (/(y+)/.test(fmt)){
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
var startDate = new Date("2016/11/12"),
endDate = new Date("2016/12/22"),
offset = endDate - startDate;
var d1 = $("#date_range").rangepicker({
startValue: dateFormat(startDate, "yyyy/MM/dd"),
endValue: dateFormat(endDate, "yyyy/MM/dd"),
translateSelectLabel: function(currentPosition, totalPosition) {
var timeOffset = offset * ( currentPosition / totalPosition);
var date = new Date(+startDate + parseInt(timeOffset));
return dateFormat(date, "yyyy/MM/dd");
}
});
var result = d1.getSelectValue();
console.info(result);
window.hello = $("#double_date_range").rangepicker({
type: "double",
startValue: dateFormat(startDate, "yyyy/MM/dd"),
endValue: dateFormat(endDate, "yyyy/MM/dd"),
translateSelectLabel: function(currentPosition, totalPosition) {
var timeOffset = offset * ( currentPosition / totalPosition);
var date = new Date(+startDate + parseInt(timeOffset));
return dateFormat(date, "yyyy/MM/dd");
}
});
console.info(hello.getSelectValue());
$("#number_range").rangepicker({
startValue: 0,
endValue: 100,
translateSelectLabel: function(currentPosition, totalPosition) {
return parseInt(100 * (currentPosition / totalPosition));
}
});
$("#double_number_range").rangepicker({
type: "double",
startValue: 0,
endValue: 100,
translateSelectLabel: function(currentPosition, totalPosition) {
return parseInt(100 * (currentPosition / totalPosition));
}
});
var week = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"];
$("#week_range").rangepicker({
type: "double",
startValue: week[0],
endValue: week[6],
translateSelectLabel: function(currentPosition, totalPosition) {
var index = parseInt(6 * (currentPosition / totalPosition));
return week[index];
}
});
var month = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
$("#month_range").rangepicker({
type: "double",
startValue: month[0],
endValue: month[11],
translateSelectLabel: function(currentPosition, totalPosition) {
var index = parseInt(11 * (currentPosition / totalPosition));
return month[index];
}
});
}());
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery数值日期星期月份范围选择器代码.zip
版权申诉
164 浏览量
2023-09-21
00:22:04
上传
评论
收藏 41KB ZIP 举报
jQuery数值日期星期月份范围选择器代码.zip （6个子文件） 
js 
range_picker.js 13KB jquery-1.11.0.min.js 94KB range_picker.min.js 6KB css range-picker.css 1KB range-picker.min.css 848B
index.html 4KB资源评论
