• Stars
    star
    129
  • Rank 279,262 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

No Dependencies Lightweight Material Date/Time Picker For Mobile Web

date-time-picker

No Dependencies Lightweight Material Date/Time Picker For Mobile Web

date-time-picker.min.js: ~9k when gzipped date-time-picker.min.css: ~2k when gzipped

Select date and time QR

Installation

Download from https://github.com/dolymood/date-time-picker/tree/master/dist, it contains minified js and css files.

Or use npm:

npm install date-time-picker

Usage

As a npm package:

var DateTimePicker = require('date-time-picker')

AMD:

var DateTimePicker = require('/path/to/date-time-picker.min.js')

Script load:

var DateTimePicker = window.DateTimePicker

DatePicker

btn.onclick = function () {
  var datePicker = new DateTimePicker.Date(options, config)
  datePicker.on('selected', function (formatDate, now) {
    // formatData = 2016-10-19
    // now = Date instance -> Wed Oct 19 2016 20:28:12 GMT+0800 (CST)
  })
  datePicker.on('cleared', function () {
    // clicked clear btn
  })
}

TimePicker

btn.onclick = function () {
  var timePicker = new DateTimePicker.Time(options, config)
  timePicker.on('selected', function (formatTime, now) {
    // formatTime = 18:30
    // now = Date instance -> Wed Oct 19 2016 18:30:13 GMT+0800 (CST)
  })
  timePicker.on('cleared', function () {
    // clicked clear btn
  })
}

API and Events

API:

picker.show()
picker.hide()
picker.destroy()

Events:

picker
  // click OK button
  .on('selected', function (formatValue, now) {
    console.log(formatValue, now)
  })
  // click CLEAR button
  .on('cleared', function () {
    console.log('cleared select value')
  })
  // click CANCEL button
  // also trigger `destroy` event
  .on('canceled', function () {
    console.log('canceled')
  })
  .on('destroy', function () {
    console.log('destroy')
  })

Options and Config

DatePicker Options

{
  lang: 'EN', // default 'EN'. One of 'EN', 'zh-CN'
  format: 'yyyy-MM-dd', // default 'yyyy-MM-dd'
  default: '2016-10-19', // default `new Date()`. If `default` type is string, then it will be parsed to `Date` instance by `format` . Or it can be a `Date` instance
  min: '2016-02-10', // min date value, `{String | Date}`, default `new Date(1900, 0, 1, 0, 0, 0, 0)`
  max: '2018-11-08' // max date value, `{String | Date}`, default `new Date(2100, 11, 31, 23, 59, 59, 999)`
}

TimePicker Options

{
  lang: 'EN', // default 'EN'
  format: 'HH:mm', // default 'HH:mm'
  default: '12:27', // default `new Date()`. If `default` type is string, then it will be parsed to `Date` instance by `format` . Or it can be a `Date` instance
  minuteStep: 5, // default 5. Select minutes step, must be one of [1, 5, 10]
  min: '00:00', // min time value, `{String | Date}`, default `new Date(1900, 0, 1, 0, 0, 0, 0)`
  max: '23:59' // max time value, `{String | Date}`, default `new Date(2100, 11, 31, 23, 59, 59, 999)`
}

Config

Default English(EN):

{
  day: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  shortDay: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  MDW: 'D, MM-d',
  YM: 'yyyy-M',
  OK: 'OK',
  CANCEL: 'CANCEL',
  CLEAR: 'CLEAR'
}

Default 中文(zh-CN):

{
  day: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  shortDay: ['日', '一', '二', '三', '四', '五', '六'],
  MDW: 'M月d日D',
  YM: 'yyyy年M月',
  OK: '确定',
  CANCEL: '取消',
  CLEAR: '清除'
}

License

MIT

More Repositories

1

AngularLearning

Angular.js 的一些学习资源
387
star
2

dolymood.github.com

我的博客
CSS
111
star
3

front-end-face-questions

史上最全 前端开发面试问题及答案整理
105
star
4

webpack-post-compile-plugin

A webpack post compile plugin
JavaScript
37
star
5

angular-example

Angular example
HTML
34
star
6

babel-plugin-transform-modules

Fork https://bitbucket.org/amctheatres/babel-transform-imports
JavaScript
14
star
7

vue-jsx-runtime

jsx-runtime for vue
TypeScript
12
star
8

aisvg2sprite

Convert illustrator(ai) SVG to pretty SVG sprite
HTML
12
star
9

webpack-transform-modules-plugin

webpack transform modules plugin
JavaScript
10
star
10

uni-component

Unified Component
TypeScript
10
star
11

vue-reactivity-polyfill

@vue/reactivity polyfill
TypeScript
9
star
12

git-alias

A git alias Node.js package
JavaScript
8
star
13

angular-delegate-event

angular 事件代理
8
star
14

bifypack

基于gulp和browserify的项目构建工具
JavaScript
8
star
15

uni-store

Unified Store
TypeScript
7
star
16

DateFormat

Date Format--javascript js
JavaScript
7
star
17

Backbone-example

Backbone.js的一个小例子
JavaScript
6
star
18

vue-next-demo

Vue 3 demo with polyfill
Vue
6
star
19

angularLib

angular为基础的一些组件
JavaScript
5
star
20

angular-packages

angular官方zip包
HTML
2
star
21

wx-pager

将 `wx` 后缀文件生成 `wx-app` 的 `page` 所需要的 `wxml`, `js`, `wxss`, `json` 文件内容以及文件
JavaScript
2
star
22

vue-jsx-runtime-examples

vue-jsx-runtime examples
Vue
1
star
23

lisp.js

JS版lisp解析器
JavaScript
1
star
24

cache-header-control

Control the response cache header
JavaScript
1
star
25

bifypack-sample

bifypack示例
JavaScript
1
star
26

git-usr

You can easily set git repository user config(user.name and user.email)
JavaScript
1
star
27

wx-pager-cli

wx-pager's CLI interface
JavaScript
1
star
28

vue3-plugin-polyfill

vue3 plugin ployfill
JavaScript
1
star
29

cache-control-midd

Express/Connect middleware to set response header cache options
JavaScript
1
star
30

awesome-nginx

Awesome Nginx configurations
Nginx
1
star
31

HoverZoomin

在容器元素内,鼠标hover到子元素上放大,不超出容器
JavaScript
1
star