原生js如何实现日期选择插件-创新互联

小编这次要给大家分享的是原生js如何实现日期选择插件，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十余年时间我们累计服务了上千家以及全国政企客户，如高空作业车租赁等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞誉。

最近公司项目告一段落，想着写个小玩意打发下上班时间，就用js很粗糙的实现了下日期选择插件。间间断断历时1天多，实现了选择日期的功能，从写完的整体代码来看，耦合度还是蛮高的，我觉得还是我对js中的原型继承方式理解不深刻，一定有更优雅的方式再优化下这份粗糙的代码，各位前端小伙伴们在看完我的代码后请麻烦指出其中实现的不好的地方，有批评指正让我有动力继续写博客嘛！

先说下这个插件的功能：功能很简单，目前只实现了选择一个日期（当然可以赋初始值，默认是当前日期），选择跨月日期时，会有一个粗糙的动画效果，效果图如下：

然后，说下我写这个插件思路：

      1.插件整体是以function Dt作为基类，通过choose方法调用，如：$('#txtDt').choose({value: '2018/8/1'});$方法用来选择要传入选择日期的文本控件。插件由head、content、foot3部分组成，head：选择上月、下月、昨日、明日和显示当前选择日期；centent：显示日期列表；foot：关闭

      2.Dt中render方法会更新属性(年、月、日.....)

      3.跨月实现的动画过渡主要通过content中的3个月列表（上月【隐藏】、当月、下月【隐藏】）分别替换来实现，比如显示下月，只需要将下月列表逐步移动到显示区域，将当月移动到上月，再将原上月列表删除，再将最新的下月列表插入到当月之后。思路很简单，小伙伴们看代码就能一目了然了。只是，我对自己实现的上月、下月、昨日和明日的方法很厌恶，代码严重耦合，美观性很差，如果有小伙伴有更好的解决办法，一定要告诉我。

话不多说，附上所有代码：

html部分：  

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：原生js如何实现日期选择插件-创新互联
网址分享：http://cdxtjz.cn/article/egpej.html