jQuery滑动拖动设置时间日期范围选择器代码



129 514 172



特效描述:jQuery滑动拖动 设置时间日期 范围选择器,jQuery时间日期范围选择器,滑动拖动选择器代码(不兼容IE6,7,8浏览器)

代码结构

1. 引入CSS

<link href="css/range-picker.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/range_picker.js" type="text/javascript"></script>

3. HTML代码

<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 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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 拖动 拖拽 拖动插件 拖拽插件 滑动星星打分 日期时间 时钟 日历 时间 日历插件 时间日期插件 其他 时间轴 竖直时间轴 横向时间轴 文字拖动 文字拖拽 时间日期插件 时间日期 文字滑动 文字滑块 进度条 进度条插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到