JQuery 时间插架
这个时间插件是在JQuery插件库下载的,不知道叫什么
使用方式真的很简单
下载地址
http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201608253912.html
<!-- 下面两个文件为日期控件需要 -->
<link rel="stylesheet" href="css/dcalendar.picker.css"/>
<script type="text/javascript" src="js/dcalendar.picker.js"></script>
//直接定义input标签即可
<input id='mydatepicker' type='text' style="width:228px;"/>
//实例化标签
<script type="text/javascript">
$('#mydatepicker').dcalendarpicker({
format:'yyyy-mm-dd'
});
</script>
第二个插件,也是项目中的用的插件
//引用JS Css 文件
<link rel="stylesheet" type="text/css" href="../style/laydate.css"/>
<script type="text/javascript" src="../js/laydate.js"></script>
//创建input标签 重点设置 readonly="readonly"
<input type="text" id="xkzqdsj1" class="txt" style="width:223px;line-height:30px;border:1px solid #ddd;" readonly="readonly" />
<script type="text/javascript">
//时间控件
!function(){laydate.skin('molv');//切换皮肤,请查看skins下面皮肤库laydate({elem: '#demo'});//绑定元素}();//日期范围限制var start = { elem: '#start', format: 'YYYY-MM-DD', min: laydate.now(), //设定最小日期为当前日期 max: '2099-06-16', //最大日期 istime: true, istoday: false, choose: function(datas){ end.min = datas; //开始日选好后,重置结束日的最小日期 end.start = datas //将结束日的初始值设定为开始日 }};var end = { elem: '#end', format: 'YYYY-MM-DD', min: laydate.now(), max: '2099-06-16', istime: true, istoday: false, choose: function(datas){ start.max = datas; }};laydate(start);laydate(end);laydate({ elem: '#clsj1', format: 'YYYY年MM月DD日', value:"2013年12月02号", festival: true, //显示节日 choose: function(datas){ //选择日期完毕的回调 }}); laydate({ elem: '#clsj2', format: 'YYYY年MM月DD日', value:"2013年12月02号", festival: true, //显示节日 choose: function(datas){ //选择日期完毕的回调 }});laydate({ elem: '#xkzqdsj1', format: 'YYYY年MM月DD日', value:"2013年12月02号", festival: true, //显示节日 choose: function(datas){ //选择日期完毕的回调 }}); laydate({ elem: '#xkzqdsj2', format: 'YYYY年MM月DD日', value:"2013年12月02号", festival: true, //显示节日 choose: function(datas){ //选择日期完毕的回调 }});</script>
本文地址:https://blog.csdn.net/yanpengfeil/article/details/79490320