wesm87 / ember-datepicker Goto Github PK

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?

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?

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

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.

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.

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.

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

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.

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]

Build tools use that property to extract the files required.

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

How do I localize this component?

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

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.

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.

    = 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

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.

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

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.

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"}}

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

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

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

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.

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

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.

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?

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

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

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.

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

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

Assumes the bootstrap addon is installed right?

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.

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?

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

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.

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?