首页 > 代码库 > 日期控件封装

日期控件封装

/** * 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;

 

日期控件封装