Rome

Customizable date (and time) picker. Opt-in UI, no jQuery!


      

rome(input);

      

    

      

<input id='input' class='input' value='2014-12-15 21:00' />

<input id='inputTwo' class='input' />



rome(input);

rome(inputTwo, { initialValue: '2014-12-08 08:36' });

      

    

      

rome(input, { weekStart: 1 });

      

    

      

rome(input, { time: false });

      

    

      

rome(input, { date: false });

      

    

      

rome(input, { monthsInCalendar: 2 });

      

    

      

var picker = rome(input); // rome.find(input) also returns picker



toggle.addEventListener('click', function () {

  if (picker.destroyed) {

    picker.restore();

  } else {

    picker.destroy();

  }

});

      

    

      

rome(input, { min: '2013-12-30', max: '2014-10-01' });

      

    

      

rome(input, { min: '2014-04-30 19:45', max: '2014-09-01 08:30' });

      

    

      

rome(input, {

  dateValidator: function (d) {

    return moment(d).day() !== 6;

  }

});

      

    

      

rome(input, {

  dateValidator: function (d) {

    var m = moment(d);

    var y = m.year();

    var f = 'MM-DD';

    var start = moment('12-21', f).year(y).startOf('day');

    var end = moment('03-19', f).year(y).endOf('day');

    return m.isBefore(start) && m.isAfter(end);

  }

});

      

    

      

rome(input, {

  timeValidator: function (d) {

    var m = moment(d);

    var start = m.clone().hour(12).minute(59).second(59);

    var end = m.clone().hour(18).minute(0).second(1);

    return m.isAfter(start) && m.isBefore(end);

  }

});

      

    
Value: (choose)

      

<div id='parent'></div>

<div id='result'>(choose)</div>



rome(parent).on('data', function (value) {

  result.innerText = value;

});

      

    

Range between two inputs? Sure!


      

rome(left, {

  dateValidator: rome.val.beforeEq(right)

});



rome(right, {

  dateValidator: rome.val.afterEq(left)

});

      

    

Inline? No problem!


      

rome(left, {

  dateValidator: rome.val.beforeEq(right)

});



rome(right, {

  dateValidator: rome.val.afterEq(left)

});

      

    

Specific dates? Use these shortcuts!

You can use moments, Date objects, or strings. You're allowed to specify a single date, a date range, an array of specific dates, an array of date ranges, or a combination of those.

Oh, you can also reference calendars. Then, the selected date in that calendar is excluded (or the only option) in the validated calendar.


      

rome(first, {

  dateValidator: rome.val.except('2014-08-01')

});



rome(second, {

  dateValidator: rome.val.except('2014-08-02', '2014-08-06')

});



rome(third, {

  dateValidator: rome.val.except(['2014-08-04', '2014-08-09'])

});



rome(fourth, {

  dateValidator: rome.val.except([

    ['2014-08-03', '2014-08-07'], '2014-08-15'

  ])

});



rome(fifth, {

  dateValidator: rome.val.only([

    ['2014-08-01', '2014-08-15'], '2014-08-22'

  ])

});



rome(sixth, {

  dateValidator: rome.val.except([second, fourth, '2014-08-15'])

});