Demo

HTML

<input type="text" class="form-control js-date-picker" value="Oct 24, 2048">

JavaScript

new Picker(document.querySelector('.js-date-picker'), {
  format: 'MMM D, YYYY',
  text: {
    title: 'Pick a date',
  },
});

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',
  headers: true,
  text: {
    title: 'Pick a time',
  },
});

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'), {
  controls: true,
  format: 'YYYY-MM-DD HH:mm:ss.SSS',
  headers: true,
});

Demo

HTML

<input type="text" class="form-control js-month-picker" value="November">

JavaScript

new Picker(document.querySelector('.js-month-picker'), {
  format: 'MMMM',
  text: {
    title: 'Pick a month',
  },
});

Demo

HTML

<div class="js-inline-picker">2048-10-24 05:12</div>

JavaScript

new Picker(document.querySelector('.js-inline-picker'), {
  controls: true,
  inline: true,
});

Demo

HTML

<input type="text" class="form-control sr-only 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,
});

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-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];
  },
});