时间和日期选择器
時間和日期選擇器
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>時間和日期選擇器</title><link rel="stylesheet" href="resources/layui/css/layui.css"> </head> <body style="padding: 20px"> <div class="layui-form"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">中文版</label><div class="layui-input-inline"><input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd"></div></div><div class="layui-inline"><label class="layui-form-label">國際版</label><div class="layui-input-inline"><input type="text" class="layui-input" id="test2" placeholder="yyyy年MM月dd日HH時mm分ss秒"></div></div><div class="layui-inline"><label class="layui-form-label">初始值</label><div class="layui-input-inline"><input type="text" class="layui-input" id="test3"placeholder="yyyy-MM-dd"></div></div><div class="layui-inline"><label class="layui-form-label">其它</label><div class="layui-input-inline"><input type="text" class="layui-input" id="test4"placeholder="yyyy-MM-dd"></div></div></div> </div> <script src="resources/layui/layui.js"></script> <script type="text/javascript">layui.use(['element', 'jquery', 'laydate'], function () {var $ = layui.jquery;var element = layui.element;var laydate = layui.laydate;laydate.render({elem: '#test1' //指定元素, type: 'date', range: "~"});laydate.render({elem: '#test2' //指定元素, type: 'datetime', format: 'yyyy年MM月dd日 HH時mm分ss秒'});laydate.render({elem: '#test3' //指定元素//,value:'2019-11-11' 指定具體的時間, value: new Date() //指定當前系統時間/* ,min:'2019-01-01',max:'2025-12-31' *//* ,min: -7,max: 7 */, type: 'time', min: '09:30:00', max: '17:30:00', trigger: 'click'});laydate.render({elem: '#test4' //指定元素, show: true, btns: ['confirm'], lang: 'cn', calendar: true,mark: {'0-0-15': '工資','0-9-1': '開學'}});}); </script> </body> </html>
?
總結
- 上一篇： 评分
- 下一篇： spring的发展||springboo