Web APP 日期选择控件

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

原文地址:https://www.cnblogs.com/fireicesion/p/9592129.html

时间: 2024-10-12 01:20:55

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

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

本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.android实现自绘日期选择控件 目的: 通过一个相对复杂的自定义自绘控件来分享: 1.ios以及android自定义自绘控件的开发流程 2.objc与c/c++混合编程 3.android ndk的环境配置,android studio ndk的编译模式,swig在android ndk开发中的作

原创控件代码共享--日期选择控件

思路:实现日期年月日的选择 1.可以设定年的起止年份 2.排除不正确日期选择的可能 3.使用javascript实现控制 4.使用Text属性方便获取设置日期值 ================================= 代码如下: using System; using System.Collections; using System.Collections.Specialized; using System.ComponentModel; using System.IO; using

双日历日期选择控件

近期,需要在项目里使用日历,经过多方选择,最后决定使用 daterangepicker  (http://www.daterangepicker.com),代码下载地址 https://github.com/dangrossman/bootstrap-daterangepicker 但是,该控件是一个日期范围选择控件,使用singleDatePicker 可以变成单日期选择控件,但是只显示一个日期. 看了一下源代码,主要是在 daterangepicker.js 的有一段代码,注释掉即可:如下

高仿IOS7日期选择控件

高仿IOS7日期选择控件 高仿IOS7.QQ等日期选择控件,滑动选择,高端大气上档次,可直接运用于项目中... 下载地址:http://www.devstore.cn/code/info/965.html 运行截图:   

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

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义CustomWeekView 4重写onMeasure 5点击后执行动画 7重置预备控件 源码下载 ??最近收到一个自定义控件的需求,需要做一个日期选择控件,实现图如下: ???? ??一次展示一个星期的5天,中间放大的为当前选中的:如果点击了其中一个日期,比如星期五,那么整体向左滑动,并将星期五慢慢放大

ExtJS6.0扩展日期选择控件为也可以选择时间

PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6.0源代码中Picker文件路径下的Date.js脚本(路径:ext-6.0.0-gpl\ext-6.0.0\classic\classic\src\picker),拷贝一份出来命名为DateTimePicker.js 2.修改命名空间(把白色底的改成黑色底的命名空间以及别名,你也可以修改为自己存放该

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

1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同时在ViewController.swift中使用IBOutlet建立起控件和事件的关联,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 class ViewContro

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

input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效果, 最后发现可以在绑定时将value一项设置为空,而非new Data()的值, laydate.render({    elem: '#param_monthid',    type: 'month',    format: 'yyyyMM',    value: '',    max: year + &

安卓开发中的双日期选择控件(可隐藏日,只显示年月)

在安卓开发中,会碰到选开始日期和结束日期的问题.特别是在使用Pad时,如果弹出一个Dialog,能够同时选择开始日期和结束日期,那将是极好的.我在开发中在DatePickerDialog的基础上做了修改,实现了这种Dialog.效果如下: 具体实现方法为: 先新建一个安卓项目DoubleDatePicker,在res/layout文件夹下新建date_picker_dialog.xml,内容如下: 1 <?xml version="1.0" encoding="utf-