纯手工打造的日期选择器xy-date-picker的原理及使用

最近花了将近两周的空闲时间，做了一个日期选择组件。我们先来看看效果。可以说是经常用，很少用。人们会主动实现的组件。毕竟实现起来需要一定的时间，所以大家可以在工作之余尝试自己搭建一些基础的组件库，既可以锻炼自己的基本功，也可以为公司和社区做贡献~一起来看看吧在使用第一。建议查看文档。它可以实时交互安装。通常有以下几种安装方式npmnpmixy-uicdngithub直接从github上拷贝源码。使用标签，开箱即用，它可能是最方便使用的日期选择器。实现原理这里简单介绍一下日期的生成原理。实现一个月的显示，一般分为三部分，分别是上月、本月、下月。为此，我们需要知道1.上个月的最后一天2.当月的天数和当月的第一天是星期几（容易放置）如果最后一天上个月是31号，当月的第一天是星期二，总天数是30，那么这个月的安排是确定第几天一二三四五六3031123456789101112131415161718192021222324252627282930123首先得到最后一天一个月的天数，通常每个月的天数是固定的，只有二月不固定，有一种方法可以单独列出二月，通过计算闰年的方式来判断是29还是28。其实还有一种方法可能比较方便。我们可以直接使用日期的容错机制，比如newDate(2019,2,1)//2019年3月1日newDate(2019,2,0)//2019年3月1日的前一天，即,2019年2月的最后一天然后得到当天的日期,也就是当月的天数newDate(2019,2,0).getDate()//28然后得到第一天month星期几，这个比较简单newDate(2019,2,1).getDay()//5,Friday然后我们可以用这个信息组合一个月份的信息functiongetDays(year,month){constlastdays=新日期(年,月-1,0).getDate();constdays=newDate(year,month,0).getDate();constweek=newDate(year,month-1,1).getDay();constprev=Array.from({length:week},(el,i)=>(month==0?year-1:year)+'-'+(month==0?12:month-1)+'-'+(lastdays+i-week+1));constcurrent=Array.from({length:days},(el,i)=>year+'-'+month+'-'+(i+1));constnext=Array.from({length:42-days-week},(el,i)=>(month==12?year+1:year)+'-'+(month==12?1:month+1)+'-'+(i+1));return[...prev,...current,...next];}这里有一个简单的在控制台输出日历源码如下，小伙伴可以试试functionrenderCalendar(d){constdate=newDate(d||新日期）；constyear=date.getFullYear();常量蒙特h=date.getMonth();constday=date.getDate();constlastdays=newDate(year,month,0).getDate();constdays=newDate(年,月+1,0).getDate();constweek=newDate(year,month,1).getDay();constprev=Array.from({length:week},(el,i)=>([month==0?year-1:year,month==0?12:month,lastdays+i-week+1]));constcurrent=Array.from({length:days},(el,i)=>[年,月+1,i+1]);constnext=Array.from({length:42-days-week},(el,i)=>([month==11?year+1:year,month==11?1:month+2,i+1]));constfinal=[...prev,...current,...next];constnow=Array.from({length:6},(el,i)=>final.slice(i*7,i*7+7));consts=`————————————————————————————————————${year+'-'+(month+1+'').padStart(2,0)}%c—————————————————————————————————————|苏|莫|涂|我们|日|神父|萨|————————————————————————————————————%c${now.map(el=>el.map(m=>(m[2]==1?'%c':'')+'|'+((m[2]+'').padStart(2,'')+'')).join('')+'|\n——————————————————————————————————————\n').join('')}`console.clear();console.log(s,"font-weight:bold;color:blue","color:#999","color:#000","color:#999")}以上就是日期生成的原理，进一步可以实现日期切换、单选、范围选择等功能属性xy-date-picker定义了如下属性，结合使用更适用。默认值defaultvalue可以为日期选择器指定一个初始日期defaultvalue，值为合法的时间戳字符串DataString，默认为当前日期。支持以下字符串，请参考Date.parse()"2019-2-28""2019-02-28""2019/2/28""2019,2,28""2019228""Feb282019"//...其他日期格式//以上均表示2019年2月28日。type类型支持设置日期选择类型，可以选择日期（默认）、月、年分别实现日期选择器和月选择器、年选择器。valuevalue,date日期设置或返回日期选择器的value属性值。值为当前类型下的日期，格式如2019-10-10。以标准格式日期返回日期，值可以转换为任何格式的日期。//value"2019-08-31"//date"SatAug31201914:54:05GMT+0800(ChinaStandardTime)"可以通过JavaScript设置或获取。日期值；//获取日期.date;//获取date.value='2019-10-10';//原生属性操作date.getAttribute('value');date.getAttribute('date');date.setAttribute('value','2019-10-10');最小值min和最大值max设置日期选择范围，超出范围的不能选择，格式同defaultvalue。disable禁用传递disabled可以禁用，禁用后日期选择器无法打开。Direction可以通过dir设置日期选择器的方向，默认是bottomleft，值可以是top,right,bottom,left,topleft,topright,righttop,rightbottom,bottomleft,bottomright,lefttop,leftbottom.当您的日期选择器位于屏幕边缘时，可以调整此属性。范围选择range添加range属性可以实现日期范围选择。可以指定一个默认范围defaultvalue，格式如2019-10-10~2019-12-31，使用~链接。默认为当前日期。范围选择模式下的值和日期都是数组//value["2019-05-15","2019-12-26"]//date["2019年5月15日星期三08:00:00GMT+0800（中国标准时间）","2019年12月26日星期四08:00:00GMT+0800(中国标准时间)"]eventevent选择日期后，按下确定按钮，触发更改回调。event:{detail:{value,date}}其他触发方式date.onchange=function(ev){console.日志（这个。值）；console.log(this.date);控制台日志（ev.target.value）；控制台日志（ev.detail.value）；console.log(ev.detail.date);}date.addEventListener('change',function(ev){console.log(this.value);console.log(this.date);console.log(ev.target.value);console.log(ev.detail.value);console.log(ev.detail.date);})其他xy-date-pickers是内部基于xy-popover和xy-date-pane实现的。取消确认