mui日期组件(原生日历样式)

需求:需要通过时间限定数据的查找范围,样式如下
在这里插入图片描述

<div class="mui-row" style="padding: 8px 8px 0 8px;">
		<div class="mui-col-sm-5" >	
			<input id='StartDate' type="text" class="mui-input-clear" placeholder="选择开始日期" >
		</div>
		<div class="mui-col-sm-1" style="text-align:center;">
			<span style=" font-weight:bold;margin-top: 10px;" class="mui-icon mui-icon-arrowthinright"></span>
		</div>
		<div class="mui-col-sm-4">
			<input id='EndDate' type="text" class="mui-input-clear contact" placeholder="选择结束日期" >
		</div>
		<div class="mui-col-sm-2" style="text-align: right;">
			<button id="SearchButton" type="button" class="mui-btn mui-btn-primary" style="background: #17acbb;border: #17acbb;margin-top: 4px;">搜索</button>
		</div>
	</div>

	var byId = function(id) {
		return document.getElementById(id);
	};
	//============================================================================
	//默认时间
	byId('StartDate').value = defaultDate().StartDate;
	byId('EndDate').value = defaultDate().EndDate;
	//选择开始日期			
	byId('StartDate').addEventListener('tap', function() {
		document.activeElement.blur();//收起虚拟键盘
		var sDate = byId('StartDate').value;
		var obj = {
			Id: 'StartDate',
			DefaultDate: sDate,
			maxDate: byId('EndDate').value
		}
		var PickDate = constants.PickDateTap(obj);				
		byId('StartDate').focus();
	});	 
	//选择结束日期		
	byId('EndDate').addEventListener('tap', function() {
		document.activeElement.blur();//收起虚拟键盘
		var eDate = byId('EndDate').value;
		var obj = {
			Id: 'EndDate',
			DefaultDate: eDate,
			minDate: byId('StartDate').value
		}
		var PickDate = constants.PickDateTap(obj);
		// byId('EndDate').focus();
	});	
	//=== 查询按钮 =========
	byId('SearchButton').addEventListener('tap', function() {
	});	
//日期格式的转换
function formatDate(date, fmt) {
	if (/(y+)/.test(fmt)) {
		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
	}
	var o = {
		'M+': date.getMonth() + 1,
		'd+': date.getDate(),
		'h+': date.getHours(),
		'm+': date.getMinutes(),
		's+': date.getSeconds()
	};
	for (var k in o) {
		if (new RegExp(`(${k})`).test(fmt)) {
		  var str = o[k] + '';
		  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
		}
	}
  
	function padLeftZero(str) {
		return ('00' + str).substr(str.length);
	}
	return fmt;
}

function defaultDate() {  
  //debugger  
  var now = new Date(); //当前日期
  var nowMonth = now.getMonth(); //当前月 
  var nowYear = now.getFullYear(); //当前年 
  //本月的开始时间
  var StartDate = new Date(nowYear, nowMonth, 1); 
  //本月的结束时间
  var EndDate = new Date(nowYear, nowMonth+1, 0);
  var date = {
    StartDate: formatDate(StartDate , 'yyyy-MM-dd'),
    EndDate: formatDate(EndDate , 'yyyy-MM-dd')
  };
  return date
}
//================================================
	/**
	 * 日期选择 constants.js
	 **/
	owner.PickDateTap = function(obj){
		var dDate = new Date();
		if(!mui.isEmpty(obj) && !mui.isEmpty(obj.DefaultDate)) {
			dDate = new Date(obj.DefaultDate);
		}	
		
		var minDate = '';
		if(!mui.isEmpty(obj.minDate)){
			minDate = new Date(obj.minDate);
			//console.log('minDate'+minDate);
		}
		var maxDate = '';
		if(!mui.isEmpty(obj.maxDate)){
			maxDate = new Date(obj.maxDate);
			//console.log('maxDate'+maxDate);
		}
		var byId = function(id) {
			return document.getElementById(id);
		};
		plus.nativeUI.pickDate(function(e) {
			var date = formatDate(e.date , 'yyyy-MM-dd');
			if(!mui.isEmpty(obj) && !mui.isEmpty(obj.Id) && !mui.isEmpty(byId(obj.Id))) {
				byId(obj.Id).value = formatDate(e.date , 'yyyy-MM-dd'); 
			}					
		}, function(e){	
			if(!mui.isEmpty(obj) && !mui.isEmpty(obj.Id) && !mui.isEmpty(byId(obj.Id))) {
				byId(obj.Id).value = formatDate(dDate , 'yyyy-MM-dd'); 
			}
		}, {
			title: "请选择日期",
			date: dDate,
			minDate: minDate,
			maxDate: maxDate
		});		
	};
	
	
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值