bevacqua/rome

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

rome's Issues

IE 8

it doesn't appear to work with IE8.

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

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.

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.

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?

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.

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    |
+---------------+--------+-----------------+-------------------+-------+--------+

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?

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?

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/

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.

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.

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?

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.

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.

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

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'.

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.

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.

plans for making an angular directive?

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

repo

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

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?

`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.

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.

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.

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.

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

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.

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/

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

time list always focus on 00

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

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.

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

Hijri

Hijri Calendars could be added as well.

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).

👾

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.

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?

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

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?

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?

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

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.

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

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

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.

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.

CDNJS?

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

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!

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.