motss / app-datepicker Goto Github PK

Hi.

I've been using this extension and compile the project to get errors. I could see that the problem is in the "demo/index.html" file, because there is a zero in the air within a style class, on line 170.

.locale_example { text-align: left; padding: 8px; 0 }

Can you fix this? Please.

Regards

There should be a separate API documentation for this element. This would consist of basically adding documentation (or just links to) for Polymer.PaperDialogBehavior Polymer.NeonAnimationRunnerBehavior.

Current version set _selectedDate twice on initialization:

• when initializing the element.
• on ready callback after Intl polyfill for Safari (which is not needed and only required for polyfill)

Even the demo doesn't work on OSX Safari 9.0.3 with app-datepicker 2.8.1. Any clue ?

Thank you for your component.

I can't manage to set the date of the app-datepicker programmatically (I must say I'm not sure of the differences between date and inputDate).

Here is my code.

_onShowDatePickerDialog: function(evt, detail) {
        var dialog = this.$$('#date-picker-dialog');
        dialog.locale = detail.locale;
        dialog.date = detail.date;
        dialog.callback = detail.callback;
        dialog.open();
      },

<dom-module id="date-picker-dialog">
  <template>
    <style include="shared-styles iron-flex iron-flex-alignment">
    </style>

    <paper-dialog id="dialog" class="paper-date-picker-dialog" on-iron-overlay-closed="_dismissDialog">
      <app-datepicker id="datepicker"
                      auto-update-date="true"
                      date="[[_dateAsString]]"
                      input-date="{{_dateAsString}}"
                      locale="[[locale]]"></app-datepicker>
      <div class="buttons">
        <paper-button dialog-dismiss>{{localize('app.annuler')}}</paper-button>
        <paper-button dialog-confirm autofocus>{{localize('app.valider')}}</paper-button>
      </div>
    </paper-dialog>

  </template>

  <script>
    Polymer({
      is: 'date-picker-dialog',

      behaviors: [
        Sigma.AppBehavior
      ],

      properties: {
        locale: {
          type: String
        },
        date: {
          type: Date,
          observer: '_onDateChanged'
        },
        callback: {
          type: String
        },
        _dateAsString: {
          notify: true,
          type: Date
        },
      },

      _onDateChanged: function(newVal, oldVal) {
        this._dateAsString = moment(newVal).format('YYYY/MM/DD');
      },

      _dismissDialog: function (e) {
        if (e.detail.confirmed) {
          var dateAsString = this.$.datepicker.date;
          this.callback(moment(dateAsString, 'YYYY/MM/DD').toDate());
        }
      },

      open: function () {
        this.$.dialog.open();
      }
    });
  </script>

</dom-module>

Thanks
--nick

Hi @motss
Would be great to be able to switch date formats (dd/mm/yyyy)

Due to limitation of input date received by platform's Date, inputDate was designed to only be able to accept inputs for the followings:

• short date for all locales in the format of yyyy/mm/dd or yyyy/d/m eg. 2016/06/06.
• long formatted date for en and en-* locale ONLY eg. Tue, Jul 5, 2016.

An issue was found in #26 that the datepicker rejects to update to correct input date in other locale.

Hey folks, may I include your amazing work under a section named Who's using app-datepicker that I'm going to add in the README?

Kindly leave your project name and URL (if you don't mind) and I'll include them.

Thank you.

Hi there, thank you for developing such a nice component. I'm using jv-datepicker-dialog, can you please help me (update readme in this case will be a much better option) that how can I define a click handler on Ok and Cancel button.

Looking forward to get a helping answer.
Thank you so very much,
Regards.

Is there any way to change the locale of the component?

I am not sure if its just me but I cant get this to work at all. Downloaded through bower, linked all good and when I add <app-datepicker-dialog></app-datepicker-dialog> nothing appears.

when I inspect the DOM for app-datepicker, looks like its loading but nothing appears on the screen. No console errors either. Any one else had this issue?

Seems like this line has a typo: this.loocale should probably be this.locale.

When you vulcanize the datepicker component the action attribute is rewritten which breaks the ability to go forward in the calendar.

We made a fix on our side to deal with it until Polymer updates Vulcanize. If you want a PR for it I can send it over.

https://github.com/Polymer/vulcanize/issues/294

This piece of code console.logs() for no apparent reason and seems to be a stray "leftover"

          // When datepicker has no button for date confirmation,
          // by asserting `autoUpdateDate` will trigger auto update on
          // date change.
          console.log(this.autoUpdateDate);

@ app-datepicker.html - line 1029

All colors have custom property except these.

• Select year with keyboard at list view with enter, arrow-up and arrow-down
• Auto focus on selected year at list view
• Restore focus on list view closed.
• Selectable dates are focusable with tab
• Disabled days / grayed out dates are not selectable with keyboard at all.
• Make dialog modal to trap all focus.
• New accessibility guideline for datepicker: http://eureka2.github.io/ab-datepicker/
• Imperatively changes focusable elements on different views. (Not applicable)
• https://www.w3.org/TR/wai-aria-practices-1.1/#datepicker (Link not found)

(Proposed by @nick-woodward)

To add new property disableDates to disable defined dates on the datepicker.

took me a while to figure it out. there are some references to functions that start with "_." like _.isNumber(...) in the file jv-datepicker.html. it looks like there must be an import of underscore.js somewhere, but this file is not bundled with the deployment. after finding it in the web and adding it, the component works as expected.

Features to be implemented:

• To add locales to fix #8 -- fixed with 0d851dd, 7b18c9c
• Rename to app-datepicker and bump version.
• [FEATURE] To show week numbers. (Proposed by #64)
• To add swiping features on mobile.
• Suggestions on certain naming. I suck at naming things.
• Improve accessibility of this element due to https://www.youtube.com/watch?v=2qjgxH384Nc
• [FEATURE] To allow customization on many (MANY!!!) dates such ash public holidays!~ 🎉 (Proposed by #10 (comment))

Not under consideration

• Better demo with iron-demo-helpers, see PolymerElements/iron-demo-helpers#32.
• [FEATURE] To allow selectable date range.

Feel free to leave comments down here for any suggestions to enhance this element.

Hi,

First of all this is awesome date picket, keep up the good work!
I am trying to integrate app datepicker with angular 2 using vaadin angular2-polymer directive.
date picker works but I cant get some of the things to work like min-date, max-date, theme and view all works dynamically but cant get input-date, on-date-changed to work. below is the code

<app-datepicker view="vertical" [inputDate]="inpDate" [minDate]="minDate" (date)="selectedDate" (onDateChanged)="onDateChanged()" auto-update-date="true" [theme]="theme" show-long-date="true">

Note: min-date is provided as camel case here to make it work but similarly for input-date it doesnt work. Both minDate and InputDate as declared as string with values inpDate = '2016/10/23' and minDate = '2016/10/22'. I can see all dates disabled below 22nd OCT 2016 but 23rd OCT is not selected instead see today's date being selected

Thanks,
Juned S

Description

app-datepicker throws the following error when disableDates is null.
Uncaught TypeError: Cannot read property 'some' of null

Example

Live Demo

I initialize the input-date to today's date. The element shows the correct date. I click the next month button until I reach October of next year. I choose October 2. The event handler, onDateChanged, shows e.detail.value = '2016-10-02'. But I'm in the year, 2017. It should show '2017-10-02'.

This only happens the first time you click a day in the month of the next year. After that, it works and shows the correct year.

Could you please tell me what is the CSS property to set to have a nice looking selected day (see image).

Thanks
-- nick

When setting the min-date property then it is not reflected in the date picker element and all dates before the min date are still selectable. Inside the date picker demo it is possible to change the min date but it is not reflected in the date picker.

These to buttons do not seem to work. If I don't specify modal, I can click the overlay and it will get dismissed. I can create a simple paper-dialog and it works out fine with dialog-confirm/dialog-dismiss.

Polymer 1.1.3
paper-elements~1.0.5

• The month-switching animations make month-switching UX slow. Most people just frantically tap/click "prev/next" to switch to the month they want.
• The animations make this kind of clunky. Each animation cycle needs to finish before the next tap/click on "prev/next" can take place.

Personally I'd do this:

• The animation could take place 150ms (could be a user specified custom prop) after the last previous/next tap/click. A debouncer can be used here. There's a debounce() utility method provided by Polymer itself.

I might be able to take this on and submit a PR when things clear up on my end.

I want a combo date picker box: a datepicker-dialog that lets me pick the date from the calendar, and a text entry field for people who don't care for things like that and just want to enter a date from their keyboard. The problem is that what if they entered a date from the keyboard, but then want to correct it on the graphical picker?

At the moment, it's not possible to do so because setting date on the datepicker is completely ignored. I noticed that datepicker-dialog is pass-through in terms of the date, but the datepicker itself only uses the date on startup.

The release of Polymer v2.0 is imminent and the Polymer teams are working extremely hard to port over existing Polymer 1.x elements to v2.0.

This element has no doubt must be part of the upgrade. We will provide support once Polymer v2.0 is officially released to the public.

Can't wait to see how things work with the latest web platforms in the year of 2016 and yeah Polymer and Web Components FTW!

The year dropdown colors are a bit hard to read in the Dark and Google themes, as seen below:

A suggestion would be to make the highlighted year black like in the Light theme.

In the latest release 2.7.0 there are some animation elements registered in https://github.com/motss/app-datepicker/blob/master/app-datepicker-animations.html

• fade-in-animation
• fade-out-animation
• slide-from-left-animation
• slide-from-right-animation

If one of the elements inside the main application has a dependency to https://github.com/PolymerElements/neon-animation/blob/master/neon-animations.html
then those animations are being registered twice which causes:

Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'fade-in-animation'. A type with that name is already registered.

Is there any reason why you try to redefine those neon-animations?

Thanks, Oleg

Description

From #53, a bug was found when changing the default value of format, vix. yyyy/mm/dd to value like dd/mm/yyyy will render the date go haywire.

Step to reproduce

Live demo

Hi. Steps to reproduce:

1. Click on 'year' to select year and choose any year less than 2011
2. You can see that on left side there's 2010 year selected -> weekday and month no more match on the left and right sides on datepicker.

It's reproducing in Chrome and not reproducing in Firefox.
Sorry for Russian locality in attached image

To create a HTML import for Lodash instead of using <script> tag as Polymer won't be able to deduplicate duplicated <script> tags which is why loading Lodash's script at top-level document.

hello, trying to implement a demo "bind-date-to-input-date" , this happens when you open the dialog to select a date , I can not select anything , please help!
thank you very much.

• Use firefox: 46.0 in .travis.yml for tetsing.
• Fix test to make it green again.

It seems you are depending on the library underscore for functions such as "_.isNumber".

However, there is no trace of this dependency in your code/json?

Personally I would love an solution that does not depend on underscore.
Like:
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
(example, just an quick google)
Since you at an glance don't seem to depend all that heavily upon the library. But obviously up to you.

Tested with this code:

<app-datepicker-dialog id="endDatePicker" date="2017/05/17" with-backdrop entry-animation="datepicker-slide-from-bottom-animation" exit-animation="datepicker-slide-from-top-animation"></app-datepicker-dialog>

notice that date is set 2017/05/17 but when the dialog opened it still show today date. e.g: 2016/08/03

How come?

Proposed by #20:

• To add new property to allow datepicker to update selected date directly on changes when it is not inside an overlay/ dialog.

Is there any way to change the font-size of the dates?
I've seen there's a bunch of styling properties but they all seem to deal with colors.

I'm talking about these date divs:

iron-iconset-svg is a dependency of app-datepicker but it's missing from bower.json.

Completely broken due to lack native support of Intl by the browser.

Description

app-datepicker has a property called disable-dates however app-datepicker-dialog doesn't have a passthrough property.