cibernox / ember-power-datepicker Goto Github PK

View Code? Open in Web Editor NEW

53.0 5.0 27.0 3.73 MB

An extensible datepicker for Ember

Home Page: https://ember-datepicker.development.pagefrontapp.com/

License: MIT License

JavaScript 51.82% HTML 4.78% Handlebars 22.48% SCSS 13.04% Less 0.20% TypeScript 7.67%

ember datepicker addon calendar

ember-power-datepicker's Introduction

Ember Power Datepicker

This addon it's the last member of the Ember Power Project family and it combines ember-basic-dropdown and ember-power-calendar into a single datepicker component that exposes the public APIs of both components as one.

As the components this one is born from, it aims to be flexible and customizable so you can taylor your perfect datepicker. For that it extrictly follows DDAU approach and all its subcomponents can be omitted or replaced by your own.

Compatibility

Ember.js v3.28 or above
Ember CLI v3.28 or above
Node.js v18 or above

Installation

ember install ember-basic-dropdown ember-power-calendar ember-power-datepicker

Setup

If you are using sass, you can import the styles in your app.scss

@import "ember-power-datepicker";

This component doesn't has any style of itself, so the only thing this import is doing is in turn importing the styles of ember-basic-dropdown and ember-power-calendar, so this is just a convenience. If you already use and import the styles of those addons yourself, you don't have to import these.

Usage

The API of the component will remind you the APIs of its both parents. It leverages contextual components and most of the options you can pass to the original components are accepted by this addon.

Let's see a basic example:

<PowerDatepicker @selected={{this.selected}} @onSelect={{this.onSelect}} as |dp|>
  <dp.Trigger tabindex="-1">
    <input type="text" class="my-input-class" readonly value={{moment-format selected}}>
  </dp.Trigger>

  <dp.Content class="demo-datepicker-small">
    <dp.Nav />
    <dp.Days />
  </dp.Content>
</PowerDatepicker>

The {{dp.trigger}} and {{dp.content}} come from ember-basic-dropdown. You can learn more about them here: https://www.ember-basic-dropdown.com/docs/how-to-use-it

The {{dp.nav}} and dp.days components along with the selected and onSelect properties come from ember-power-calendar. You can learm more about them it here: http://www.ember-power-calendar.com/docs/action-handling

The selected and onSelect are the only mandatory options. You can omit them, but if you do and you don't allow users to select a date, what do you want a datepicker for?

ember-power-datepicker's People

Contributors

Stargazers

Watchers

ember-power-datepicker's Issues

time picking as well or date only?

@cibernox great to see you tackling this. Finding a good date/time picker that fits into Ember is tough.

I was curious if this would be date-only or also time?

Address Moment deprecation

@cibernox Can we address the below issue in picker?

Moment Issue

moment.min.js:6 Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.
Error
    at Function.createFromInputFallback (http://localhost:4200/assets/vendor.js:137353:7002)
    at da (http://localhost:4200/assets/vendor.js:137353:7484)
    at Ba (http://localhost:4200/assets/vendor.js:137353:11268)
    at Aa (http://localhost:4200/assets/vendor.js:137353:11165)
    at za (http://localhost:4200/assets/vendor.js:137353:10886)
    at Ca (http://localhost:4200/assets/vendor.js:137353:11581)
    at Da (http://localhost:4200/assets/vendor.js:137353:11615)
    at n.hb [as isSame] (http://localhost:4200/assets/vendor.js:137353:16244)
    at Class.dayIsSelected (http://localhost:4200/assets/vendor.js:183539:44)
    at Class.buildDay (http://localhost:4200/assets/vendor.js:183530:26)

This occurs cause moment works without format only for

moment("2014-04-25T01:32:21.196Z"); // iso string, utc timezone
moment("2014-04-25T01:32:21.196+0600"); // iso string with timezone
moment("2014 04 25", "YYYY MM DD"); // string with format

This happens when we display the date in a particular format apart from the default once moment acepts inside the trigger textbox and we click on the trigger again, looks like the date is being read from the textbox value apart from selected property.

What do you think?
Also is there a way the datepicker can return dates in a particular format such as MMM DD YYYY, as of now the docs are not updated so am not sure.

Since we cant always know the format I do the below:

getMomentFromUnknownFormat(date, toFormat) {
    let momentDate = moment(new Date(date).toLocaleDateString(), 'MM/DD/YYYY');
    return toFormat ? momentDate.format(toFormat) :momentDate ;
 }

Does not work with ember-basic-dropdown 2.x

the ember-power components are great thank you. We use both the ember-power-select and ember-power-datepicker, recently we upgrade to ember 3.11 and ember power select 3x, which has dependency on ember-basic-dropdown 2.x. But we found ember-power-datepicker does not work with ember-basic-dropdown 2.x. Is there any workaround to this issue, before the ember-power-datepicker is updated.

Thank you

Release?

Is it possible to have a release with the dependency updates?

Update ember v3.22.0...v3.28.5 & dependencies

Update ember-power-calendar & ember-power-calendar-moment to the latest version after following releases:

After this changes, there is possible to use this addon with Ember 4

Updating dependencies

This addon is using relatively old versions of your ember-power-calendar (0.9.2).
Are you planning on updating the dependencies at some point?

Some fixes made on the ember-power-calendar are needed by my application and atm im adding the most recent version of ember-power-calendar (0.12.0) manually to my package.json to fix some issues.

I have no clue if there are other side effects by updating only this package, but for me it seems to work alright, didn't run this addon separately with updated version, so maybe some tests are failing (which i doubt)

`ember-auto-import` must be a dependencies

ember-auto-import must be a added as dependency for addonV1. This is important for embroider build, otherwise the build fails

Release

After the release of ember-power-calendar (v0.20.0)

update version of ember-power-calendar to ^0.20.0 in package.json
update changelogs (everything is already added, there is only to replace "Master" with "0.10.0")
release as 0.10.0

Addon appears to break in fastboot.

Part of the error reads as follows:

There was an error running your app in fastboot. More info about the error:
 TypeError: Cannot set property 'compare' of undefined
    at Module.callback (/Users/alexmasita/External/Personal/projects/Ember-Apps/mobile-services/tmp/broccoli_persistent_filterautoprefixer_filter-output_path-mBr0WNFq.tmp/assets/addon-tree-output/moment/index.js:23:1)
    at Module.exports (/Users/alexmasita/External/Personal/projects/Ember-Apps/mobile-services/tmp/broccoli_persistent_filterautoprefixer_filter-output_path-mBr0WNFq.tmp/assets/vendor/loader/loader.js:106:1)

Calender locale setting per instannce

@cibernox
It doesn't appear as though the setting locale per instance basic for calender is implemented in ember-power-datepicker. Is this part of future release?

Reference
in particular the below implementation

{{#power-calendar locale="ru" as |calendar|}}

I tried doing below just to test the locale feature of calender in datepicker but that didn work too

{{#power-datepicker
  renderInPlace=true
  selected=selected
  onSelect=(action (mut selected) value="date")
  as |dp|
}}
  {{#dp.trigger tabindex="-1"}}
    <input type="text" class="form-control" readonly value={{selected}}>
  {{/dp.trigger}}

  {{assign-content dp localeSelected}} // this 0r below
  {{#dp.content class="dropdown-menu demo-datepicker-small"}}
  {{assign-content dp localeSelected}}
    {{dp.nav}}
    {{dp.days}}
  {{/dp.content}}
{{/power-datepicker}}

I was hoping something like

{{#power-datepicker
locale=instanceLocalevalue
...

thanks

Open/close picker when input is focused/blurred

I'm looking to more closely mimic the behavior of the PIkaday picker (i.e. like the one in this demo: https://pikaday.com/) where the picker calendar will open when the input is focused by tabbing into the field, and the closed when the input field loses focus via tabbing away (while still maintaining the ability to open/close it via clicking the input/clicking elsewhere).

Is there a existing pattern for accomplishing this? Trying something like a simple onfocus={{dp.actions.open}} action on the input seems to conflict with the ability to close on selection, as the input regains focus after selecting.

API ideas

Just a bunch of ideas for APIs

Regular datepicker for a single date, displayed inline:

{{#power-datepicker value=date onchange=(action (mut date)) as |datepicker|}}
  {{datepicker.calendar}}
{{/power-datepicker}}

Regular datepicker for a single date, with a trigger that open the dropdown when clicked. The trigger contains one input.

{{#power-datepicker value=date onchange=(action (mut date)) as |datepicker|}}
  {{#datepicker.trigger}}
    <input value={{datepicker.formatedDate}} onchange={{datepicker.actions.update}}/>
  {{/datepicker.trigger}}
  {{#datepicker.dropdown}}{{datepicker.calendar}}{{/datepicker.dropdown}}
{{/power-datepicker}}

Datepicker for a range, with one calendar for both dates and one trigger containing one input with a formatted range (2015/07/12 - 2016/02/19)

{{#power-datepicker-multiple 
  rangeStart=start 
  rangeEnd=end 
  startChange=(action (mut start)) 
  endChange=(action (mut end)) as |datepicker|}}
  {{#datepicker.trigger}}
    <input value={{datepicker.formatedRange}} onchange={{datepicker.actions.update}}/>
  {{/datepicker.trigger}}

  {{#datepicker.dropdown}}
    {{datepicker.calendar}}
  {{/datepicker.dropdown}}
{{/power-datepicker-multiple}}

Datepicker for a range, with one calendar for each date and one trigger containing one input with a formatted range (2015/07/12 - 2016/02/19)

{{#power-datepicker-multiple 
  rangeStart=start 
  rangeEnd=end 
  startChange=(action (mut start)) 
  endChange=(action (mut end)) as |datepicker|}}
  {{#datepicker.trigger}}
    <input value={{datepicker.formatedRange}} onchange={{datepicker.actions.update}}/>
  {{/datepicker.trigger}}

  {{#datepicker.dropdown}}
    {{datepicker.calendar}}
    {{datepicker.calendar}}
  {{/datepicker.dropdown}}
{{/power-datepicker-multiple}}

Datepicker for a range, with one calendar for each date and one trigger for each input too

{{#power-datepicker-multiple 
  rangeStart=start 
  rangeEnd=end 
  startChange=(action (mut start)) 
  endChange=(action (mut end)) as |datepicker|}}
  {{#datepicker.trigger}}
    <input value={{datepicker.formatedStart}} onchange={{datepicker.actions.updateStart}}/>
  {{/datepicker.trigger}}

  {{#datepicker.trigger}}
    <input value={{datepicker.formatedEnd}} onchange={{datepicker.actions.updateEnd}}/>
  {{/datepicker.trigger}}


  {{#datepicker.dropdown}}
    {{datepicker.calendar}}
    {{datepicker.calendar}}
  {{/datepicker.dropdown}}
{{/power-datepicker-multiple}}

problem against ember-cli-bootstrap-sassy?

created a new ember app (v2.15), installed ember-cli-sass & ember-power-datepicker: datepicker from the example in the readme was working.
installed ember-cli-bootstrap-sassy, suddenly the datepicker stopped working.
Could this be a problem with the default style in ember-power-datepicker?

Range

I try to add a specific range in the datepicker. Is this only posible in Ember-Power-Calender or is there a way to realize this out-of-the-box in Ember-Power-Datepicker?
Thanks in advance

ember-power-datepicker doesn't get along with ember-cli-babili

I'm not sure that this isn't an ember-cli-babili issue but since is the only addon I've used so far that's had this issue, I figure at the very least you should be aware of it.

In short, when ember-power-datepicker is included in an app that uses ember-cli-babili (instead of ember-cli-uglify) and the config/targets.js file is configured to allow some native ES2015/ES2016 syntax (i.e., only targeting very modern browsers), the production build process fails.

Steps to reproduce (using ember-cli 2.13.1):

ember new babili-test
cd babili-test
npm uninstall --save-dev ember-cli-uglify
ember install ember-cli-babili
Edit config/targets.js to remove ie 9 (at this point, running ember build --env production will succeed)
ember install ember-power-datepicker
ember build --env production

The build fails with this error:

Build failed.
The Broccoli Plugin: [BabiliPlugin] failed with:
TypeError: assets/vendor.js: Cannot read property 'scope' of null
    at /Users/pgengler/tmp/babili-test/node_modules/babel-plugin-minify-simplify/lib/index.js:1504:42
    at Array.every (native)
    at genericEarlyExitTransform (/Users/pgengler/tmp/babili-test/node_modules/babel-plugin-minify-simplify/lib/index.js:1473:29)
    at earlyReturnTransform (/Users/pgengler/tmp/babili-test/node_modules/babel-plugin-minify-simplify/lib/index.js:1437:9)
    at PluginPass.exit (/Users/pgengler/tmp/babili-test/node_modules/babel-plugin-minify-simplify/lib/index.js:528:11)
    at newFn (/Users/pgengler/tmp/babili-test/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/pgengler/tmp/babili-test/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/pgengler/tmp/babili-test/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/pgengler/tmp/babili-test/node_modules/babel-traverse/lib/path/context.js:117:8)
    at TraversalContext.visitQueue (/Users/pgengler/tmp/babili-test/node_modules/babel-traverse/lib/context.js:150:16)

The broccoli plugin was instantiated at:
    at BabiliPlugin.Plugin (/Users/pgengler/tmp/babili-test/node_modules/broccoli-plugin/index.js:7:31)
    at BabiliPlugin (/Users/pgengler/tmp/babili-test/node_modules/broccoli-babili/lib/babili-plugin.js:12:5)
    at Class.postprocessTree (/Users/pgengler/tmp/babili-test/node_modules/ember-cli-babili/lib/index.js:25:14)
    at projectOrAddon.addons.reduce (/Users/pgengler/tmp/babili-test/node_modules/ember-cli/lib/utilities/addon-process-tree.js:6:25)
    at Array.reduce (native)
    at addonProcessTree (/Users/pgengler/tmp/babili-test/node_modules/ember-cli/lib/utilities/addon-process-tree.js:4:32)
    at EmberApp.addonPostprocessTree (/Users/pgengler/tmp/babili-test/node_modules/ember-cli/lib/broccoli/ember-app.js:586:12)
    at EmberApp.toTree (/Users/pgengler/tmp/babili-test/node_modules/ember-cli/lib/broccoli/ember-app.js:1691:17)
    at module.exports (/Users/pgengler/tmp/babili-test/ember-cli-build.js:22:14)
    at Builder.setupBroccoliBuilder (/Users/pgengler/tmp/babili-test/node_modules/ember-cli/lib/models/builder.js:56:19)

If you then revert config/targets.js (so that 'ie 9' is listed again) the build succeeds.

Demo URL doesn't load for me:

Demo URL doesn't load for me: https://ember-datepicker.development.pagefrontapp.com/

I get this message:

This site can’t be reachedember-datepicker.development.pagefrontapp.com refused to connect.
Try:

Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED

Missing test helpers for new style tests

The datepickerSelect test helper is only available via a global registration which no longer works with Ember's new style of tests.

I Can Has Release?

I was able to close #34 per the commit noted in said pull request. That said, I'm still unable to use the release version of ember-power-datepicker as it still uses ember-native-dom-helpers. Would you be able to cut a release for the current master version?

{{#power-datepicker 
    horizontalPosition="right" 
    selected=selected 
    locale=locale 
    onSelect=(action 'onSelect') 
    as |dp|}}

    {{#dp.trigger tabindex="-1"}}
        <input type="text" class="my-input-class" readonly value={{dateText}}>
        {{fa-icon 'caret-down'}}
    {{/dp.trigger}}

    {{#dp.content class="datepicker-small datepicker-right"}}
        {{dp.nav}}

        {{dp.days maxDate=maxDate}}
    {{/dp.content}}
{{/power-datepicker}}