mydea / ember-date-components

An Ember add-on which provides pure Ember-based date picker components.

ember-date-components

An Ember add-on which provides pure Ember-based date picker components.

Compatibility

• Ember.js v3.16 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

• ember install ember-moment - This is a dependency that you will need to install manually
• ember install ember-date-components

Basic Usage

<DatePicker @value={{this.date}} @onChange={{this.updateDate}} />

<DatePicker @range={{true}} @value={{this.dateRange}} @onChange={{this.updateDateRange}} />

<TimePicker @value={{this.time}} @onChange={{this.updateTime}} />

<DateTimePicker @value={{this.date}} @onChange={{this.updateDateTime}} />

The date picker can also display custom options, e.g. 'Last 7 days'.

It also provides test helpers to easily interact with the date picker in integration & acceptance tests:

import { selectDate, selectDateRange, getSelectedDate, selectDateTime } from 'ember-date-components/test-support/helpers/date-picker';
import { selectTime, getSelectedTime } from 'ember-date-components/test-support/helpers/time-picker';

await selectDate('.my-datepicker', moment());
let momentInstance = await getSelectedDate('.my-datepicker');

await selectTime('.my-timepicker', moment());
let momentInstance = await getSelectedTime('.my-timepicker');

await selectDateTime('.my-date-time-picker', moment());

await selectDateRange('.my-datepicker', dateFrom, dateTo);

For more detailed instructions and examples, please visit the documentation.

ember-date-components's Issues

Change default placeholders in datepicker

How to change the default placeholder while using range=true. Placeholder option changes it for both the buttons.

Error in 2.1.0 with min & max value

How to reproduce:

• git clone https://github.com/mydea/ember-date-components.git
• cd ember-date-components
• yarn install
• ember serve
• visit http://localhost:4200/usage/date-picker
• Click "Select Date" in "With min & max value" section

error:

DatePicker Issue - Unable to select the dates for the second time

The DatePicker component appears to be broken. I am unable to select the date for the second time.

"ember-date-components": "^4.0.0",
"ember-source": "3.24.3",
"ember-cli": "~3.24.0",

Browser: Chrome v90.*
OS: Mac BigSur

I can see the same issue in the demo page:
http://mydea.github.io/ember-date-components/

Steps to reproduce:

1. Select a date in any datepicker in the demo page.
2. Now try to change the date by reselecting.

Ember power select breaks this addon

Using this addon along with ember-power-select causes ember-date-components to fail to render.

.date-picker__button--focus class not being applied correctly

If you mouse down on a button and then drag off and then mouse up, the datepicker will display but the button will not receive the .date-picker__button--focus class.

importCSS: false doesn't seem to work

Futhermore, when I grep for importCSS I don't even see it in the source.

`{{with}}` deprecation from ember-basic-dropdown v3

This add-on currently depends on ember-basic-dropdown (EBD) v3, which uses the {{with}} helper which is deprecated (and raises a build-time warning) in Ember v3.26+ and removed in Ember v4.0.

Currently working in an app (which we are slowly working towards upgrading to Ember v4) that directly depends on EBD v6 for other reasons and this package doesn't seem to conflict with it (apart from still raising the warning). Would be willing to submit a PR to update to ember-basic-dropdown v6 (which supports Ember v3.28+), or alternatively allow this package to accept a range of acceptable versions of EBD.

Cannot read property 'parentNode' of null

Hi guys,

I just got error Uncaught TypeError: Cannot read property 'parentNode' of null when everytime i click the component.

please give me solution

Allow entering of spaces in time-picker

Currently, when you enter a space in the time picker, the current text of the input field will be parsed and interpreted. This makes it impossible to enter e.g. "3:15 pm".

Adding other package support

https://momentjs.com/docs/#/-project-status/

As published in the moment official page, the support for moment going to be reduced. So, we may have to change/replace support for other popular date package like day.js.

Localizations

Hi,

2 Questions:

1. Is there a possibillity to localize only all texts without write an option with all params?
2. Can I add some customized css class names for the picker buttons? ( e.g. Bootstrap "btn btn-primary" )

Best regards,
Mario

Is this project active?

I've been using this addon for long time and I have some suggestions but I do not know if it is maintained.

Addon doesn't work for me

I've got TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

selectDate test helper

In a spirit of default ember test helpers (that follow principle - tell, don't ask), it would be nice to have a selectDate test helper that would just set a date. Currently it's required to get the datePicker object beforehand.

test('should add new post', async function(assert) {
  await visit('/posts/new');
  await fillIn('input.title', 'My new post');
  
  let datePicker = await getDatePicker('#date-picker');
  await datePicker.toggle();
  await datePicker.selectDate(moment());

  await click('button.submit');
  assert.equal(this.element.querySelector('ul.posts li').textContent, 'My new post');
});

could be written as

test('should add new post', async function(assert) {
  await visit('/posts/new');
  await fillIn('input.title', 'My new post');
  await selectDate('#date-picker', moment());
  await click('button.submit');
  assert.equal(this.element.querySelector('ul.posts li').textContent, 'My new post');
});

My assumption is that most common scenario is that you just want to set a date.
Would you accept PR for a selectDate test helper?

Dates are shown in the wrong weekday.

In ember cli 3.17.0 I'm getting the dates in the wrong weekday.

May should finish on Sunday.

Jun starts in the correct weekday:

But july starts in a wrong weekday:

add support for selecting month, year

Hi,
It would be nice to have selectable months and years. Like here https://eternicode.github.io/bootstrap-datepicker
Any plans for this?

yarn.lock contains unaccessible URL

The URLs in https://github.com/mydea/ember-date-components/blob/master/yarn.lock#L7 are not publicly accessible. It seems like the lock file should point at public URLs, or contributors will not be able to install dependencies.

Missing Date Time Picker Placeholders

Hi! Can you add your next release like datePlaceHolder timePlaceHolder?
I looking this file and you can add all parameters :)
https://github.com/mydea/ember-date-components/blob/master/addon/templates/components/date-time-picker.hbs

Regards,
Themesama

time-picker button not updating after select

Hiya, the time-picker doesn't seem to update the placeholder or button text after the time is selected. Even on the demo website, it doesn't work (tested on Safari & Chrome). The date-picker works fine, where the button text changes to the selected date - but doesn't do the same for the time.

On top of that, I can't seem to get the date-time-picker to work. I can select the date, but it doesn't trigger to enable me to select the time. The time button remains disabled.

Am I missing something here? Any ideas?

Thanks
S

Keep semantic versioning standards

Hey,
This is not an issue per say, but a request for the maintainers.
Since this is an ember addon with 1,821 downloads in the last month, please, use semantic versioning as it is supposed to be used.

v.1.1.0 should have been released as v2.0.0 since it brought "[POTENTIALLY BREAKING]" changes, which actually broke some of our builds :D

👍 +1 for keeping the changelog nice and clean.

If you need someone to keep the semantic versioning in check, let me know - I am more than happy to help out :)

Picking a time option has no effect sometimes

In time-picker, picking a time option has no effect sometimes. The issue can be seen in the demos. Seems like a race condition involving the value.

Steps:

1. click the time-picker input
2. click a time option
3. click the time-picker input
4. click a different time option

Expected: time-picker input's value is the value of the option selected the second time
Actual: time-picker input's value is the value of the option selected the first time

Notes: slowing things down, e.g. by adding a console.log() in the selectValue action, seems to make encountering this behavior less probable.

Prettier run messed up Ember.get calls

It looks like a prettier run messed up a bunch of Ember.get calls. This appears to be the case with every release after v2.0.6. An example is in time-picker.js.

After Prettier:

ember-date-components/addon/components/time-picker.js

Line 329 in f532d94

let { value, format } = this;

Before Prettier:
36e29c2#diff-dd2ea6f43e83040327c685e5bbcc1753L321

As you can see this:

    let value = get(this, 'value');
    let format = get(this, 'format');

Was changed to this:

let { value, format } = this;

I don't believe this type of object destructuring works for accessing Ember properties...at least not that I'm aware of, and not in my version of Ember, which causes various things to break if I upgrade beyond v2.0.6.

getDatePicker test helper doesn't take year into consideration

When calling datepicker.selectDate(moment('2020-09-20')); it will select first month and date combination that fits ( in this case 2018-09-20), whereas I would expect that it also follows year.

Selected Date for date-picker block style

I am trying to implement the date-picker via block style, similar to the Custom Button on your website, and I am unable to get it to highlight a previously selected date. I noticed the Custom Button example you have also does not highlight the previously selected date unless I navigate to a different month and then back. Is this a bug or intended design? Either way, would it be possible to add this feature? Really liking the picker btw!

Pass option { overwrite: true } to mergeTrees in order to have the latter file win

I have also Ember Power Select installed, v0.10.11

Suggestion: add "ember install ember-moment" to docs.

I see it on the github page but not here: http://mydea.github.io/ember-date-components/#/

[FEATURE] Add support for languages

Can you ad support for different languages?

like
{{date-picker lang=''language" action=(action 'updateDateRange')}}

or that I can set by my own the names of months and weekdays

let myOptions = [
{
  weekdays: ['mo', 'di', 'mi', 'do', 'fr', 'sa', 'so']
  months: ['Januar', 'Februar'/*...*/]
}];

Update docs to indicate value=[prop] is required

In trying to figure out why the example usage codes weren't giving me the same results in my app as in the docs, I decided to look at the dummy app to see how they were actually implemented there. I realized that I needed to give the component a value. Silly me; I should've figured that out sooner. But would be nice to note this in the docs and usage examples.

Problem with Timepicker in a modal

Hello,
I'm trying to use ember-date-components in a Bootstrap's modal.

The date picker is working great, but I face an issue with the time picker:
When the I click on the time input, the time list is showing, including a scrollbar.
When I click on the scrollbar, the list closes immediately, I don't have time to scroll up or down.

In fact, when I click the scrollbar, the input looses focus , so the focus-out action is triggered and the list closes.
Temporarily, I disabled the focus-out action, but the list is closing only if the user picks a time, not if he clicks out of the list.

Can you give me some insights on how to solve this issue ?
Thanks !

More options when range=true

Could there be an option to remove or change the small dash between the 2 date-pickers? Maybe add an option to put a snippet of html between them with the dash as a default value? That way you can make it null to remove it all together or add something else.

And it would be nice if we could add 2 placeholders since there are 2 fields. A user can label them "Start Date" and "End Date" but currently are unable to do so.

.git folder available on npm

Hi! Can you check your npmjs registry?
I got this message after ember install.

npm ERR! path /node_modules/ember-date-components
npm ERR! code EISGIT
npm ERR! git /node_modules/ember-date-components: Appears to be a git repo or submodule.
npm ERR! git  /node_modules/ember-date-components
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

Picking a date triggers a form action

Changing input to button in this commit breaks forms.

Button by default triggers action on from so if the form has an action

<form {{action "save"" on="submit"}}>

it's going to be triggered.

I think that adding type="button" on a button should fix it. Can provide PR.

Datepicker popup misaligned when button is floated

When the button is floated the datepicker popup does not consider the height of the button and overlays on top of it.

[FEATURE] Add support for timezones

Occasionally it is useful to display a date picker in a different timezone than the current user's. It mainly affects the current today value.