仙女日期选择器,支持多种日历模式,支持周选择,样式简洁大方,使用简单,无需二次开发,拿来即用。此选择器比较了市面上各种不同的日期时间选择器,争取最大化的支持各种需要的功能。
目前支持的选择器类型有:
单日期选择
单日期时间选择
日期/日期时间区间选择
单月选择
月份区间选择
单年度选择
年度区间选择
按周选择
多日期选择
后续还将增加其他的类型和配置,敬请期待哦!
使用步骤
下载代码,引用js
<scriptsrc="jquery-1.10.2.js"></script><scriptsrc="moment.js"></script><scripttype="text/javascript"src="xndatepicker.js"></script>
初始化选择器
vardate=newXNDatepicker($("#date"),//日历容器,可以是input,或其他标签{type:'daterange',日历类型date,datetime,daterange,datetimerange,month,monthrange,year,yearrange,week,multipleshowWeek:true,//是否显示周几placeholder:'请选择',shortList:[],//快捷选项,不写使用默认快捷选项locale:{month:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月',],monthHead:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],week:['日','一','二','三','四','五','六'],clear:'清空',confirm:'确定',yearHeadSuffix:'年'},//显示信息confirmFirst:true,//第一次就搜索separator:'到',//双日历模式下的链接符showType:'modal',//显示样式linkPanels:false,//双日历面板联动showClear:true,//是否显示清除按钮autoConfirm:true,//单日历模式,和周日历模式,是否自动确定showShortKeys:true,//是否显示快捷选项autoFillDate:true,//自动变更element里面的值,如果自动变更,则按照插件样式显示firstDayOfWeek:7,//周起始日1-7theme:'default',//主题multipleDates:[],//当为多选日期类型时的初始值startTime:'',//初始开始时间endTime:'',//初始结束时间minDate:'',//最小时间maxDate:'',//最大时间},function(data){//选择日期后的回调函数console.log(data)},)方法
销毁实例
fcolorpicker.destroy()
示例代码请参考 src/index.html
后续功能点
移动端的支持
多主题的支持
产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;
日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉;
本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;
部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入;
如若转载,请注明出处:https://www.chanpinyuan.cn/35846.html;