jQuery时间控件
2024-05-18 03:09:51
时间控件
<!DOCTYPE html>
<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.dateinputer{line-height:40px;height:40px;margin:10px 0;border:1px solid #ccc;cursor: pointer;position:relative;/*top:10px;*//*left:20px;*/padding:0 6px;font-size:12px !important;}.flex-div{display: flex;justify-content: flex-start;align-items: flex-start;flex-flow: column;margin-left:30px;margin-top:20px;}</style>
</head><body>
<div class="flex-div"><span>date 单日选择器</span><a id="destroy">销毁日历</a><div id='date' class="dateinputer"></div>
</div>
<div class="flex-div"><span>datetime 单日加时间选择器</span><div id='datetime' class="dateinputer"></div>
</div>
<div class="flex-div"><span>month 月选择器</span><div id='month' class="dateinputer"></div>
</div>
<div class="flex-div"><span>year 年选择器</span><div id='year' class="dateinputer"></div>
</div>
<div class="flex-div"><span>daterange 日期区间选择器</span><div id='daterange' class="dateinputer"></div>
</div>
<div class="flex-div"><span>monthrange 月区间选择器</span><div id='monthrange' class="dateinputer"></div>
</div>
<div class="flex-div"><span>yearrange 年区间选择器</span><div id='yearrange' class="dateinputer"></div>
</div>
<div class="flex-div"><span>week 周选择器</span><div id='week' class="dateinputer"></div>
</div>
<div class="flex-div"><span>multiple 多日期选择器</span><div id='multiple' class="dateinputer"></div>
</div></body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="moment.js"></script>
<script type="text/javascript" src="xndatepicker.js"></script>
<script type="text/javascript">$('.vbtn').on('click',function(){console.log($('#year').val())})var date=new XNDatepicker($("#date"),{// format:'YYYY-MM-DD',type:'date',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'',// endTime:'2036-04-04',// minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值},function(data){console.log(data)},)$("#destroy").click(()=>{date.destroy();})var datetime=new XNDatepicker($("#datetime"),{// format:'YYYY-MM-DD',type:'datetime',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'',// endTime:'2036-04-04',// minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值},function(data){console.log(data)},)var month=new XNDatepicker($("#month"),{// format:'YYYY-MM-DD',type:'month',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'',// endTime:'2036-04-04',// minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值},function(data){console.log(data)},)var year=new XNDatepicker($("#year"),{format:'YYYY',type:'year',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'',// endTime:'2036-04-04',// minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值},function(data){console.log(data)},)/* endStartOne: endStartOne||'2022-04-21',endStartTwo: endStartTwo||'2022-12-21',startDateOne: startDateOne||'2022-03-21',startDateTwo: startDateTwo||'2022-05-21' */var daterange=new XNDatepicker($("#daterange"),{// format:'YYYY-MM-DD',type:'daterange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'2022-04-21',endTime:'2022-12-21',// minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值},function(data){console.log(data)},)var monthrange=new XNDatepicker($("#monthrange"),{// format:'YYYY-MM-DD',type:'monthrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'',// endTime:'2036-04-04',// minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值},function(data){console.log(data)},)var yearrange=new XNDatepicker($("#yearrange"),{// format:'YYYY-MM-DD',type:'yearrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'',// endTime:'2036-04-04',// minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值},function(data){console.log(data)},)var week=new XNDatepicker($("#week"),{// format:'YYYY-MM-DD',type:'week',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'',// endTime:'2036-04-04',// minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值},function(data){console.log(data)},)
var multiple=new XNDatepicker($("#multiple"),{// format:'YYYY-MM-DD',type:'multiple',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrangemultipleDates:[],//当为多选日期类型时的初始值startTime:'',// endTime:'2036-04-04',minDate:'2019-04-04',maxDate:'',separator:' 到 ',showType:'modal',linkPanels:false,//面板联动showClear:true,//是否显示清除按钮autoConfirm:true,showShortKeys:true,autoFillDate:true,//自动变更element里面的值
},function(data){console.log(data)
},)
</script></html>html+css+js文件
下载地址
转自jquery插件库
有什么问题，请多多指教，感谢！！！
jQuery时间控件相关推荐
- jQuery 时间控件推荐（1）
Aeron Calendar 一个强大.漂亮,基于Mootools开发的日期选择控件. Aeron Calendar JavaScript Time Picker 时间选择控件,可以通过拖动分 ...
- jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
- bootstrap-datetimepicker时间控件添加清除按钮
本文转自:https://blog.csdn.net/gyysmile/article/details/80226993 其实这位大神写的很好了,为什么我还要在写呢,因为我想写点东西了 最近测试部提出 ...
- 精确到秒的JQuery日期控件，jquery日历插件，jquery日期插件
2019独角兽企业重金招聘Python工程师标准>>> 效果图如下: 首先在页面中引用一下库: <link type="text/css" href=&qu ...
- bootstrap-datetimepicker时间控件
bootstrap-datetimepicker时间控件 使用layui的laydate时间控件无法很好地嵌入到bootstap布局中(具体参考日期和时间组件文档 - layui.laydate),因 ...
- HTML5超简单的日期时间控件
HTML5超简单的日期时间控件 时间都是宝贵的,尤其是开发人员,所以为了节省时间,我直接展示下效果,符合您的要求就采纳,不符合,就不用继续看了! 1.1 日期控件效果: 1.2 时间控件展示: 2.1 ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为"安徽中控"项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必 ...
- python+selenium：移除时间控件readonly属性，实现send_keys输入
参考博客: python+selenium:web端关闭时间控件readonly属性,可直接输入[今天][昨天][任意]时间 类似这样的时间戳控件: 可以看到控件有:readonly 属性[只读] 一 ...
- 从零开始学_JavaScript_系列（九）——dojo(2)（AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅）
如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载, ...
最新文章
- 类似c 的语言,类似C的脚本语言 little-lang
- Linux第四章自测习题——Linux系列学习笔记
- 《嵌入式Linux与物联网软件开发——C语言内核深度解析》一2.4 位运算构建特定二进制数...
- c++ eos智能合约开发_[EOS智能合约]第二节：用EOS开发一个To-do List小应用
- html a 点击防止刷新,a标签点击跳转页面不刷新的问题
- PL/SQL NOCOPY限制模式
- linux essid 异常,关于BSSID，ESSID讨论
- 纽微特反省：经常跑同一个客户，也没新东西看
- mysql 占比函数_MYSQL 八大优化方案
- lumion制作海上明月5.29
- 产品优化策略，有效提升产品自身竞争力，我赌你一定没用过
- 服务器封包协议号,DHCP协议的租约确认和封包格式
- 虚拟机操作工具--Xmanager5 下载/安装/使用
- 手机端网页设计尺寸大小
- 计算机教师职业幸福感,教师职业幸福感
- TechEd2011之游园录（1）
- 分析ctr模型效果的一些思路总结
- uefi启动解析:由原理到实例
- 香港的房价到底贵得有多吓人？用数据挖掘告诉你真相
- EDA技术 一：EDA技术概况及大规模可编程逻辑器件