bevacqua/rome

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

rome

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

Rome wasn't built in a day. Browser support includes every sane browser and IE7+.

Demo!

You can see a live demo here.

Oh, rome synchronizes in real-time with inputs, never steals focus, and its CSS is entirely customizable!

_{Rome depends on moment. It doesn't depend on jQuery or other weird frameworks, though.}

Install

From npm or Bower.

npm install --save @bevacqua/rome

bower install --save @bevacqua/rome

Note that if you're using the standalone version, the API is published under the rome global. If you're using CJS, then you'll have to require('@bevacqua/rome').

Setup

You can use your own distribution of moment, using rome.standalone.js.

<script src='moment.js'></script>
<script src='rome.standalone.js'></script>

You could just use the bundled rome.js distribution, which comes with moment in it.

<script src='rome.js'></script>

If you need to do anything regarding internationalization, refer to moment for that. Ideally, make those changes before starting to create Rome calendar components.

API

The API in rome exposes a few properties.

rome.find(elem)

If a calendar is associated to the provided elem, then that calendar is returned, otherwise returns null. DOM elements can only have one associated calendar.

rome(elem, options={})

This method creates a calendar instance and associates it to the provided elem. This association can't be undone even by .destroy()ing the rome instance, because it can be .restore()d later. Subsequent calls to rome(elem) will return the associated calendar, instead of creating a new one _{(see rome.find(elem))}. Think of this as a "caching feature".

Creating a calendar has a ton of options. These have reasonable defaults that are easy to adjust, too. The options are listed below.

Option	Description
appendTo	DOM element where the calendar will be appended to. Takes 'parent' as the parent element
autoClose	When set to true, the calendar is auto-closed when picking a day _(or a time if time: true and date: false). A value of 'time' will only auto-close the calendar when a time is picked.
autoHideOnBlur	Hides the calendar when focusing something other than the input field
autoHideOnClick	Hides the calendar when clicking away
date	The calendar shows days and allows you to navigate between months
dateValidator	Function to validate that a given date is considered valid. Receives a native Date parameter.
dayFormat	Format string used to display days on the calendar
initialValue	Value used to initialize calendar. Takes string, Date, or moment
inputFormat	Format string used for the input field as well as the results of rome
invalidate	Ensures the date is valid when the field is blurred
strictParse	Compares input strictly against inputFormat, and partial matches are discarded
max	Disallow dates past max. Takes string, Date, or moment
min	Disallow dates before min. Takes string, Date, or moment
monthFormat	Format string used by the calendar to display months and their year
monthsInCalendar	How many months get rendered in the calendar
required	Is the field required or do you allow empty values?
styles	CSS classes applied to elements on the calendar
time	The calendar shows the current time and allows you to change it using a dropdown
timeFormat	Format string used to display the time on the calendar
timeInterval	Seconds between each option in the time dropdown
timeValidator	Function to validate that a given time is considered valid. Receives a native Date parameter.
weekdayFormat	Format used to display weekdays. Takes min (Mo), short (Mon), long (Monday), or an array with seven strings of your choosing.
weekStart	Day considered the first of the week. Range: Sunday 0 - Saturday 6

Note that in the case of input fields, when initialValue isn't provided the initial value is inferred from elem.value instead. In the case of inline calendars, new Date() will be used as a default if none is provided.

Inlining the Calendar

If you pass in an element other than an input tag, then this method behaves slightly differently. The difference is that appendTo becomes the provided elem, and the calendar won't attach itself to an input element. The options listed below will be ignored.

• autoHideOnBlur, because there is no input field that can be tracked for blur events
• invalidate, because there is no input field to keep consistent with the calendar component
• required, because you can easily do that on an input field
• styles.positioned, because the calendar will be considered inlined

All of the other options still apply, and identical behavior should be expected.

Default Options

If you don't set an option, the default will be used. You can look up the defaults here, or below.

{
  "appendTo": document.body,
  "autoClose": true,
  "autoHideOnBlur": true,
  "autoHideOnClick": true,
  "date": true,
  "dateValidator": Function.prototype,
  "dayFormat": "DD",
  "initialValue": null,
  "inputFormat": "YYYY-MM-DD HH:mm",
  "invalidate": true,
  "max": null,
  "min": null,
  "monthFormat": "MMMM YYYY",
  "monthsInCalendar": 1,
  "required": false,
  "strictParse": false,
  "styles": {
    "back": "rd-back",
    "container": "rd-container",
    "date": "rd-date",
    "dayBody": "rd-days-body",
    "dayBodyElem": "rd-day-body",
    "dayConcealed": "rd-day-concealed",
    "dayDisabled": "rd-day-disabled",
    "dayHead": "rd-days-head",
    "dayHeadElem": "rd-day-head",
    "dayRow": "rd-days-row",
    "dayTable": "rd-days",
    "month": "rd-month",
    "next": "rd-next",
    "positioned": "rd-container-attachment",
    "selectedDay": "rd-day-selected",
    "selectedTime": "rd-time-selected",
    "time": "rd-time",
    "timeList": "rd-time-list",
    "timeOption": "rd-time-option"
  },
  "time": true,
  "timeFormat": "HH:mm",
  "timeInterval": 1800,
  "timeValidator": Function.prototype,
  "weekdayFormat": "min",
  "weekStart": moment().weekday(0).day()
}

Rome API

When you create a calendar with rome(elem), you'll get a cal instance back. This has a few API methods. Most of these methods return the calendar instance whenever possible, allowing for method chaining.

.show()

Shows the calendar. If associated with an input, the calendar gets absolutely position right below the input field.

.hide()

Hides the calendar.

.id

Auto-generated unique identifier assigned to this instance of Rome.

.container

The DOM element that contains the calendar.

.associated

The associated DOM element assigned to this calendar instance. This is the input field or parent element that you used to create the calendar.

.getDate()

Returns the current date, as defined by the calendar, in a native Date object. If required: false you'll get null when the input field is empty.

.getDateString(format?)

Returns the current date, as defined by the calendar, using the provided options.inputFormat format string or a format of your choosing. If required: false you'll get null when the input field is empty.

.getMoment()

Returns a copy of the moment object underlying the current date in the calendar. If required: false you'll get null when the input field is empty.

.destroy()

Removes the calendar from the DOM and all of its associated DOM event listeners. The only responsive API method becomes the .restore method described below, the rest of the API becomes no-op methods. After emitting the destroyed event, all event listeners are removed from the instance.

.destroyed

Returns true when the calendar is in a destroyed state and false otherwise.

.restore(options?)

Restores the calendar, using the provided options (or the default options). The associated DOM element can't be changed. The API methods are restored to their original functionality.

.options(options?)

If an options object is provided, it destroys the calendar and initializes it with the provided options. Effectively the same as calling .restore(options) immediately after calling .destroy().

If no options object is provided, a copy of the current options is returned.

.options.reset()

Resets the options to the factory defaults. Effectively the same as calling .options({}) while preserving the appendTo option.

.emitValues()

Emits all of the data events listed below. Mostly used internally, should be avoided in consumer-land.

.setValue(value)

Sets the current date to the provided value, but only if that value is valid according to the rules defined by the calendar. Takes string, Date, or moment. Mostly used internally, and it doesn't emit any events.

.refresh()

Forces a refresh of the calendar. This method will redraw the month and update the dates that can be selected in accordance with dateValidator and timeValidator.

.back()

Steps the calendar display back by one month. Equivalent to clicking the 'back' button. Returns undefined.

.next()

Steps the calendar display forward by one month. Equivalent to clicking the 'next' button. Returns undefined.

Events

Rome calendars also provide a few events you can subscribe to. These events are published through an event emitter created using contra. These events are listed below.

Event	Arguments	Description
ready	[options]	The calendar has been .restored
destroyed	[]	The calendar has been .destroyed
data	[value]	The date may have been updated by the calendar. Value of .getDateString() is provided
year	[year]	The year may have been updated by the calendar. Value of moment.year() is provided
month	[month]	The month may have been updated by the calendar. Value of moment.month() is provided
day	[day]	The day may have been updated by the calendar. Value of moment.date() is provided
time	[time]	The time may have been updated by the calendar. Formatted time string is provided
show	[]	The calendar has been displayed
hide	[]	The calendar has been hidden
back	[month]	The calendar view has been moved back a month to the value moment.month()
next	[month]	The calendar view has been moved forward a month to the value moment.month()

Date and Time Validator

Please note that dateValidator and timeValidator both receive a native Date object as a parameter. These methods are expected to return undefined or true if the date is deemed valid, and false in case the date is invalid. If dateValidator returns false, the validation process will try to find a valid date near the desired date.

If dateValidator passes for a given date, the timeValidator will attempt to validate that date as well. If the time is invalid, the day will be probed for a valid time. This validation starts at the desired time, and grows in timeInterval increments. When the end of the day is reached, validation resumes at the start of the day instead of leaping to the next day.

rome.val

There are a few default validator factories provided by Rome to make your life easier.

These methods take a moment, a Date, a string that can be parsed into a moment using inputFormat, or a DOM element that Rome could use to look up another Rome instance.

If you passed in a DOM element, the validator will look up the associated Rome instance and validate using its value. The first time the validator is executed on any inline calendar, the 'data' event for that calendar will be hooked to refresh the related calendar.

For usage examples you can refer to the demos.

rome.val.afterEq(value)

Returns whether the date is after the provided value. The comparison uses >=, meaning it's inclusive.

rome.val.after(value)

Returns whether the date is after the provided value. The comparison uses >, meaning it's exclusive.

rome.val.beforeEq(value)

Returns whether the date is before the provided value. The comparison uses <=, meaning it's inclusive.

rome.val.before(value)

Returns whether the date is before the provided value. The comparison uses <, meaning it's exclusive.

rome.val.except(left, right)

Returns whether the date is any date except the provided value. You can provide a wide variety of input values. Keep in mind Date, string, moment, and the DOM element used to find another calendar are all valid input types.

Providing left only means "any date except this one"

If you use rome.val.except('2014-08-09'), then '2014-08-09' is invalid.

Providing left and right means "any date that's not in this range"

If you use rome.val.except('2014-08-09', '2014-09-01'), then anything between '2014-08-09' and '2014-09-01' is invalid.

If left is an array, each element in the array is treated as the simple case described above

In this case, right is completely ignored. Every item in the array is treated as follows.

If the item is single, then a rule is built on that single date

Using rome.val.except(['2014-08-09', '2014-09-01']) means that '2014-08-09' and '2014-09-01' are both invalid dates.

If the item is an array, the first two items are used to determine a date range

Using rome.val.except([['2014-08-09', '2014-09-01']]) means anything between '2014-08-09' and '2014-09-01' is invalid.

These two types of entries can be combined in any way you like. Each entry will exclude additional dates.

For instance, [['2014-04-05', '2014-04-15'], ['2014-04-25', '2014-04-30'], '2014-05-05'] means that April 05 to 15, and April 25 to 30, along with May 05 are all invalid dates.

rome.val.only(left, right)

Identical behavior to rome.val.except, except for the fact that the selected dates become the only valid dates, rather than the only invalid dates.

rome.moment

Exposes the moment instance used by Rome. To change the moment instance, refer to rome.use(moment).

rome.use(moment)

Sets the instance of moment used by Rome.

Development

Start by installing any dependencies.

npm install

Then run the Gulp watch task.

gulp watch

Lastly open the page and any changes you make just need a browser refresh.

open index.html

License

MIT

rome's Issues

Changing month updates selected date in inline calendar

It should be optional whether the inline calendar changes the selected date when you navigate through months. In my use case I trigger an expensive HTTP request when the date changes.

Update options after init?

I have two inline pickers to represent a range. I want to prevent the user from navigating to a month before the start date in the end date picker, and vise-versa (since all of the dates are excluded by the date validator, anyway). To implement this behavior, I'll need to update the min/max when the user picks a date in either picker. It doesn't seem like there's a way to update options after initialization without destroying the pickers first.

So, I tried destroying/restoring the pickers each time a user picks a date, but the options.reset()/options({ }) methods don't seem to work with inline pickers. See http://jsfiddle.net/yaz9wsd5/

When I call reset, the picker disappears. Calling .show() after reset reveals the picker again, but the container element is no longer inside the associated element, and is instead appended to the document body. Is this behavior expected?

Visual-only initialValue

For our use case it'd be good to have a way to set a date that is highlighted in the picker yet not mirrored in the input itself. This is because users can set a default value of the input box that should preside over the picker's initialValue. Do we have any demand or resistance to this in the audience?

Language support

Hi,
i know that rome depends on moment and moment support multilanguage, but how can i change the language for months and days?
Thanks in advance and sorry for my english

IE 8

it doesn't appear to work with IE8.

option to use as polyfill for input type=date

it would be nice to be able to call something like

rome.polyfill() and make it handle all inputs with type=date like https://github.com/chemerisuk/better-dateinput-polyfill/

Can you port Rome in Dart?

All roads came to Rome, so: why only javascript? I'm a Dart developer and I'd love using this in my Dart projects. Please consider porting this library in native Dart.

autoHideOnBlur not working (on Firefox)

The option autoHideOnBlur doesn't seem to work. I've set it like this:

var input = document.querySelector('.date-input');
rome(input, {autoHideOnBlur: true});

Is there a way to display the calender and time above the input?

If the calendar is very low in the page and u show it doesn't have room and pushes the window. I am kind of stuck on this one. Been playing around for quite a while, can anyone point me in the right direction? appendTo: don't seem to work to me or I am using it wrong.

Use of min and max in time-only mode

I assume you intend for the min and max options to function properly in time-only mode, but I get an error any time I try to use them in this way.

Using these options:
{"date":false,"min":"08:30","max":"14:30"}

I get this error:
Uncaught Error: 'max' must be at least one day after 'min' defaults.js:55

initialValue generates error

Using initialValue (both from String and from Date) leads to a "Uncaught TypeError: Cannot set property 'textContent' of undefined" exception. See this jsfiddle.

setValue doesn't update the value in the input element

The following does not update the date value in the input element:

var instance = rome(input);

instance.on('ready', function () {
    this.setValue('2014-09-01 12:30');
});

Here's the demo: http://jsfiddle.net/jLafsg3h/

---

Setting the value of the input programmatically doesn't update the datepicker's date:

var instance = rome(input);

instance.on('ready', function () {
    input.value = '2014-09-01 12:30';
});

After this, opening the datepicker still shows the old date.

---

Is there any way to update both the input field and the datepicker at the same time?

Can't rebind on element after destroy

After destroying a date picker on an element, you cannot initialize a new date picker on the element. This seems to be caused by the left-over data attribute data-rome-id; removing the data attribute on the element resolves the issue.

Calling .show() on an instance does not show it

Here's a demo: http://jsfiddle.net/9gw4hkdx/

Upon inspection, it seems that the instance api's show property has been set to the noop function.

Hijri

Hijri Calendars could be added as well.

Error when using before/after validators and initial values

There seems to be a race condition if you have a before/after validation pair and want to specify initial values, resulting in "Uncaught TypeError: undefined is not a function" in validators.js:26 (getMoment isn't defined yet) and "Uncaught TypeError: Cannot set property 'textContent' of undefined " in text.js:5 (elem is undefined). Unfortunately, there error occurs only intermittently. I haven't yet been able to create a clear test case but wanted to advise already. As soon as I have a fiddle, I'll comment.

Year and Month selection suggestion

Hello,
I like rome very much, thanks for the great work! And I have a suggestion that could make changing year and month more convenient, hope you can consider it.
Change the popup panel header layout from:
← August 2014 →
to:
- August + - 2014 +
It's also quite simple, convenient and intuitive.

naming confusion which is now standalone?

Hi man :-) great library as I already told you at FEC14. I love opt-in and no dependencies!

One thing that confused me was that I know the term standalone as to be the version that includes all dependencies so that it can "stand alone". In your example its the otherway around. So is rome.js including moment or is it rome.standalone.js that includes moment?

Cheers and again great lib!

Doesn't re-open on iOS

steps to reproduce

1. iOS 7, Safari
2. Tap on a Rome field, select a date
3. After the picker closes, tap on the field again

what happens

Nada.

expected behavior

Rome's picker should appear again.

Another note: the picker does appear again if the Rome instance is destroyed and attached agai each time the picker closes.

Use getBoundingClientRect instead of offsetTop and offsetLeft

offsetTop and offsetLeft only give position relative to the parent element, resulting in a datepicker floating somewhere in the upper right of the page if any of the input's parents have position: relative. Try giving .parent a position: relative style in the demo.

This function in inputCalendar may be modified to make the datepicker position itself correctly in this scenario:

function position () {
  var bounds = input.getBoundingClientRect();
  var scrollTop = document.body.scrollTop;
  api.container.style.top  = bounds.top + scrollTop + input.offsetHeight + 'px';
  api.container.style.left = bounds.left + 'px';
}

Here's a browser compatibility table for getBoundingClientRect taken from MDN:

+---------------+--------+-----------------+-------------------+-------+--------+
|    Feature    | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
+---------------+--------+-----------------+-------------------+-------+--------+
| Basic support | 1.0    | 3.0 (1.9)       | 4.0               | (Yes) | 4.0    |
+---------------+--------+-----------------+-------------------+-------+--------+

It's inconvenient to switch between the years.

Thanks for the great work!
But it's inconvenient to switch between the years currently. Is there a fast way to change the years?

Doesn't respect moment week dow (day of week)

If using a locale where the first day of the week is Monday instead of Sunday, rome doesn't display Monday as the first day of the week. You can use the Swedish locale 'sv' as an example.

Using Rome with React

Others using React this may be helpful:

tl;dr React component lifecycle will by default cumulatively add event listeners to any rome instances in the component. So. much. Event.
Current fix thoughts: Store rome rendered state (and only apply when "new"), OR monkey patch contra.emitter OR destroy and rebuild Rome every componentWillUpdate + render cycle.

Injecting a rome instance into a React component looks something like this:

var calComponent = React.createClass({
  render: function () {
    if (this.refs.rome) {
      rome( this.refs.rome.getDOMNode() ).on('data', function () { console.log('fire!'); });
    }
    return (
      <div>
        <div ref="rome"></div>
      </div>
    );
  }
});

Rome events are intended and expected to be added once to your rome instance. In a normal DOM render cycle, this is the case.

Not in React. When your component updates (setting state for example) every React render() cycle re-adds the events to your now stored (via virtual DOM references) rome instance, and you end up with multiple unexpected listeners. (ie. you'll see "fire!" logged repeatedly to your console on changing dates).

This is NOT specifically an issue with Rome. It exhibits due to unexpected (from Rome's perspective) rendering lifecycle.

Initially handled this by monkey-patching contra.emitter with an .only(type,fn) listener that overwrites the evt = {} (so there is only ever one listener on type, it never uses 'push()' to expand the array of listeners - ymmv). Now storing a render state value in the React component itself, only applying event watchers when the component state has not yet been handed a rome# instance from rome().

Another option is to destroy the rome instance on the React componentWillUpdate lifecycle method and rebuild a new one on re-render, but this will reset any user state on the rome instance (like the new date they selected etc).

👾

inititalValue not set if inputFormat is set

rome(input, {
    initialValue : '2014-12-08',
    inputFormat  : 'MM/DD/YYYY',
});

Removing the inputFormat correctly sets the initial value.

Here's a fiddle demonstrating this: http://jsfiddle.net/znwyqfux/

Customizing

Hi
Want to add some additions.

1. Ability to show events/holidays on some days when mouse is hovered.
2. Addition of shortcuts to calendar, for eg "Today". Also adding list of coming months, so easy traversing diff months, like this is JULY, so add "AUG", "SEPT", "OCT", "NOV", "DEC".
3. Highlighting weekends.
4. Range Picker, so coordination b/w two inputs.

Thanks.

CDNJS?

Not an issue, but would love to see this superb library on https://cdnjs.com

Including rome in a debug browserify break source maps

If rome is included in a browserify build which has debug: true option set the exported source maps fail to be read by the browser.

Prev/next month buttons are submit buttons

When placing an inline date picker in a form, changing the month triggers form submit. This is caused by the buttons being created without a type, thus defaulting to a submit type (!). The solution would be to create them with attribute 'button'.

In the demo, the 'Date Between' example does not allow you to browse to the first month in the range

In the demo the 'date between' example does not allow you to navigate to December 2013 to select the 31st (or October 2014 to select 1st October either for that matter).

However you are able to select it by navigating to January 2014 and selecting the 31st (or September and selecting 1st October) as the first week is shared between the months.

Same issue if setting the start date to 30th October.

Setting the start to 29th December instead of 30th December allows you to navigate to December 2013 to make your selection.

Firefox 24.2.0 and Chrome 36 on Windows

Time selector stays open

1. open first date/time picker example
2. click on the time selector
3. keep the time selector open and click on a date
4. the date picker closes while the time selector stays open

Set default date based on first cal value

I have two instances of rome bound together to validate a range between their two dates. Is it possible to have the second calendar to open on the same month of the first calendar's date by default?

For example if today is 2015-01-10, the first calendar open up showing today, but I set a date on next October. When I set the ending range on the second calendar, I have to navigate all the way to October to start choosing a valid end date. Can the second calendar show the October month instead?

Can select times past min & max

http://bevacqua.github.io/rome/

On the last option, while selecting a date defaults to the min/ma specified time, I can still select times past the specified range.

Safari 7.0.2

Specifying Min/Max while starting outside of that range: can't page.

On your documentation site, you have an example that says, "It works great with specific date and time too!" This example is breaking for me because the max date is set for September 2014, but since it is currently October, the calendar opens up showing October 2014. The arrow buttons to change between months are disabled, so I can't go back to an eligible time.

plans for making an angular directive?

Nice datepicker;
just wondering if there are plans for making an angular directive based on rome?

`Today` class

It would be good to have a class for the current day so that style can be applied to visually represent the current day as seen in many calendars implementations.

repo

works great - could you add to https://cdnjs.com ? thanks!

Validation accepts invalid dates

Hi,

It seems validation when trying to validate against another datepicker (to allow for range selection) does not work, and that validation only works against a static (deterministic?) target. See this JSFiddle for an example.

In other words, if the dateValidator compares against a fixed date (and returns true/false from the moment of validation), it works - but if I'm trying to compare a moving target (like another datepicker's value), it does not work: while the validation function is called multiple times to find a valid date, in the end the originally picked (and invalid) date still gets accepted.

Cheers,

E

Time picker stays open when date picker is closed

In the demo, engage rome on the first input. Click to select a time. Then click away to exit the date picker without selecting a time. The time picker stays open and the data picker closes.

1 example not working in Firefox

"Did I mention you can use Rome inline as well? Just give it a non-input element!"

example not working in Firefox. Works fine in Chrome, for example. Didn't try other browsers.

rome(left).on('data', function (value) {
    result.innerText = value;
});

not working when I try to get the value back.

Any ideas why?

How to validate date and time together?

rome.val.afterEq(left), rome.val.afterEq(right)
does not seem to work when the format is: "inputFormat": "YYYY-MM-DD HH:mm:ss"
it does not allow same day for some reason.

How would you validate so that left would be always we before the right when you also have time?

time list always focus on 00

is there any chance can timelist focus on an item which close to the given time?

standalone not available via npm

I've installed rome via npm. I'm also using moment separately. So I initialize them like this:

var moment = require('moment')
var rome = require('rome');

But since I'm using my own installed version of moment, I've tried using the "standalone" version of rome like this: var rome = require('rome.standalone'); but that doesn't work.

Getting moment object on change

I want to get the moment object when the datepicker has been used.

I want to get it when any part of the date has changed, i thought using this would be the most appropriate:-

Rome(parent).on('data', function (value) {
  console.log(Rome(parent).getMoment());
});

On using the datepicker for the first time the moment object is returned as null, subsequent uses of the datpicker does return the moment object.

I decided to use the year event instead like this:-

Rome(parent).on('year', function (value) {
  console.log(Rome(parent).getMoment());
});

Which works fine, i'm able to get the moment object straight away on the first usage of the datepicker.

What is your recommended way of getting the moment on change? maybe the data event needs changing slightly so the moment object is available at that point.

Problem with initial value + range between two inputs

If you specify an initial value on both inputs by setting value='2014-07-09' on the input tag itself, adding dateValidator: rome.val.beforeEq(dateEnd) to the first rome's properties will cause a javascript error (it seems to be in the validation code). The one on the second rome seems to be fine.

Because of the error, the value of the input defaults to today's date as soon as you click away or on the input field.

I've made sure of this by just adding the initial values to the example page on the example where it demonstrates a range between two inputs:

<p>Range between two inputs? Sure!</p>
<input id='left' class='input' value='2014-07-09 21:00' />
<input id='right' class='input' value='2014-08-09 21:00'  />

click the first input and you will see it change to today's date instead of July 9

how to disable previous date.

please help me how to disable previous date in one function rome(input), then how to set time to 00:00 as default.

dependencies

First, thanks for developing it.
I'd like to discuss about the dependencies bundled within rome..
I was already using lodash and moment in my project. I also use bower, so, I think that dependencies should be handled differently, using bower.json.
Another issue is IE support: my project doesn't support old browsers and rome code has many polyfills to handle IE9. Is there any easy way to remove that?

The bottom line is: what is pure rome, regarding not including polyfills, utils (lodash, etc), moment.. There there a easy way to build that clean source?
Thanks

Allow for inline date picker without any selection

Currently DateTime.now is used as default. But I would like to to be able to have no selection be made on start.
It can show the dates around the current date at start, but without having anything selected.

Hit this in an issue with angularjs, the calendar has a selected value, and the user thinks it's valid but angular's viewmodel has no value.

Would this be possible to support?

Navigating through months is changing the actual selected date

The original selected date is updated with a new one every time I change the month and the 'data' event is emitted. Is it possible to only browse through the months (with no event triggered) and set the new date only when clicking the actual days?

a11y

This picker is awesome. Almost everything I need really. Except it's not accessible at all... How would someone confined to a keyboard be able to use this component? Would really appreciate some ability to make this component accessible.

Demos with predefined range do not work

On demo page Pick a date between 2013-12-30 and 2014-10-01 and the next one do not work properly. Arrows are not clickable so you cannot list the calendar to allowed range to set a date.

Time input also ignores clicks.