微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
23.Datebox日期输入框组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Datebox</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Datebox.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
</script>
</head>
<body style="padding: 100px;">
<%--class加载方式--%>
<%--<input type="text" class="easyui-datebox" required = 'required'>--%>
<input id="box" type="text">
</body>
</html>
$(function () {
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
text: '新增',
handler: function(target){
alert('新增');
}
});
$('#box').datebox({
required:true,
panelWidth:200,
panelHeight:200,
// currentText:'Today',
// closeText:'close',
// okText:'ok',
//禁用
// disabled:true,
// buttons:buttons,
formatter : function (date) {
// //格式化
return date.getFullYear() + '-' + (date.getMonth() + 1) +
'-' + date.getDate();
// return date;
},
parser : function (s) {
// return new Date(2015,6,1);
}
});
//获得日历控件
$("#box").datebox('calendar').calendar({
firstDay:1,
});
$("#box").datebox('setValue','2018-08-08');//测试没有通过
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
