wesm87 / ember-datepicker

Date picker using Pikaday and Moment.js

Ember CLI Datepicker

Description

This component is an Ember CLI addon and uses moment.js along with Pikaday to create an extensible Ember component. This is still a work in progress. Pull requests are welcome.

Installation

# Install the addon and include it in your project
$ ember install ember-cli-datepicker

Basic Usage

<DatePicker @date={{someDate}} @valueFormat="YYYY-MM-DD">

Demo

Clone this repo and run the app:

# Install ember-cli globally
$ yarn global add ember-cli

# Clone the repo
$ git clone https://github.com/wesm87/ember-datepicker

# Move into the ember-datepicker directory
$ cd ember-datepicker

# Install dependencies
$ yarn

# Fire up the local server
$ ember serve

Options

When calling the datepicker, the following options are available:

General Options

date

Type: String | Date

This variable will be changed when the user changes the date. It will be updated using the valueFormat specified.

valueFormat

Type: String
Default: 'X'

This is the format in which the date is passed back to the controller.

Must be one of the following:

• A valid moment.js format
• 'date' to be recognised as a Javascript Date object.
• 'moment' to be recognised as a Momentjs object.

format

Type: String
Default: 'YYYY-MM-DD'

This is the format in which the date is displayed in the input box.

Must be a valid moment.js format.

yearRange

Type: String | Array<Number>
Default: '-3, 4'

This range of years to be displayed. It is either in the form of a relative range (the first option goes from the current year back 3 years, and forward 4 years), or it can be defined in absolute terms. The value may also be an array. Here are some examples of valid inputs.

yearRange: '-3, 4'
yearRange: '2010, 2016'
yearRange: [-2, 8]
yearRange: [2000, 2020]

numberOfMonths

Type: Number
Default: 1

The number of months to display in the datepicker component.

allowBlank

Type: Boolean
Default: false

Can be set to allow blank dates (date = null). By default, null values will be replaced by the current date on initial render and every time the datepicker is closed. With this option, date may stay null.

utc

Type: Boolean
Default: false

Per default, the created date value will obtain the computer's timezone and therefore not have UTC midnight as its time and will be a few hours off instead.

For example, when your timezone is 8 hours ahead of UTC: Creating a date object from the input '2000-01-01' will result in '1999-12-31T16:00:00.000Z', because when your computer has the time of 00:00:00 on Jan 1st 2000, UTC time is still in 1999. This is technically correct, but may not be what you want.

If you want to have easy-to-compare date strings in your JSON, set utc to true and you will get '2000-01-01T00:00:00.000Z' as expected.

ember-datepicker's Issues

npm install failure

Hi there, we were trying to install your package but we got this error:

$ npm install ember-cli-datepicker --save-dev
/
> [email protected] install /Users/dweebit/lemur-collections/frontend/node_modules/ember-cli-datepicker
> bower install

bower loader.js#1.0.1           cached git://github.com/stefanpenner/loader.js.git#1.0.1
bower loader.js#1.0.1         validate 1.0.1 against git://github.com/stefanpenner/loader.js.git#1.0.1
bower ember-cli-shims#0.0.3     cached git://github.com/stefanpenner/ember-cli-shims.git#0.0.3
bower ember-cli-shims#0.0.3   validate 0.0.3 against git://github.com/stefanpenner/ember-cli-shims.git#0.0.3
bower ember-cli-test-loader#0.0.4           cached git://github.com/rwjblue/ember-cli-test-loader.git#0.0.4
bower ember-cli-test-loader#0.0.4         validate 0.0.4 against git://github.com/rwjblue/ember-cli-test-loader.git#0.0.4
bower ember-load-initializers#0.0.2         cached git://github.com/stefanpenner/ember-load-initializers.git#0.0.2
bower ember-load-initializers#0.0.2       validate 0.0.2 against git://github.com/stefanpenner/ember-load-initializers.git#0.0.2
bower jquery#^1.11.1                        cached git://github.com/jquery/jquery.git#1.11.1
bower jquery#^1.11.1                      validate 1.11.1 against git://github.com/jquery/jquery.git#^1.11.1
bower handlebars#~1.3.0                     cached git://github.com/components/handlebars.js.git#1.3.0
bower handlebars#~1.3.0                   validate 1.3.0 against git://github.com/components/handlebars.js.git#~1.3.0
bower ember-data#1.0.0-beta.10              cached git://github.com/components/ember-data.git#1.0.0-beta.10
bower ember-data#1.0.0-beta.10            validate 1.0.0-beta.10 against git://github.com/components/ember-data.git#1.0.0-beta.10
bower ember-resolver#~0.1.7                 cached git://github.com/stefanpenner/ember-jj-abrams-resolver.git#0.1.10
bower ember-resolver#~0.1.7               validate 0.1.10 against git://github.com/stefanpenner/ember-jj-abrams-resolver.git#~0.1.7
bower ember#1.7.0                           cached git://github.com/components/ember.git#1.7.0
bower ember#1.7.0                         validate 1.7.0 against git://github.com/components/ember.git#1.7.0
bower ember-qunit#0.1.8                     cached git://github.com/rpflorence/ember-qunit.git#0.1.8
bower ember-qunit#0.1.8                   validate 0.1.8 against git://github.com/rpflorence/ember-qunit.git#0.1.8
bower ember-qunit-notifications#0.0.4       cached git://github.com/dockyard/ember-qunit-notifications.git#0.0.4
bower ember-qunit-notifications#0.0.4     validate 0.0.4 against git://github.com/dockyard/ember-qunit-notifications.git#0.0.4
bower qunit#~1.15.0                         cached git://github.com/jquery/qunit.git#1.15.0
bower qunit#~1.15.0                       validate 1.15.0 against git://github.com/jquery/qunit.git#~1.15.0
bower pikaday#~1.2.0                    not-cached git://github.com/dbushell/Pikaday.git#~1.2.0
bower pikaday#~1.2.0                       resolve git://github.com/dbushell/Pikaday.git#~1.2.0
bower moment#~2.8.3                         cached git://github.com/moment/moment.git#2.8.4
bower moment#~2.8.3                       validate 2.8.4 against git://github.com/moment/moment.git#~2.8.3
bower ember-cli-shims#0.0.3                ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/stefanpenner/ember-cli-shims.git", exit code of #128

Additional error details:
fatal: read error: Connection reset by peer
npm ERR! [email protected] install: `bower install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the ember-cli-datepicker package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     bower install
npm ERR! You can get their info via:
npm ERR!     npm owner ls ember-cli-datepicker
npm ERR! There is likely additional logging output above.

npm ERR! System Darwin 13.4.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "ember-cli-datepicker" "--save-dev"
npm ERR! cwd /Users/dweebit/lemur-collections/frontend
npm ERR! node -v v0.10.28
npm ERR! npm -v 1.4.16
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/dweebit/lemur-collections/frontend/npm-debug.log
npm ERR! not ok code 0

Looks like it's failing to fetch ember-cli-shims.

package collides with ember-i18n

Ember : 1.12.0
Ember Data : 1.0.0-beta.18
jQuery : 1.11.3
ember-cli-datepicker: 2.0.1
ember-cli-datepicker: 2.0.1
ember-i18n: 4.0.0-beta.2

in function:

        for (arr = [], i = 0; i < 12; i++) {
            arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
                (i === month ? ' selected': '') +
                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled' : '') + '>' +
                opts.i18n.months[i] + '</option>');
        }

opts.i18n is set to service:i18n

Actually when you do :

    ['bound', 'position', 'reposition', 'format', 'firstDay', 'minDate',
     'maxDate', 'showWeekNumber', 'isRTL', 'i18n', 'yearSuffix',
     'showMonthAfterYear', 'numberOfMonths', 'mainCalendar'].forEach(function(f) {
       if (!Em.isEmpty(that.get(f))) {
         pickerOptions[f] = that.get(f);
       }
     });

i18n is already in the context because injected by the i18n component. You might want to use a private name like _i18n in order to prevent collisions.

Datepicker in completely wrong position

I've just installed ember-datepicker via ember install:addon ember-cli-datepicker

As you can see in the screenshot it is completely in the wrong position. The container's position is absolute and relative to 0,0 as it seems (its like (-500,-200) or when I change its position in my form oftentimes even completely off screen.
What can I do to get it below the actual input-field?

automatically defaults to today's date

I'm not sure how to stop that, I see nothing about it in the docs.

value/date not set after clicking a date

    = date-picker date=startDate valueFormat='YYYY-MM-DD' allowBlank=true

after I click the date, the input field doesn't show anything. If I type a date, the startDate is updated

Generates Deprecation warnings with newer version of Ember

This module generates nasty deprecation warning with Ember 1.13 and errors with Ember 2.0.

DEPRECATION: Using `Ember.HTMLBars.makeBoundHelper` is deprecated. Please refactor to using `Ember.Helper` or `Ember.Helper.helper`. [deprecation id: ember-htmlbars.make-bound-helper]

Update documentation on README.md

Hello,

It looks like the README.md needs a quick update:

outputFormat

Type: String Default: YYYY-MM-DD

This is the format in which the date is displayed in the input box.

After messing around with it for a bit it appears that the correct argument is simply 'format'

{{date-picker date=dateArg format="MM-DD-YYYY" valueFormat="YYYY-MM-DD"}}

Feature Request: Allow minDate/maxDate to be bound

Currently the minDate and maxDate parameters will only accept a raw Date object. This follows pikaday's functionality but it leaves a lot of potential on the table.

For example, imagine a start and and end date pickers, the end date could have the minDate bound to the selected start date.

If I have enough time left at the end of this project I'll see if I can put a pull request together but I thought I'd record it here for others in case they also wonder why their date pickers aren't responding to their computed min/max dates.

Pikaday is not defined?

I get a "TypeError: undefined is not a function" in my console. It references the line where new window.Pikaday is called, in the didInsertElement. I think that pikaday is not being recognized as a global?

I double checked and confirmed that app.import is including it in my brocfile, and it is also included in .jshintrc predef.

Not sure what else to look for?

API inconsistency with yearRange

In README.md the yearRange option is described as an array of two integers.

However, in https://github.com/gevious/ember-datepicker/blob/master/addon/components/date-picker.js#L29 it is clear that yearRange is expected to be a comma separated string.

What is the right way? I preferred the array style.

Add Changelog

Since the version number jumped to 1.0.0, there should be a CHANGELOG.md that gets updated with added features and updated dependencies to make it easier to track changes when using this component in production.
Entries should include date and version number from package.json (maybe commit hash also?)

Idea: Add some basic components

To save people from a lot of pain... took me several hours to get this working (f.ex not logical that an input field is required for a non-bound datepicker!)

// app/componenents/inline-month-picker.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'div',
  classNames: ['month'],
  attributeBindings: ['month', 'year'],

  monthDate: function() {
    return moment().year(this.get('year')).month(this.get('month'));
  }.property('month', 'year'),

  minDate: function() {
    return moment(this.get('monthDate')).date(1);
  }.property('monthDate'),

  maxDate: function() {
    return moment(this.get('monthDate')).add(1, 'months').date(-1);
  }.property('monthDate'),

  pickerConfig: function() {
    var container = this.$('.month-picker')[0];
    var field     = this.$('.date-field')[0];

    var minDate   = this.get('minDate').toDate();
    var maxDate   = this.get('maxDate').toDate();
    return {
      field: field,
      firstDay: 1,
      minDate: minDate,
      maxDate: maxDate,
      bound: false,
      container: container
    };
  },

  datePicker: function() {
    var config = this.pickerConfig();
    new Pikaday(config);
  },

  didInsertElement: function() {
    this.datePicker();
    return this._super();
  }
});

<span class="month-picker-container">
  <div class="month-picker">
      <input class="date-field" style="display: none"/>
  </div>
</div>

Custom styling made easy

.month-picker-container {
  .pika-prev.is-disabled,
  .pika-next.is-disabled {
    display: none;
  }
}

Datepicker automatically opens after switching browser tabs

When returning to a tab that has a datepicker active the default theme is opened immediately, as the default theme is full screen this is very intrusive on users.

To replicate:

• Browse to http://amsul.ca/pickadate.js/date/ (or any other implementation)
• Open first datepicker ('Ty me...')
• Close by selecting a day or the close button
• Switch to a different tab in Chrome
• Switch back to the datepicker demo and the datepicker is open.

Tested in Chrome.

Auto install of bower package

• Ensure that moment and pikaday are installed seamlessly when installing this addon
• Ensure that libraries are loaded correctly

Ideally we want to remove the chance of bumping into #18.

Undefined globPattern warning during npm install

Installing for the first time into a project...

ripley:vapr pete$ ember install:addon ember-cli-datepicker
version: 0.1.9
Installed packages for tooling via npm.
installing
The globPattern "undefined" did not match any files, so no file updates will be made.
Installing browser packages via Bower...
  not-cached git://github.com/dbushell/Pikaday.git#*
  resolved git://github.com/dbushell/Pikaday.git#1.3.1
Installed browser packages via Bower.
Installing browser packages via Bower...
  not-cached git://github.com/moment/moment.git#*
  resolved git://github.com/moment/moment.git#2.9.0
Installed browser packages via Bower.
Installed addon package.

master seem to not be able to import moment.

I know this is probably not maintained currently. I'm just leaving this issue here for the public.

I'm not entirely sure why, but it fails to import moment unless I manually add:

"ember-cli-moment-shim": "^3.6.0",

to package.json. Also the latest released version no longer works with ember, but the unreleased version does, if someone takes over maintenance it would be good to do a new release immediately just for the "".fmt issue.

Add time parameters support

Would it be possible to add support for timepicker params such as:

showTime: true
showSeconds: false
use24hour: false

from this fork - https://github.com/owenmead/Pikaday?

Integration testing issues

I'm having issues with integration testing with this. No matter what I fill the field in with the test fails because it's returning todays date and time.

fillIn(".date", timeline.event_date);

Here's what timeline looks like:

var timeline = {
    id: 101,
    title: 'My new About',
    event_date: new Date(2014, 02, 03).toString(), //March 3rd, 2014
    description: "My new abouts description",
    is_published: "true"
  };

I've tried to to string it, adding just 2014-03-03 to the field, and keeping it as a date object without any luck.

new to ember-cli addons, but...

Shouldn't this not be in the Brocfile.js?

app.import('vendor/bootstrap/dist/css/bootstrap.css');

Assumes the bootstrap addon is installed right?

How to i18n?

How do I localize this component?

Add "main" in the bower.json

Build tools use that property to extract the files required.

deprecation for changing property in didInsertElement

The following deprecation is trigger when using ember-cli-datepicker addon:
A property of <myapp@view:-outlet::ember4071> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. [deprecation id: ember-views.dispatching-modify-property]

This is triggered after https://github.com/wesm87/ember-datepicker/blob/master/addon/components/date-picker.js#L174

Moment.js deprecation

As per latest news from moment.js, there will not be any major release and also, we should migrate to any of the alternative libraries like luxon, day.js or date-fns.

So, can we add a support of enabling underlying library while configuring the date-picker package?

date var comes out in a strange format

my date var comes out like 1420070400, should be http://www.iso.org/iso/home/standards/iso8601.htm

had to set valueFormat="" to get it to behave

'container' option

I recently had a need to have pikaday render into a specified element. Pikaday has a 'container' option for this but ember-datepicker doesn't pass it through.

When adding it to the list of passed-through options I ran into two issues:

1. 'container' seems to be a reserved word in ember
2. Pikaday only accepts a plain element which is difficult to pass through as in most cases the element you want to pass through won't have been rendered when the component is being initialised

To solve the above I added a 'containerElement' option that also accepts a selector string so that we can use jQuery to grab the element in the component's didInsertElement hook: https://github.com/kevinansfield/ember-datepicker/blob/container-param-selector/addon/components/date-picker.js#L81

If you think it would be a useful addition I'll add some acceptance tests and make a pull request.

i18n option

It would be great if the component can also passthrough the i18n option to pikaday.

Moment.js not found

Should Moment.js be in the ember-datepicker bower or package json files?

I'm getting this error during ember-cli build:
Path or pattern "bower_components/ember-cli-datepicker/js/moment.js" did not match any files.

[Report Only] Refused to load the image...

The datepicker has all icons and works fine eventhough it says "Refused to load the image.."
It seems it's the contentSecurityPolicy related issue that I am not familiar with.
Is it ok to have this message from the console? How could I fix this error?

The exact error message is below.

 [Report Only] Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQ…CoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=' because it violates the following Content Security Policy directive: "img-src 'self'".

How do i disable data-picker?

{{date-picker disabled=(eq a b)}}

How to clear date selection to blank?

I am trying to reset the date selection but I am not successful.
Could you give me an example?

Supporting date values

Is it possible for this to work with a value that is a date as opposed to a string? I'm using ember-data and when I use it like this...

{{date-picker date=happenedAt outputFormat='MMMM D, YYYY'}}

...it does not work because it's expecting the date to be a unix timestamp.

Handlebars error: Could not find property 'date-picker' on object

I am using ember-cli 0.1.2 and execute the following instructions to install the addon as you recommended.

npm install ember-cli-datepicker --save-dev
ember g ember-cli-datepicker

I got the error saying "Handlebars error: Could not find property 'date-picker' on object...."
What am I missing? Any idea?

Set the i18n translations

I can't find a way to set my i18n pikaday translations with the ember-datepicker.

My i18n translation is in the Ember.I18n.translations, where the ember-validations is getting the translatiosn. So i think if this component get the translations from this object or allow to pass it as a parameter via handlebars.

Cannot read property 'split' of undefined

Hi ,

I was using version 1.1.0 of ember-cli-datepicker and everything worked as expected. I updated the add-on today to version 1.2.1 and I started getting the following error:

Cannot read property 'split' of undefined happening at line 32 of addon/components/date-picker.js

While doing some testing I've noticed that this error has been introduced in version 1.1.1 and is happening if the yearRange property is in Array form, both [-2,8] and [2000,2020].

From my understanding the issue is at line 20, Em.$.isArray(yr) is always false also if the value passed to yearRange is a valid array.

Brocfile issues and auto-install bower dep

app.import('bower_components/momentjs/moment.js');

Should be

`app.import('bower_components/moment/moment.js');``

Also, it is bad convention to use hardcoded string "bower_components", please use app.bowerDirectory instead.

`app.import(app.bowerDirectory + '/moment/moment.js');``

Please add an afterInstall hook in index.js to install the bower component auto-magically ;)

On the afterInstall I have seen it done, using the addon (app) API, but I forgot exactly where and how. Ask @rwblue or @stefanpenner ;)

Allow to show/hide the calendar

I would like to be able to show/hide the calendar depending either on a variable that represents the visibility state of it, or using an action