欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery 时间插架

程序员文章站 2022-03-13 17:13:30
这个时间插件是在JQuery插件库下载的,不知道叫什么使用方式真的很简单下载地址http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201608253912.html<!-- 下面两个文件为日期控件需要 --><link rel="stylesheet" href="css/dcalendar.p......

这个时间插件是在JQuery插件库下载的,不知道叫什么

使用方式真的很简单

下载地址

http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201608253912.html

JQuery 时间插架

<!-- 下面两个文件为日期控件需要 -->
<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>

 

第二个插件,也是项目中的用的插件

 

JQuery 时间插架

//引用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