移动端时间范围选择插件

2024-08-23

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

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

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

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

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

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

zepto.js移动端城市选择插件

http://sc.chinaz.com/jiaoben/170327301850.htm

基于zepto的移动端轻量级日期插件

前言做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的两个显而易见的问题,第一是过重的依赖,对于jQuery的插件,已经强制依赖了80多k的庞然大物,把很多移动端项目拒之门外:第二是太过强大的功能,很多插件花百分之八十的时间去完善插件百分之二十炫酷的额外功能,导致代码量变大,配置繁杂.所以一款少依赖.轻量级和使用简单的移动端日期选择插件是非常必要的.本

移动端城市选择JavaScript插件（基于WG的城市选择插件的修改版本）

周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互效果改了一下界面,同时将各个触发效果改成了跟肯德基注册页面类似的交互效果,源程序不依赖jQuery但是我自己做简单的交互的时候偷懒使用了jQuery所以,如果您要使用这个插件完全可以换掉我写的那一些事件注册. 详细的因为我并没有大改,所以也就不po细节了,具体的项目代码我贴在这里. https://

移动端地区选择mobile-select-area插件的使用方法

顾名思义,mobile-select-area插件就是使用在移动端上的进行地区选择的插件,而且使用方法简单,我就说我是怎么用的吧一.准备工作首先肯定要下载插件对应的css+js文件, 当你下载好这些东西之后就是万事俱备只欠东风->写代码....首先这个是使用在移动端上的插件,就必须把视角控制在移动端上,不然可能在浏览器上看的舒舒服服,变成手机端怎么就不好看了 <meta name="viewport" content="width=device-width,i

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

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

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

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

移动端触摸滑动插件Swiper

移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载任何公共库(如jQuery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加载了公共库的环境下安全的动行,如jQuery,Zepto,jQuery Moblie等. 2.Swiper默认的触摸比例为1:1,你可以通过修改Swiper的设置来改变这个比例. 3.Swiper 增加

js组件开发-移动端地区选择控件mobile-select-area

移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这次的效果图. 它的github地址请点击https://github.com/tianxiangbing/mobile-select-area 它的demo演示请点击 http://www.lovewebgames.com/jsmodule/m

jquery mobiscroll移动端日期选择控件(无乱码)

jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user

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

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

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

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

基于jquery的城市选择插件

城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *author:youziclub *2015-4-22 */ ;(function($){ $.fn.city=function(options){ // 城市信息 var nav=['热门','A-G','H-L','M-T','W-Z','其他']; var cityName=["上海,北京,广州,昆

swiper嵌套小demo(移动端触摸滑动插件)

swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clearlovesky/swiper3.4.2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo<

sencha touch 带本地搜索功能的selectfield(选择插件)

带本地搜索功能的选择插件,效果图: 在使用selectfield的过程中,数据过大时,数据加载缓慢,没有模糊查询用户体验也不好, 在selectfield的基础上上稍作修改而成,使用方式同selectfield,代码: Ext.define('ux.field.Select', { extend: 'Ext.field.Text', xtype: 'uxSelectfield', alternateClassName: 'ux.form.Select', requires: [ 'Ext.Pan

使用PerfView监测.NET程序性能（四）：折叠，过滤和时间范围选择

在上一篇文章中,我们使用了Perfview的分组功能.分组功能旨在对某些函数按照某个格式进行分组,以减少视图中的各种无关函数的数量.但仅有分组还不够,有时我们想将一些函数调用信息按某些条件过滤掉,例如将采用小于1%的函数调用信息去掉,或者将函数名中包含某个字眼的函数信息去掉,甚至只显示某个时间段调用的函数.这就需要用到PerfView提供的过滤(Filtering)功能了.PerfVIew提供了3种过滤功能:折叠(Folding),匹配过滤,和时间范围选择(Set Time Range) 折叠(

#Plugin 中国省市选择插件

中国省市选择插件 ChineseCities 1.原生JS,不依赖jquery,zepto 2.前端学习交流群:814798690 源码查看点击下载 https://github.com/chaorenzeng/ChineseCities 快速使用 1.引用 ChineseCities.min.js 2.拷贝以下布局结构 <select id="province"> <option value="请选择城市">请选择省份</opti

【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

移动端时间范围选择插件

热门专题