Code Monkey home page Code Monkey logo

date-time-picker's Introduction

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)
  })
}

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)
  })
}

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 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
}

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
}

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'
}

Default 中文(zh-CN):

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

License

MIT

date-time-picker's People

Contributors

dolymood avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.