No Dependencies Lightweight Material Date/Time Picker For Mobile Web
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
dist
example
src
.editorconfig
.eslintignore
.eslintrc
.gitignore
LICENSE
README.md
package.json
webpack.build.config.js
webpack.config.js

README.md

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