Picker.js v0.1.1

JavaScript date time picker.

Overview


Demo



Options



date
format
language
rows

Methods


Examples


Date Picker

Demo

HTML
<input type="text" class="form-control js-date-picker" value="10/24/2048">
JavaScript
new Picker(document.querySelector('.js-date-picker'), {
  format: 'MM/DD/YYYY',
});

Time Picker

Demo

HTML
<input type="text" class="form-control js-time-picker" value="02:56">
JavaScript
new Picker(document.querySelector('.js-time-picker'), {
  format: 'HH:mm',
});

Full Picker

Demo

HTML
<input type="text" class="form-control js-full-picker" value="2048-10-24 05:12:02.056">
JavaScript
new Picker(document.querySelector('.js-full-picker'), {
  format: 'YYYY-MM-DD HH:mm:ss.SSS',
});

Month Picker

Demo

HTML
<input type="text" class="form-control js-month-picker" value="November">
JavaScript
new Picker(document.querySelector('.js-month-picker'), {
  format: 'MMMM',
});

Inline Picker

Demo
2048-10-24 05:12

HTML
<div class="js-inline-picker">2048-10-24 05:12</div>
JavaScript
new Picker(document.querySelector('.js-inline-picker'), {
  inline: true,
});

Mini Picker

Demo

HTML
<input type="text" class="form-control hidden-xs-up js-mini-picker">
<div class="js-mini-picker-container"></div>
JavaScript
new Picker(document.querySelector('.js-mini-picker'), {
  container: '.js-mini-picker-container',
  inline: true,
  rows: 1,
});

Super Picker

Demo

HTML
<input type="text" class="form-control js-super-picker" value="2020年2月20日2时20分">
<div class="js-super-picker-container"></div>
CSS
.js-super-picker-container .picker-cell {
  width: 18%;
}
.js-super-picker-container .picker-years {
  width: 28%;
}
JavaScript
new Picker(document.querySelector('.js-super-picker'), {
  container: '.js-super-picker-container',
  format: 'YYYY年M月D日H时m分',
  increment: {
    minute: 10,
  },
  text: {
    title: '请选择日期 / 时间',
    cancel: '取消',
    confirm: '确认',
  },
  translate(type, text) {
    const suffixes = {
      year: '年',
      month: '月',
      day: '日',
      hour: '时',
      minute: '分',
    };

    return Number(text) + suffixes[type];
  },
});