项目中时间用的Jedate,很强大的一款原生JS控件,给大家共同分享。
官网:Jedate官网
使用
下载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;
}
刚刚使用,还没遇到什么坑,遇到坑再继续补充。