github地址: https://github.com/yuanzm/simple-date-picker#simple-date-picker

simple-date-picker

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

安装

支持下面两种方式

  • git clone之后直接拷贝引用bin文件夹下面的datepicker.min.cssdatepicker.min.js
  • 从npm下载安装:npm install --save date_picker

使用

  • 引用样式datepicker.min.css
  • 引用datepicker.min.js或者引用模块var DatePicker = require('date_picker');
  • 实例化组件,绑定插件日期选择完成之后的回调函数
var _date = document.getElementById('date');

	var datePicker = new DatePicker({
confirmCbk: function(data) {
_date.value = data.year + '-' + data.month + '-' + data.day;
}
}); _date.onfocus = function(e) {
_date.blur();
datePicker.open();
};

插件外置两个API: openclose,其中特别注意上面demo中_date在获取焦点之后里面强制去除了焦点,是为了避免安卓下面为input标签设置readonly属性并不能禁止原生键盘弹出的问题。

在线demo

参考:https://www.cnblogs.com/yuanzm/p/5241323.html

Web APP 日期选择控件的更多相关文章

  1. 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

    本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...

  2. js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  3. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  4. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  5. Swift - 日期选择控件(UIDatePicker)的用法

    1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...

  6. Android自定义View(RollWeekView-炫酷的星期日期选择控件)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...

  7. 取消layUI中日期选择控件默认填充日期

    input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...

  8. Ionic实战六:日期选择控件

    onic日期选择控件,用于ionic项目开发中的日期选择以及日期插件   

  9. ASP.NET(c#) 日期选择控件的另一种实现方法

    这篇文章是在一个英文网站发现的,完全使用ASP.NET实现了日期选择的基本功能,没有使用js,原文链接http://geekswithblogs.net/plundberg/archive/2009/ ...

随机推荐

  1. 使用Wscript/cscript调用VB脚本

    ●强制用Wscript.exe执行 SET Wshell=CreateObject("Wscript.Shell") if lcase(right(Wscript.fullName ...

  2. ThinkPHP5.0完全开发手册 --技术文档

    1.ThinkPHP5.0完全开发手册.chm 链接:https://pan.baidu.com/s/1199wK6q6O9IyOf5RU_-Xow 提取码:hnek 2.ThinkPHP5.0完全开 ...

  3. Lab 9-2

    Analyze the malware found in the file Lab09-02.exe using OllyDbg to answer the following questions. ...

  4. python命名空间与作用域

    python命名空间与作用域   命名空间是名称与对象之间的关系,可以将命名空间看做是字典,其中的键是名称,值是对象. 命名空间不共享名称. 在命名空间中的名称能将任何python对象作为值,在不同的 ...

  5. php7安装 event扩展

    1 下载地址:http://pecl.php.net/package/event 2 安装支持库libevent,需要编译高版本(这里以最新版本release-2.1.8-stable为例) http ...

  6. 超恶心的TP模版取值

    一.JS事件中 在使用H-uiAdmin做后台开发的时候,碰到了使用元素点击触发js函数展示弹窗的写法 但是在js函数中还需要使用U函数生成url以及使用$vo.id来传值 反复试了一下模版标签的写法 ...

  7. golang 报错illegal rune literal

    记录一下,今天运行一端代码遇到这个报错"illegal rune literal",代码如下: func main() { http.HandleFunc('/login', lo ...

  8. springboot+thymeleaf+springbootJPA实现一个简单的增删改查

    1.springboot是什么,给我们带来了什么方便? 通过阅读springboot的书籍发现springboot最便利的是为我们自动配置了很多的东西,几乎可以实现无xml,甚至简单的无sql,为我们 ...

  9. FPGA型号解读

  10. Jsの练习-数组常用方法 -splice()

    splice() 功能:1.可以实现删除,插入和替换. 删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数. 例如:splice(0,2)会删除数组中的前2项. 插入:可 ...