时间控件-Jedate

项目中时间用的Jedate，很强大的一款原生JS控件，给大家共同分享。

使用
下载Jedate，解压后放到代码的js文件下，然后引入js和css即可。
在这里插入图片描述

页面样式展示
在这里插入图片描述

jsp页面

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <title>群发消息</title>
    <%@ include file="/commons/common.jspf"%>
    <link rel="stylesheet" href="${ctx}/css/jquery.datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/mricode.pagination.css">
    <link rel="stylesheet" href="${ctx}/js/lib/jedate-6.0.2/skin/jedate.css">
    <script type="text/javascript" src="${ctx}/js/lib/jquery.datetimepicker.js"></script>
    <script type="text/javascript" src="${ctx}/js/lib/jedate-6.0.2/jquery.jedate.js"></script>
</head>
<body>
   <div class="mt12">
    <span class="b_label lab_wid1 mt6 fl">发送时间</span>
    <span timeradio="1" class="timeType checkBtn radio mr20 on" data-i="0">立即发送</span>
    <span timeradio="2" class="timeType checkBtn radio" data-i="1">设定时间</span>
    <input type="text" class="inpW  inpWid2 input-timer timer" id="time" placeholder="" name="time"/>
</div>

<script>
    var initDate=getInitTimePlugin();//初始化时间插件
/script>
</body>

设置时间控件，可以自由变化皮肤和语言等等其他功能。

/**
 * 初始化时间日期插件
 */
function getInitTimePlugin() {
    /**
     * 初始化时间控件
     * @param timeId   时间id
     */
    unction(timeId) {
        var dateFormat = "Y-m-d H:m:s";
        var today = new Date();
        var mouth = today.getMonth() + 1;
        var day = today.getDate();
        var dateTime = new Date().sformat("yyyy-MM-dd");
        var date = dateTime;
        timeId = "#" + timeId;
        $(timeId).jeDate({
            skinCell: "jedateblue",                      //日期风格样式，默认蓝色
            format: "YYYY-MM-DD hh:mm:ss",
            isinitVal: false,                            //是否初始化时间，默认不初始化时间
            initDate: [
                {
                    YYYY: today.getFullYear(),
                    MM: today.getMonth() + 1,
                    DD: today.getDate(),
                    hh: "00",
                    mm: "00",
                    ss: "00"
                }, false
            ],
            //日期 中文 语言设置
            language: {                                  //多语言设置
                name: "cn",
                month: ["01", "02", "03", "04", "05", "06", "07", "08",
                    "09", "10", "11", "12"],
                weeks: ["日", "一", "二", "三", "四", "五", "六"],
                times: ["小时", "分钟", "秒数"],
                titText: "请选择日期时间",
                clear: "清空",
                today: "今天",
                yes: "确定",
                close: "关闭"
            }
        });
        $(timeId).val(dateTime);
    }
    return initDateTimer;
}

刚刚使用，还没遇到什么坑，遇到坑再继续补充。

猜你喜欢