博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
日期控件封装
阅读量:4693 次
发布时间:2019-06-09

本文共 6020 字,大约阅读时间需要 20 分钟。

/** * Created by joan on 16/10/12. */var $ = require('jquery'),    Calendar = require('hermes-calendar');/** * html 示例如下 * 
*
*
从:
*
至:
*
*
*
* * 调用方式 * newCalendar.init({ * errorItem : $('.ft-error'), //控件展示错误提示信息的区域 * juiFormItem : $('.J_timeFormItem'), //控件jui-form-item节点 * startTime : $('#J_startTime').val(), //开始时间 * endTime : $('#J_endTime').val() //结束时间 * }); * * 对象包含如下方法 * @type {
{init: newCalendar.init, showErr: newCalendar.showErr, hideErr: newCalendar.hideErr, initCalendar: newCalendar.initCalendar, getNowTime: newCalendar.getNowTime, checkTime: newCalendar.checkTime}} */var newCalendar = { init:function(params){ this.initCalendar(params);//初始化Canlendar }, /** * 校验错误信息展示 * @param errorItem {Object Object}[错误信息dom节点] * @param juiFormItem {Object Object}[控件item] * @param err {Object String}[错误信息字符串] */ showErr:function(errorItem,juiFormItem,err){ errorItem.html(err||''); if(!juiFormItem.hasClass('jui-form-item-error')){ juiFormItem.addClass('jui-form-item-error');//出错input框红色高亮显示 } }, /** * 校验错误信息展示 * @param errorItem {Object Object}[错误信息dom节点] * @param juiFormItem {Object Object}[控件item] * @param err {Object String}[控件默认提示信息] */ hideErr:function(errorItem,juiFormItem,err){ errorItem.html(err||''); if(juiFormItem.hasClass('jui-form-item-error')) { juiFormItem.removeClass('jui-form-item-error');//出错input框红色高亮显示 } }, /** * 初始化时间选择控件 */ initCalendar:function(params){ var self = this, errorItem = params.errorItem, juiFormItem = params.juiFormItem, // 时间选择 nowTime = self.getNowTime(); // 开始时间 var startCalendar = new Calendar({ trigger: "#J_startTime", format: "YYYY-MM-DD HH:mm", range: [nowTime.date,null], events: { 'click [data-role=confirm]': function(ev) { var showTime = this.getTime().format(this.get('format')), endTime = params.endTime; this.output(showTime); this.hide(); if(!!endTime){
//存在结束时间才触发校验 if (!self.checkTime(params)) { return; } } } } }); // 结束时间 var endCalendar = new Calendar({ trigger: "#J_endTime", format: "YYYY-MM-DD HH:mm", range: [nowTime.date,null], events: { 'click [data-role=confirm]': function(ev) { var showTime = this.getTime().format(this.get('format')), startTime = juiFormItem.startTime; this.hide(); if(!startTime){ self.showErr(errorItem,juiFormItem,'请先选择开始时间'); return; } this.output(showTime); if (!self.checkTime(params)) { return; } } } }); //重新设置时间选择范围 startCalendar.on('selectDate', function (date) { endCalendar.range([date,null]); }); }, /** 获取当前时间 * @timeStr 自定义时间,格式支持时间辍或类型2015-12-12 12:38 */ getNowTime: function(timeStr) { var formatVal = function(val) { return val > 9 ? val : '0'+val; }, nowTime = timeStr ? new Date(timeStr) : new Date(), nowYear = nowTime.getFullYear(), nowMonth = formatVal(nowTime.getMonth() + 1), nowDate = formatVal(nowTime.getDate()), nowHour = formatVal(nowTime.getHours()), nowMin = formatVal(nowTime.getMinutes()), // 2016-9-28 localeDate = nowYear+'-'+nowMonth+'-'+nowDate, // 12:38 times = nowHour+':'+nowMin; return { time: nowTime, date: localeDate, times: times, hour: nowHour, min: nowMin } }, /** * 验证开始时间小于结束时间 */ checkTime: function(params) { var self = this, errorItem = params.errorItem, juiFormItem = params.juiFormItem, timeVal = function(str) { var result = new Date(str.replace(/-/g,'/')).getTime(); return result; }, startTimeStr = params.startTime, startTime = timeVal(startTimeStr), endTimeStr = params.endTime, endTime = timeVal(endTimeStr); if (!startTime){ self.showErr(errorItem,juiFormItem,'请输入开始时间'); return false; } if(!endTime){ self.showErr(errorItem,juiFormItem,'请输入结束时间'); return false; } if(startTime >= endTime) { self.showErr(errorItem,juiFormItem,'结束时间需大于开始时间'); return false; } self.hideErr(errorItem,juiFormItem,''); return true; }}newCalendar.init({ errorItem : $('.ft-error'), //控件展示错误提示信息的区域 juiFormItem : $('.J_timeFormItem'), //控件jui-form-item节点 startTime : $('#J_startTime').val(), //开始时间 endTime : $('#J_endTime').val() //结束时间 });module.exports = newCalendar;

 附:标准时间转换函数

// 中国标准时间 转换函数 JS getFormat :function(time, format) {  // if (typeof time === 'Array') {
var t = new Date(time); var tf = function (i) { return (i < 10 ? '0' : '') + i; }; return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) { switch (a) { case 'yyyy': return tf(t.getFullYear()); case 'MM': return tf(t.getMonth() + 1); case 'mm': return tf(t.getMinutes()); case 'dd': return tf(t.getDate()); case 'HH': return tf(t.getHours()); case 'ss': return tf(t.getSeconds()); } });}

 

转载于:https://www.cnblogs.com/weilantiankong/p/5956147.html

你可能感兴趣的文章
深入了解VC++编译器【转】
查看>>
响应式图片
查看>>
如何选择 compileSdkVersion, minSdkVersion 和 targetSdkVersion
查看>>
iOS音频播放(一):概述
查看>>
Android之使用AchartEngineActivity引擎绘制柱状图、曲线图
查看>>
android对象巧用Android网络通信技术,在网络上直接传输对象
查看>>
android下载手动下载Android SDK
查看>>
oracle12c(oracle12.1.0.1.0)安装指南--实测OEL5.9(RH5)
查看>>
北京邮电大学 程序设计课程设计 电梯 文件输入版本(已调试,大致正确运行==)...
查看>>
HashMap的两种排序方式
查看>>
Spring的第一个例子
查看>>
从Firefox升级说学习方法
查看>>
C++学习:任意合法状态下汉诺塔的移动(原创)
查看>>
【杂文】记一些有用的神奇网站
查看>>
什么是“闭包”(closure)为什么要用它?
查看>>
log4j2简单使用
查看>>
wget使用小技巧
查看>>
学霸修炼的秘籍
查看>>
Duplicate 复制数据库 搭建Dataguard
查看>>
Java导入execl
查看>>