首页 > 代码库 > 日期控件封装
日期控件封装
/** * Created by joan on 16/10/12. */var $ = require(‘jquery‘), Calendar = require(‘hermes-calendar‘);/** * html 示例如下 * <div class="jui-form-item J_timeFormItem"> * <label class="jui-input-label"><span class="jui-label-required">时间</span></label> * <span class="time-descripte fn-mr5">从:</span><input readonly="readonly" placeholder="2015-10-02 09:12" type="text" class="jui-input" name=‘startTime‘ id="J_startTime" value="http://www.mamicode.com/$!servicePromotionVO.startTimeStr"> * <span class="time-descripte fn-ml5 fn-mr5">至:</span><input readonly="readonly" placeholder="2015-10-10 19:21" type="text" class="jui-input" name=‘endTime‘ id="J_endTime" value="http://www.mamicode.com/$!servicePromotionVO.endTimeStr"> * <div class="jui-form-tip J_timeTip ft-error"> * </div> *</div> * * 调用方式 * 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;
日期控件封装
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。