jQuery日期时间选择插件selectdate适配手机,界面简洁,demo结构清晰简单 日期时间选择器响应jQuery库的Web和移动端
首页 /  web前端 /  JavaScript /  jQuery特效 / selectdate-jQuery日期选择择插 html5(支持手机端)

0 1 268

selectdate-jQuery日期选择择插 html5(支持手机端)

jQuery日期时间选择插件selectdate适配手机,界面简洁,demo结构清晰简单 日期时间选择器响应jQuery库的Web和移动端

selectdate-jQuery日期选择择插 html5(支持手机端)_图一

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selectdate-日期选择控件(支持手机端)</title>
<link href="http://p.erlyun.com/favicon.ico" rel="shortcut icon">
<link href="css/itsqe.selectdate.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://p.erlyun.com/assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/itsqe.selectdate.js"></script>
<style type="text/css">
.gc_main {margin: 0 auto;width:100%;max-width: 500px;text-align: center;}
.main_content{margin-top:20px;}
.main_content input{margin:10px;width:200px;height:20px;line-height:20px;padding:5px;}
</style>
</head>
<body>
<div class="gc_main">
   <div class="main_content">
       <input type="text" class="selectdate" data-title="设置时间标题一"/>
       <input type="text" class="selectdate" data-title="设置时间标题二"/>
   </div>
</div>
<script type="text/javascript">
jQuery(function(){
	jQuery(".selectdate").selectdate({
		'title':'设置时间',
		'input_title':'data-title',//在input框中自定义标题
	});
});
</script>
</body>

itsqe.selectdate.js

jQuery.fn.extend({
	selectdate : function(data){
		
		this.click(function(){
			if(!isexists("#select_full_window")){
				var full_window = '<div id="select_full_window"></div>';
				jQuery('body').append(full_window);
			}
			var title = '设置时间';
			if(typeof(data['title']) !== 'undefined'){
				title = data['title'];
			}
			if(typeof(data['input_title']) !== 'undefined'){
				var input_title = data['input_title'];
				if(jQuery(this).attr("input_title") != ""){
					title = jQuery(this).attr(input_title);
				}
			}
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var str = '<div class="select_gc_main">'+
			               '<div class="select_content">'+
					           '<div class="select_content_title">'+
					               '<h2>'+title+'</h2>'+
					               '<i class="iconfont icon-close close"></i>'+
					           '</div>'+
					           '<div class="select_content_main fn-clear">'+
					              '<select class="select_year">'+
					                   make_select_option_year()+
					              '</select>'+
					              '<select class="select_month">'+
					                   make_select_option_month()+
					              '</select>'+
					              '<select class="select_day">'+
					                  make_select_option_day(year,month)+
					              '</select>'+
					              '<select class="select_hour">'+
					                    make_select_option_hour()+ 
					              '</select>'+
					              '<select class="select_minute">'+
					                    make_select_option_minute()+
					              '</select>'+
					           '</div>'+
					           '<div class="select_content_bottom fn-clear">'+
					               '<button class="transition select_button_case">取消</button>'+
					               '<button class="transition select_button_sure">确定</button>'+
					           '</div>'+
					       '</div>'+
					   '</div>';
			jQuery("#select_full_window").html(str).show();
			select_year_month_do();
			select_date_close(jQuery(this));
			select_date_sure(jQuery(this));
		});
		function select_date_sure(thisobj){
			//2018-06-18 19:23:51
			jQuery("#select_full_window .select_button_sure").click(function(){
				var str = jQuery(".select_year").val() + '-' + jQuery(".select_month").val() + '-' +jQuery(".select_day").val() + ' ' + jQuery(".select_hour").val() + ':' + jQuery(".select_minute").val() + ':' + '00';
				thisobj.val(str);
				thisobj.focus();
				jQuery("#select_full_window").hide();
			})
			
		}
		function select_date_close(thisobj){
			jQuery("#select_full_window .select_button_case,#select_full_window .icon-close").unbind().click(function(){
				jQuery("#select_full_window").hide();
				thisobj.focus();
			});
		}
		function select_year_month_do(){
			jQuery(".select_month").change(function(){
				var year = jQuery(".select_year").val();
				var month = jQuery(this).val();
				var str = make_select_option_day(year,month);
				jQuery(".select_day").html(str);
			});
			jQuery(".select_year").change(function(){
				var year = jQuery(this).val();
				var month = jQuery(".select_month").val();
				var str = make_select_option_day(year,month);
				jQuery(".select_day").html(str);
			});
		}
		function make_select_option_year(){
			var date = new Date();
			var year = date.getFullYear();
			var str = make_select_option(year-1,year+1,'年',year);
			return str;
		}
		function make_select_option_month(){
			var date = new Date();
			var month = date.getMonth() + 1;
			var str = make_select_option(1,12,'月',month);
			return str;
		}
		function make_select_option_day(year,month){
			var year = Number(year);
			var month = Number(month);
			var date = new Date();
			var day = date.getDate();
			var day31 = [1,3,5,7,8,10,12];
			var max = 30;
			if(month == 2){
				if(isleapyear(year)){
					max = 29;
				}else{
					max = 28;
				}
			}else{
				if(jQuery.inArray(month,day31) >= 0){
					max = 31;
				}
			}
			var str = make_select_option(1,max,'日',day);
			return str;
		}
		function make_select_option_hour(){
			return make_select_option(0,23,'时');
		}
		function make_select_option_minute(){
			return make_select_option(0,59,'分');
		}
		function make_select_option(min,max,name,selected){
			var str = '';
			var std = false;
			if(selected !== 'undefined'){
				std = selected;
			}
			if(std){
				for(i=min;i<=max;i++){
					var str_std = '';
					if(i == std){
						str_std = 'selected="selected" ';
					}
					var two_i = select_option_two_digits(i);
					str = str + '<option '+str_std+'value="'+two_i+'">'+two_i+name+'</option>';
				}
			}else{
				for(i=min;i<=max;i++){
					var two_i = select_option_two_digits(i);
					str = str + '<option value="'+two_i+'">'+two_i+name+'</option>';
				}
			}
			return str;
		}
		function isleapyear(year){
			if(year % 4 == 0 && year % 100 !=0){
				return true;
			}else if(year % 400 == 0){
				return true;
			}
			return false;
		}
		function isexists(a){
			return 0<jQuery(a).length?!0:!1
		}
		function select_option_two_digits(i){
			var i = Number(i);
			if(i < 10){
				return '0'+i;
			}
			return i;
		}
	},
});

itsqe.selectdate.css

@CHARSET "utf-8";
#select_full_window{display:none;height:100%; position:fixed; z-index:2000; width:100%; top:0px; left:0px; background:rgba(0,0,0,.5); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#7f000000", EndColorStr="#7f000000");}
#select_full_window:not(s){filter:none;}
#select_full_window .select_gc_main{position: relative;margin: 0 auto;width: 100%;max-width: 60rem;height: 100%;}
#select_full_window .select_gc_main .select_content{position: absolute;width:100%;height:191px;top:20px;top:calc((100% - 191px)/5);background: #fff;}
#select_full_window .select_gc_main .select_content .select_content_title{height:40px;line-height:40px;padding-left:15px;position: relative;}
#select_full_window .select_gc_main .select_content .select_content_title h2{font-size:0.875rem;}
#select_full_window .select_gc_main .select_content .select_content_title .iconfont{position: absolute;color:#818a91;cursor: pointer;}
#select_full_window .select_gc_main .select_content .select_content_title .iconfont:hover{color:#4080f8;}
#select_full_window .select_gc_main .select_content .select_content_bottom{height: 3.1875rem;border-top: 0.0625rem #ececec solid;}
#select_full_window .select_gc_main .select_content .select_content_bottom button{float:left;width:50%;background:#f8f9fa;border: 0 none;height:100%;}
#select_full_window .select_gc_main .select_content .select_content_bottom button:hover{background: #dae0e5;border-color: #d3d9df;}
#select_full_window .select_gc_main .select_content .select_content_bottom button.select_button_case{border-right: 0.0625rem #ececec solid;color: #666;width:50%;width:calc(50% - 1px);}
#select_full_window .select_gc_main .select_content .select_content_bottom button.select_button_sure{color:#4080f8;}
#select_full_window .select_gc_main .select_content .select_content_main{padding-left:15px;padding-right:12px;height:80px;margin-top:20px;}
#select_full_window .select_gc_main .select_content .select_content_main select{float:left;width:19%;width:calc((100%-27px)/5 - 3px);margin-right:3px;vertical-align: middle;height: 2.0625rem;border: 0.0625rem solid #c6d1d9;border-radius: 0.1875rem;}
.close{width:9px; height:9px; position:absolute; top:7px; right:9px; text-indent:-9999px; background:url(img/close.png) no-repeat 0 0;}
下载所需:0 金币 下载 演示

[来源] http://yuanmouren.erlyun.com/p.php?id=48

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

容若 2018-06-19 19:52
10
送花
20积分一朵