input 日期选择插件

2026-09-16

HTML5 input date属性引起的探索——My97DatePicker（日期选择插件）

不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是很好的,但是PC端浏览器对H5的支持就很让人无奈了.然后最近遇到一个需求:需要一个开始时间和结束时间,默认显示年月,如下图: 第一反应想到的是H5的input date属性,因为兼容性问题无奈放弃,然后发现了一个挺好用的插件:DatePicker, 注:在使用此插件时需要注意,DatePicker插

【jquery】多日期选择插件easyui date

1.本次介绍一个好用的多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/download/index.php 4.汉化:建议在使用页面: <script type="text/javascript" src="你的网站绝对地址/locale/easyui-lang-zh_CN.js"></script> 5.使用Dem

angular2+ 引用layDate日期选择插件

layDate日期选择插件使用npm安装好像是行不通的,但angular2+的日期选择控件库又不能够支持时分秒的选择在angular项目中引用layDate 1. 首先官网下载layDate独立版,把laydate文件夹下的文件放入assets文件夹下 2. 在angular-cli.json文件里添加 "styles": [ "assets/theme/default/laydate.css" ], "scripts": [ "as

贴近用户体验的jQuery日期选择插件

分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览源码下载 var dateRange = new pickerDateRange('date_demo3', { aRecent7Days: 'aRecent7DaysDemo3', //最近7天 isTodayValid: false, //startDate : '2013-04-14', //endDate : '2013-04-21', /

纯原生js移动端日期选择插件

最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又长还收费,我就忍不住自己做了一个,也不过就10几kb的事情嘛,想想独乐乐不如众乐乐,如果伙伴们手上没有轻量级的日期选择插件不如先拿我这个应付一下吧! 项目截图: 项目地址:https://github.com/xfhxbb/LCalendar

移动设备日期选择插件（基于JQUERY）

上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll,jquery date Entity,第一个已经很成熟了,不过是基于JQM的,可是项目又不能用JQM,退一步想着用第二个吧,找了半天,没找到下载和文档,想想算了,急着用,自己动手吧.. 插件使用,引用CSS和JS.页面代码初始化设置如下: 1 var date1 = new myDateContro

EasyUI 日期选择插件封装成选择到月份的插件

将普通的日期选择插件封装成选择到月份的插件: var nowMonth = new Date(); var month = nowMonth.getMonth()+1; month = month < 10 ?"0"+month:month; var fmdate =nowMonth.getFullYear()+"-&

日期选择插件clndr的使用

需求是:在HTML中绘制日历直接供用户选择而不是使用datepicker之类的表单插件让用户点击input后弹出datepicker让用户选择浏览了一些解决方案后,发现 CLNDR 这个jQuery插件最漂亮这名字取得确实晦涩,其实是“calendar”每个相隔字符的拼凑效果如下: 要想迅速使用,还是比较困难的,文档少,全英文,只有github上一些简单的示例现在就来总结归纳一下,实现上方这个简单的日历方法.(貌似简单,配置还是很多的) 首先去github上下载最新版本的 CLNDR

Vue中的v-model与my97日期选择插件冲突

Vue中的v-model指令只是一个语法糖,其具体实现是:监听input框的input事件,然后将用户输入的值赋值给input框的value属性 <input type="text" :value="name" v-on:input="name = $event.target.value"> 日期插件的实现是:选择好日期后,将值赋给input框,然而此时并没有绑定到vue的数据中后来采取的做法是:查询my97的API,找到选择日期的

My97 DatePicker 日期选择插件.

My97DatePicker是一个纯js写的时间插件,体积较小,更可以自己扩展皮肤,且样式不和页面相冲突,有多钟配置,近期项目用了一下感觉还不错...分享给大家软件官网:http://www.my97.net/ 文档演示:http://www.my97.net/dp/demo/index.htm 简介 My97DatePicker目前的版本是:4.8 目录结构: WdatePicker.js 页面引入 calendar.js 主文件,不需引入目录lang 存放语言文件,你可以根据需要清理

第二好用的时间日期选择插件（jscal）

这个是第二好用的了,支持鼠标滚动选择时间.功能很强大,文档:http://www.dynarch.com/jscal/ 效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <hea

最简单应用的时间日期选择插件---My97DatePicker

最简单的应用:http://www.my97.net/dp/demo/resource/2.1.asp

基于Bootstrap的日历控件和日期选择插件

在线演示本地下载

日期时间范围选择插件:daterangepicker使用总结

分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layui的问题;因为自己写的demo可以在IE8运行;只是在我的项目环境下某些代码冲突了;所以换用了bootstrap插件daterangepicker;看了很多资料;结合官网了文档;基本算是搞定了;把我的总结代码分享给大家;希望对使用daterangepicker插件的初学者有帮助. 总结分为四个部分;

页面日期选择控件--jquery ui datepicker 插件

日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/ DatePicker基本使用方法: <!DOCTYPE

基于zepto的移动端日期+时间选择插件

前段时间写了两个移动端的日期选择插件:轻量级移动端日期选择器,本来是为特定的场景中使用的,结果有同学反应不够灵活和强大.虽然我的看法是移动端的界面要尽可能简洁,功能要尽可能简单,但是难免还是会有各种各样的场景,有时候确实需要同时选择年.月.日.时.分.秒,日期的格式要能配置,要能显示“上午下午”......诸如此类. 所以,一下狠心,索性写个全的吧,之前写的是mdater和mtimer俩兄弟,再来个合体的mdatetimer,意为可以同时选择日期和时间,当然你要只选择日期也是可以配置的.操作方

纯原生js移动端城市选择插件

接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个select标签!!!这在移动端上的体验太low了,我想以我的脾气肯定是要自己做的,正好之前做了日期选择,那就依葫芦画瓢自己再做一个吧,来来来,先上效果图: 用法在html页面中引入input标签,写法如下: <input id="demo1" type="text"

webapp中的日期选择

你是否在开发webapp时,选择用哪种第三方日期选择控件绞尽脑汁? 其实不用那么麻烦,现在移动端都是WebKit内核,支持HTML5,其实只要弱弱的将input中将type="date"就OK了,操作系统会自动识别为日期类型并调用系统自带的日期选择.不用在意日期控件的样式不统一,因为who cares?o(╯□╰)o,大家都是盯着自己的手机,谁选个日期还去比较其他手机呢? 最近看见有个比较牛逼的日期选择插件mobiscroll,网上的口碑特别好,我也下载过来玩了一下,之所以说他牛逼不完

angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件

最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性和参数即可实现,效果如下图(一截图就不显示鼠标的红色圆圈不可选的样式了...尴尬): 这里先附上我觉得简单易懂的JS实现方法,大家可以看看实现的原理: 以下代码就是最开始网上搜索的简单易懂的:http://www.cnblogs.com/tonghaolang/p/5972676.html <!DO