anytime.styl

//
// ANYTIME DATE/TIME PICKER
// =============
//

//
// -- Essential styles --
// These styles are the bare minimum to have a working date/time picker.
// These are copied and converted to stylus from
// https://github.com/bengourley/anytime/blob/master/anytime.css
//

.anytime-picker
  display none
  position absolute

.anytime-picker--is-visible
  display block

.anytime-picker__dates
  width 200px

.anytime-picker__dates > *
  box-sizing border-box
  width 14.28%
  display inline-block


//
// -- Custom styles --
// These are styles that make the datepicker look nice.
//

.anytime-picker
  border 1px solid #ddd
  background-color #fff
  padding 3px
  border-radius 2px
  margin-bottom 20px

.anytime-picker__dates
  margin 3px 0px

.anytime-picker__dates > *
  padding 6px 3px
  cursor pointer

.anytime-picker__dropdown
  margin 0px 3px

.anytime-picker__date
  position relative
  border none
  background #eee
  color #444
  text-align center
  box-shadow inset 0px 0px 0px 1px #fff

.anytime-picker__date:hover
  background $color--blue
  color #fff

.anytime-picker__date:focus
  z-index 1

.anytime-picker__header
.anytime-picker__footer
  padding 5px
  text-align center

.anytime-picker__header > *
.anytime-picker__footer > *
  display inline-block
  margin 3px

.anytime-picker__time
  padding 10px 0px 5px
  text-align center

.anytime-picker__time .anytime-picker__dropdown
  width 30%

.anytime-picker__button
  display inline-block
  padding 6px 12px
  margin 0 3px
  font-size 12px
  line-height 17px
  text-align center
  cursor pointer
  color #333333
  text-shadow 0 1px 1px rgba(255, 255, 255, 0.75)
  background-color #f5f5f5
  border-color #e6e6e6 #e6e6e6 #bfbfbf
  border-color rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
  border 1px solid #cccccc
  border-bottom-color #b3b3b3
  border-radius 4px

.anytime-picker__footer
  background-color #eee
  margin-top 5px

dp.jade

.form-row.form-row-clear(data-field='displayDate').js-timepicker
  label
    span.form-label-text Display Date
      abbr(title='This field is required') *
    span.datepicker
      input.form-field(type='text', name='displayDate', value=offer.displayDate ? moment(offer.displayDate).format(dateTimePickerFormat) : '')
    .js-error
  .form-row-description.form-copy
    p The date that will be shown at the top of articles and will be used for ordering.

dp.js

var TimePicker = require('anytime')

this.$el.find('.js-timepicker input').each(function (i, el) {
  var picker = new TimePicker({ input: el })
  $('body').append(picker.render().el)
})