当前位置: 移动技术网 > IT编程>网页制作>HTML > JQuery 时间插架

JQuery 时间插架

2020年07月17日  | 移动技术网IT编程  | 我要评论

这个时间插件是在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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网