日期控件封装

Posted 2020-08-14 Flying bird

/**
 * 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="$!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="$!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;