jQuery滑動拖動設置時間日期范圍選擇器代碼



134 535 179



特效描述: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

加群請備注:從官網了解到

老夫子电子