经验分享程序开发文档资料数据资源其它资源

jQuery支持日期星期月份范围选择器代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery支持日期星期月份范围选择器代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery支持日期星期月份范围选择器代码

HTML代码(index.html):

<!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>
</body>
</html>

JS代码(range_picker.min.js):

/*! range-picker - v0.0.3 - 2016-03-22 */
!function(a){
	"use strict";
	"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}
(function(a){
	"use strict";
	function b(a){
	return"undefined"==typeof a}
function c(a,b){
	return a.replace(g,function(a,c){
	return b[c]}
)}
function d(a,c){
	if(b(c.startValue)||b(c.endValue))throw new Error("startValue and endValue is need");
	if(b(c.translateSelectLabel))throw new Error(" RangePicker:translateSelectLabel is need");
	this.__init(a,c)}
function e(a){
	this.__init(a)}
function f(a){
	this.__init(a)}
var g=/<%=\s*(\w+)\s*%>/g;
	d.prototype={
	constructor:d,__defaultOptions:{
	type:"single"}
,__template:"<div class='range-picker-wrapper'><div class='range-picker'><span class='not-select-process'></span><span class='label range-label'><%= startValue %></span><span class='label range-label end-label'><%= endValue %></span></div></div>",__init:function(b,c){
	this.__options=a.extend({
}
,this.__defaultOptions,c),this.__$containerElement=b,this.__render(),this.__$rangepickerElement=this.__$containerElement.find(".range-picker"),this.__addWidget(),this.__setContainerToWrapperWidget(),this.__setCursorInitialPosition(),this.__updateProcessBarView()}
,__render:function(){
	var a={
	startValue:this.__options.startValue,endValue:this.__options.endValue}
,b=c(this.__template,a);
	this.__$containerElement.html(b)}
,__addWidget:function(){
	var b=a.proxy(this.__handleLabelPositionChange,this);
	this.__selectCursors=[],this.__selectCursors.push(new e({
	positionChange:b}
)),"double"===this.__options.type&&this.__selectCursors.push(new e({
	positionChange:b}
)),this.__processBar=new f,this.__$rangepickerElement.append(this.__processBar.getJQueryElement());
	for(var c=0;
	c<this.__selectCursors.length;
	c++)this.__$rangepickerElement.append(this.__selectCursors[c].getJQueryElement());
	this.__setWidgetInitialValue()}
,__setWidgetInitialValue:function(){
	var a=this.__$rangepickerElement.width();
	if(this.__selectCursors[0].render(this.__options.translateSelectLabel(a,a)),!b(this.__selectCursors[1])){
	var c=this.__selectCursors[1];
	c.render(this.__options.translateSelectLabel(0,a))}
}
,__setCursorInitialPosition:function(){
	var a=this.__$rangepickerElement.width(),c=this.__selectCursors;
	c[0].updateArrowPosition(a),c[0].setTotalWidth(a),b(c[1])||(c[1].updateArrowPosition(0),c[1].setTotalWidth(a))}
,__setContainerToWrapperWidget:function(){
	var a=this.__$containerElement.find(".range-picker-wrapper"),c=this.__selectCursors,d=this.__$rangepickerElement.width(),e=-c[0].getJQueryElement().position().top;
	!b(c[1])&&-c[1].getJQueryElement().position().top>e&&(e=-c[1].getJQueryElement().position().top),a.css("paddingTop",e+"px");
	var f=c[0].getJQueryElement(),g=f.outerWidth()/2,h=null;
	c[0].render(this.__options.translateSelectLabel(0,d)),h=f.outerWidth()/2,c[0].render(this.__options.translateSelectLabel(d,d)),a.css({
	paddingLeft:h+"px",paddingRight:g+"px"}
)}
,__handleLabelPositionChange:function(a){
	this.__updateView(a.left)}
,__updateView:function(){
	this.__updateCursorView(),this.__updateProcessBarView()}
,__updateCursorView:function(){
	for(var a=0,b="",c=null;
	a<this.__selectCursors.length;
	a++)c=this.__selectCursors[a].getArrowPosition(),b=this.__options.translateSelectLabel(c.left,this.__$rangepickerElement.width()),this.__selectCursors[a].render(b)}
,__updateProcessBarView:function(){
	var a=this.__getCursorPosition(),b={
	left:a.start,right:this.__$rangepickerElement.width()-a.end}
;
	this.__processBar.updatePosition(b)}
,__getCursorPosition:function(){
	var a={
	start:0,startLabel:""}
,c=this.__selectCursors[0].getArrowPosition();
	return a.end=c.left,a.endLabel=c.positionLabel,b(this.__selectCursors[1])||(c=this.__selectCursors[1].getArrowPosition(),c.left>a.end?(a.start=a.end,a.startLabel=a.endLabel,a.end=c.left,a.endLabel=c.positionLabel):(a.start=c.left,a.startLabel=c.positionLabel)),a}
,__formatPositionValue:function(a,b){
	var c=this.__$rangepickerElement.width(),d=0;
	return a=a.replace(/\s+/,""),d="%"===a[a.length-1]?c*parseInt(a,10)/100:b+parseInt(a,10)}
,getSelectValue:function(){
	var a=this.__getCursorPosition();
	return a.totalWidth=this.__$rangepickerElement.width(),a}
,updatePosition:function(a,c){
	var d=this.__selectCursors;
	d[0].updateArrowPosition(this.__formatPositionValue(a,d[0].getArrowPosition().left)),b(d[1])||b(c)||d[1].updateArrowPosition(this.__formatPositionValue(c,d[1].getArrowPosition().left)),this.__updateView()}
}
,e.prototype={
	constructor:e,__defaultOptions:{
	positionChange:a.loop}
,__template:"<span class='label select-label'></span>",__init:function(b){
	this.__options=a.extend({
}
,this.__defaultOptions,b),this.__$element=a(this.__template),this.__bindDragEventHandler()}
,__bindDragEventHandler:function(){
	var b=this;
	this.__$element.on("mousedown",function(b){
	this.__rangepicker={
	isMouseDown:!0,mouseStartX:b.clientX,previousMoveDistance:0}
,a(this).css("zIndex",1e3)}
).on("mouseup",function(){
	this.__rangepicker=null,a(this).css("zIndex",1)}
).on("mousemove",function(a){
	this.__rangepicker&&this.__rangepicker.isMouseDown&&b.__handleDragEvent(a.clientX,this.__rangepicker)}
).on("mouseout",function(){
	a(this).css("zIndex",1),this.__rangepicker=null}
)}
,__handleDragEvent:function(a,b){
	var c=a-b.mouseStartX-b.previousMoveDistance;
	b.previousMoveDistance=a-b.mouseStartX;
	var d=this.__calculatePosition(c);
	this.updateArrowPosition(d),this.__options.positionChange(this.getArrowPosition(),this.__$element)}
,__calculatePosition:function(a){
	var b=this.__arrowPosition+a;
	return b>this.__totalWidth?b=this.__totalWidth:0>b&&(b=0),b}
,__updatePosition:function(a){
	for(var b in a)a.hasOwnProperty(b)&&this.__$element.css(b,a[b]+"px")}
,render:function(a){
	this.__$element.text(a)}
,updateArrowPosition:function(a){
	this.__arrowPosition=a,this.__updatePosition({
	left:a-this.__$element.outerWidth()/2}
)}
,getJQueryElement:function(){
	return this.__$element}
,getArrowPosition:function(){
	return{
	left:this.__arrowPosition,positionLabel:this.__$element.text()}
}
,setTotalWidth:function(a){
	this.__totalWidth=a}
}
,f.prototype={
	constructor:f,__template:"<span class='process'></span>",__init:function(){
	this.__$element=a(this.__template)}
,updatePosition:function(a){
	for(var b in a)a.hasOwnProperty(b)&&this.__$element.css(b,a[b]+"px")}
,getJQueryElement:function(){
	return this.__$element}
}
,a.fn.rangepicker=function(a){
	return new d(this,a)}
}
);
	//# sourceMappingURL=range_picker.min.js.map

CSS代码(range-picker.min.css):

.range-picker,.range-picker-wrapper{position:relative}
.range-picker .not-select-process{display:block;height:5px;background-color:#d1d6d0;border-top:1px solid #afb3bb;border-radius:3px}
.range-picker .process{position:absolute;height:5px;top:0;left:0;background-color:#20b426;border-radius:3px}
.range-picker .label{display:inline-block;padding:2px 4px;border-radius:5px;cursor:pointer}
.range-picker .range-label{margin-top:4px;background-color:#e1e4e9;color:#9ba0b9}
.range-picker .end-label{float:right}
.range-picker .select-label{display:block;position:absolute;z-index:0;bottom:100%;font-family:monospace;margin-bottom:4px;white-space:nowrap;background-color:#20b426;color:#fff}
.range-picker .select-label:after{content:"";position:absolute;top:100%;left:50%;width:0;height:0;margin-left:-4px;border:4px solid transparent;border-top-color:#20b426}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
39.55 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
39.55 KB
立即下载
廖黛琬馨
了解
打赏作者 鼓励作者
jquery特效5
最新结算
jQuery密码强度插件Power PWChecker js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery密码强度插件Power PWChecker js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery密码强度插件Power PWChecker js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery图片随机排序推拽代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图片随机排序推拽代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
C#获取磁盘或文件夹的空间信息(总大小,可用大小,已用大小)?
类型: .rar 金额: CNY 0.39￥ 状态: 待结算 详细>
C#获取磁盘或文件夹的空间信息(总大小,可用大小,已用大小)?
类型: .rar 金额: CNY 3.1￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章