fooloomanzoo / datetime-picker Goto Github PK

I would appreciate a little help with getting Date-picker working in my Angular applications. It's not currently rendering and has the following errors at start up.

Angular, in index.html. I am using a number of conventional Polymer 1x components.

 <link rel="import" href="assets/bower_components/datetime-picker/date-picker.html">
  <link rel="import" href="assets/bower_components/input-picker-pattern/overlay-element.html">

It would be great if we could select a time range on a single picker instead of needing two. It looks too cramped on mobile devices.

The layout seems to go all over the place on Safari. All other browsers it is great.

Link: https://codepen.io/johanbyren/pen/RxaawW (It works fine in chrome but looks weird in Safari)

Apologies if I've missed something, but I can't see a way to set an empty value?

In the absence of data I would like a blank field rather than it default to the current date/time.

Is there a way to achieve this?

Non-native pickers do not close when clicking outside them.

It would be really convenient to have this behavior to mimic what is available with native pickers. Also, such a behavior is more natural and in that case the top right closing button could be optional.

I am using Safari 11.0.1 and looks like the component is completely unusable there.

• Clicking results in a huge delay.
• Data-binding does not work.

Here's my code https://codepen.io/SlashBunny/pen/EwbgdM?editors=1000

Once a user has clicked on a field, there seem to be no way to get "out" of editing.
Is there a way to cancel the date picking? Escape doesn't seem to do the trick.

Help? :D

I find the datetime-picker element really nice. Unfortunately, I cannot figure out how to style the not native input fields with id #date and #time. There is a mixin for the inner calendar-element but this is not what I am looking for.

In your demo, in case when I click on the element a popup opens to change date and time. Changing date is easy. But changing time is very difficult. I can not see what I am changing. When I type any value it takes some random value and closes the popup without asking me whether time is ok or not.

ba01eea#diff-883cda978cbcef86007470924dc1e37a is not valid javascript and does not pass lint check.

03:09:07      [exec] SyntaxError: ./bower_components/datetime-picker/datetime-picker-mixin.html_script_0.js: "prop" is read-only
03:09:07      [exec]   141 |               case 'year':
03:09:07      [exec]   142 |               case 'month':
03:09:07      [exec] > 143 |                 prop = 'year'; break;
03:09:07      [exec]       |                 ^
03:09:07      [exec]   144 |               case 'day':
03:09:07      [exec]   145 |                 prop = 'month'; break;
03:09:07      [exec]   146 |               case 'hours':

The prop constant should be turned into a variable.

It is possible to enter invalid inputs.

Such inputs should have no effects as for the native pickers.

Hi @fooloomanzoo ,

I have used the datetime-picker and customized it as follows, custom-datetime-picker. The es5-bundled build throws errors on IE11 (by webcomponent-lite.js). Polymer lint does not show any errors either! I would really appreciate it if you could spare a bit of your valuable time to help me out in any way you can.

Thank you!

Is it possible to display date (in date-input element) in different formats?
ex: ( DD/MM/YYYY or MM/DD/YYYY or YYYY/DD/MM or YYYY/MM/DD)

Following is the code snippet from date-input.html
I tried meddling with this to no avail.

<number-input style="order:[[_orderDate.month]];" index$="[[_orderDate.month]]" hidden$="[[_hideMonth]]" pad-length="2" min="1" max="12" disabled="[[disabled]]" value="{{month}}"></number-input>
<span style="order:[[_orderDate.separatorYearMonth]];" hidden$="[[_hideMonth]]">[[_localDateSeparator]]</span>
<number-input style="order:[[_orderDate.year]];" index$="[[_orderDate.year]]" pad-length="4" disabled="[[disabled]]" value="{{year}}"></number-input>
<span style="order:[[_orderDate.separatorMonthDay]];" hidden$="[[_hideDay]]">[[_localDateSeparator]]</span>
<number-input style="order:[[_orderDate.day]];" index$="[[_orderDate.day]]" hidden$="[[_hideDay]]" pad-length="2" min="1" max="[[_maxDayOfMonth]]" disabled="[[disabled]]" value="{{day}}"></number-input>
${super.inputTemplate || ''}

Any hints/knowlege/suggestions are highly appreciated.

RangeMixin is not defined

When using any of the components I get this error. Any idea why? files are there

I'm using webpack

I'm working with angular4x with Polymer2x. I am using typescript

I'm not catching on to how to set up an initial value for a date picker.

This is the property that I want bind to, to set the initial value in a date-picker

mydate: string = "2014-02-10" ;  // Iso8601 as string, as indicated in docs (feb 10, 2014)

when I use this, it appears to work but it is one day off, it gives me 2014-02-09.

What I really want to use is the <overlay-date-picker>. I've tried all of these alternative solutions to no avail. It just uses today's date as the default value.

  <overlay-date-picker class="custom" [value]="mydate" with-backdrop no-overlap></overlay-date-picker>
  <overlay-date-picker class="custom" value="{{mydate}}"  with-backdrop no-overlap></overlay-date-picker>
  <overlay-date-picker class="custom" [date]="mydate" with-backdrop no-overlap></overlay-date-picker>
  <overlay-date-picker class="custom" date="{{mydate}}"  with-backdrop no-overlap></overlay-date-picker>

Note, these do not have the event binding when the UI changes to push the updated value to the model (this does work, so i've omitted for clarity).

Should I be using date or value? What am I missing?

I've been running into a really weird issue trying to use this widget where I can change the date, but the time never updates in the field (but it does in the calendar popup) using the datetime-picker element.

Pressing the confirm button doesn't update the field.

I was able to run it fine using one of your example snippets, which made it even more bizarre.

<base href="https://raw-dot-custom-elements.appspot.com/fooloomanzoo/datetime-picker/2.7.11/datetime-picker/"
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="import" href="datetime-picker.html">

Using these imports are fine, but when I swap those out to the (I assume) identical files downloaded via Bower, the issue is present.

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="import" href="bower_components/datetime-picker/datetime-picker.html">

The files do exist, and I don't see any errors in the console about setting up. Can you think of any reason that I may be having this issue?

Via Bower, I have installed v1.1.0 of webcomponentsjs and v2.7.11 of datetime-picker. Am I missing something?

I am trying to use datetime-picker (it's elements) to make a custom element of my own to be used in a project. I am having the following error in the console despite the custom element being working properly (as far as I can see)

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-module.html:130:18
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-module.html:135:3
(anonymous) @ dom-module.html:130
(anonymous) @ dom-module.html:135
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-bind.html:129:20
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-bind.html:133:5
(anonymous) @ dom-bind.html:129
(anonymous) @ dom-bind.html:133
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-repeat.html:696:18
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-repeat.html:700:3
(anonymous) @ dom-repeat.html:696
(anonymous) @ dom-repeat.html:700
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-if.html:269:18
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-if.html:273:3
(anonymous) @ dom-if.html:269
(anonymous) @ dom-if.html:273
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/array-selector.html:421:18
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/array-selector.html:424:3
(anonymous) @ array-selector.html:421
(anonymous) @ array-selector.html:424
custom-style.html:111 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/custom-style.html:111:25
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/custom-style.html:113:3

one of my colleagues suspects this is because of Polymer 1 and Polymer 2 compatibility issue.

Here's the link to the blog: https://vaadin.com/blog/web-component-wednesday-1-datepicker

I think you have a great component and decided that it would be a cool one to be included on the blog. Feel free to write some comments on the blog.

Hi. I found that the week title does not match the date.

You'll exactly know what I mean after looking at the image. I tried to attach a calendar image from my site, but the same phenomenon appears on the official demo site, so I will upload it.

Feb 23 2018 should be Friday, but the calendar indicates it is Thursday.

When I replace - 1 to - 2 in this line, it is okay. But, it does not seem to be the correct fix.

I am not sure this is happening only in my location (Korea+09:00). I saw an image of other issues and it was fine!

OS: macOS High Sierra 10.13.3
Browser: Chrome (64.0.3282.167)
datetime-picker version: 2.7.4 (Polymer 2.5.0)

When arrow keys are used to navigate in the time-input element, it goes up to seconds and goes back to hours instead of milliseconds. When at hours and the left arrow is pressed it goes to milliseconds. This is because of the following code at TimeInputPattern

static get inputTemplate() {
        return `
          ${super.inputTemplate || ''}
          <div hidden$="[[_hideHours]]" style="order:7;">
            <number-input hidden$="[[hour12]]" index="7" class="time" min="0" max="23" pad-length="2" value="{{hours}}" placeholder="00"></number-input>
            <number-input hidden$="[[!hour12]]" index="7" class="time" min="1" max="12" pad-length="2" value="{{hours12}}" placeholder="00"></number-input>
          </div>
          <span hidden$="[[_hideMinutes]]" style="order:8;">[[_localTimeSeparator]]</span>
          <number-input hidden$="[[_hideMinutes]]" style="order:9;" index="9" pad-length="2" min="0" max="59" disabled="[[disabled]]" value="{{minutes}}" placeholder="00"></number-input>
          <span hidden$="[[_hideSeconds]]" style="order:10;">[[_localTimeSeparator]]</span>
          <number-input hidden$="[[_hideSeconds]]" style="order:10;" index="11" pad-length="2" min="0" max="59" disabled="[[disabled]]" value="{{seconds}}" placeholder="00"></number-input>
          <span hidden$="[[_hideMilliseconds]]" style="order:11;">[[_localDecimalSeparator]]</span>
          <number-input hidden$="[[_hideMilliseconds]]" style="order:12;" index="12" pad-length="3" min="0" max="999" disabled="[[disabled]]" value="{{milliseconds}}" placeholder="000"></number-input>
          <div class="am-switch" hidden$="[[!hour12]]" style="order:13;" on-mouseup="_switchAm">
            <span hidden$="[[!isAm]]">[[_am]]</span>
            <span hidden$="[[isAm]]">[[_pm]]</span>
          </div>
        `;
      }

in the number-input for milliseconds it is given 12 for the index . The step for _focusNumberInput method at datetime-input-mixin is 2. This makes the right arrow key event to skip milliseconds.
Correcting the index to 13 solves the issue.

Please add a property hideResetButton to hide the reset button:

Thanks

When using the overlay-datetime-picker on Safari 11.0.1, the browser throws a RangeError: Maximum call stack size exceeded. error (after freezing the browser for some time).

I tried simpler and simpler implementations, and found that it will even occur by placing <time-input></time-input> on a page.

After a cursory poke around the debugger, it appears that the recursion may be caused by the datetime-mixin _computeValue method, when this.setDate is called, but I don't know this code well enough to determine if that really is the cause.

Hello.
I updated to new version and hit some problems. It stopped working and cant set the dates.

Uncaught ReferenceError: d is not defined at HTMLElement._fromDatetime (datetime-mixin.html:491) at HTMLElement._minChanged (datetime-mixin.html:529) at HTMLElement._minChanged (calendar-element.html:444) at Object.runObserverEffect [as fn] (property-effects.html:215) at runEffectsForProperty (property-effects.html:160) at runEffects (property-effects.html:126) at HTMLElement._propertiesChanged (property-effects.html:1674) at HTMLElement._flushProperties (property-accessors.html:564) at HTMLElement.ready (property-effects.html:1632) at HTMLElement.ready (element-mixin.html:688)

I recently use the latest version 2.5.8 of datetime-picker. Somehow when I use it to my code which I'll attach on the below, it shows longer width. Is there anything I can do?

<time-picker clamp="second" id="mondayOpeningHour" confirmed-datetime="2018-01-01T09:00:00.000"></time-picker>

It works on Chrome but not Firefox.

I do not see any specific error message in the console.

Non-native pickers are no longer working with version 2.0.3.

Steps to reproduce:

1. Open https://fooloomanzoo.github.io/datetime-picker/components/datetime-picker/demo/.
2. Tap on month selector for non-native (picker appears).
3. Try to change the current month: next or after arrows are not working.

The same applies for the time picker when I try to increase or decrease hours using the arrows.

I used Chrome 60 and Firefox 54.

two problems. 1) is that when the overlay drops over another element, the overlay isn't the topmost image. I see in the docs that there is an alwaysOnTop property but I can't seem to get it set, as Angular is name mangling the property names. I've tried alwaysontop, always-on-top, alwayson-top and always-ontop. Gear still showing through.

 <overlay-date-picker id="lodate" class="customDatePicker" [date]="params.lodate"
                       (date-changed)="params.lodate=$event.detail.value"
                       auto-confirm="true"
                       always-on-top="true"
  ></overlay-date-picker>

The other problem is how to move the overlay over when it is on the right side. I don't know what to do to set the right css properties in the shadow dom.

2. When

Ugh....was having trouble getting 24 hour to work until I noticed that I was using "native" and the implementation of input "type=datetime-local" is fubar. :(

I have one request though. When I drop down the calendar and I select a date and time I was confused about how to confirm my selection. I have a graphic to explain.

requires /polymer/polymer-element.html
(which is missing in polymer 1)

How can I set the default time for the time-picker Element, because it seems like the picker always takes the current time?

In Edge the datetime-picker doesn't look very good.

• the width of the inputs is too small so it cuts off the last number.
• colors of the date and time separators is white so it's not visible.
• when a date or time is selected, then everything turns white so nothing is visible any more.

When you define your own colors, then there are also issues in the calendar/time popup:

• font color for the month, year and time inputs turns white even if they were defined as black
  This is Edge (month, year and time are not visible in the popup):
  

This is Chrome (everything is visible):

Here is a codepen which demonstrates the issues:
https://codepen.io/anon/pen/MVBjxr

Hi, I tried to use range of dates picker but something want wrong. Could you please check this problem?

http://take.ms/qybt7

It happened when I choose "end day" less than "start day"

<date-picker class="begin" month="1" day="1" auto-confirm date="{{min}}" max="{{max}}" vertical-align="bottom"></date-picker>
<date-picker class="end" month="12" day="31" auto-confirm date="{{max}}" min="{{min}}" vertical-align="top"></date-picker>

I'm a bit confused on how to set confirmedTime of a time-picker. I have 2 cases to set the confirmedTime.

1. First I want to set the default confirmedTime on page load or on custom-element load

• I had tried this way but it doesn't work

<time-picker confirmed-time="09:00:00.000" time="09:00:00.000" clamp="seconds" id="mondayOpeningHour"></time-picker>

• I also had tried to set it on element ready() and/or connectedCallback() like below and that doesn't work too

ready(){
  super.ready()
  this.$.mondayOpeningHour.confirmedTime = "09:00:00.000"
}

Then how to set it by default?

2. Second, I want to set the confirmedTime with data binding on Polymer 2. I got the data from an iron-ajax and I tried to passed it in 2 ways that both don't work

• I set it through the element

<time-picker confirmed-time="[[data.mondayOpening]]" time="[[data.mondayOpening]]" clamp="seconds" id="mondayOpeningHour"></time-picker>

• I set it on data load function

onDataLoad(){
   this.$.mondayOpeningHour.confirmedTime = this.data.mondayOpening
}

On 2nd case, I had debugged the data by printing it on a div and it shows.
For both cases, where is my mistakes so the confirmedTime is not set?

I already review the code. date-picker not actually depend on calendar-element. I think it will difficult to improve in the future. We should reimplement it. Also calendar-element should implement Polymer.IronOverlayBehavior.

Polymer 3.0 used ES6 module instead of HTML import, this component does not work with 3.0.
I think Polymer 3.0 support should be added to the components.

--calendar-element: { background-color: var(--qio-primary-background-color); --inner-input-focus-color: var(--qio-secondary-color-inverted); --inner-input-focus-background: var(--qio-secondary-color); };
This works on Chrome and it doesn't on IE 11. The main problem is, that in my style the month becomes invisible when selected.

IE 11:

Same in Chrome:

And IE with selected month:

I have tried the picker component, but it is not working with Safari Version 10.1.1.

Errors in console,

TypeError: Attempted to assign to readonly property.
TypeError: undefined is not an object (evaluating 'observerHandle.disconnect')

Can you please help me to resolve this problem?

When I use these elements with WebPack, the DatetimeInputMixin cannot be found because it is not "exported".

Ok, here is another idea. Maybe the control should have one set of values that update as the user selects values...like it is now, and another set of values that only updates if the user confirms their selection.

For example, right now if I place this control in my document it displays the current datetime, if the user clicks on it, each time they increment the day, hour, or minute, the displayed date updates and the value of the control updates.

This causes a couple of problems. First, lets imagine that I am using this control to allow the user to modify a search parameter. If I observe changes to the controls date/time. Then every time the user increments the time using the arrows, then my search refires. Instead of binding directly to the control I could bind to a different variable and then update it if the user confirms their selection...but right now there is only "close". And if they cancel I have to restore the displayed value of the control back to the value before they started clicking around.

Here is my suggestion. What if the control exposed the "date" "time" AND a "confirmedDate" and "confirmedTime".

When the control loads these are the same values. When the user opens up the picker and starts increment, only the "date" and "time" change. The user should have a confirm and a cancel option. If they confirm, then "confirmedDate" is set to the value of "date". But if they cancel, then "date" is set to "confirmedDate".

"Date" and "Time" remain the variables that are displayed in the control.

The problem for me right now, is that I can manage all this from outside of the control except the control provides no "cancel" option. And it takes a few more variables to manage it correctly to keep the live values and the displayed values in sync.

Hope that all made sense.

Hello,

First, congratulations for the great work on this component, it's amazing.
It would be even awesome if you could put a range picker feature, by day, month or year, on this component :D

Thanks,
Mario Aleo

Very nice element. Just a minor issue. I am using the datetime-picker in app drawer

<app-drawer-layout id="drawerLayout" force-narrow>
<app-drawer id="startDrawer" align="start" slot='drawer' persistent no-focus-trap>
<div style="height: 100%; overflow: auto;">
<my-element></my-element>
</div>
</app-drawer>
And in I have something like this
<div style="display: flex">
<datetime-picker horizontal-align="{{horizontalAlign}}"></datetime-picker>
</div>

But the output is something like this

Parts of the datetime picler is hidden by the drawer itself. How to solve this?
Thank you,
p.s. Sorry for the poor formatting

Hi! Could you add another event which would be fired when a user clicks on the small x reset button next to current field value? It would be useful for some validation scenarios we're working on.

Hi - this is a wonderful component, thanks very much!

Is there a way to hide the milliseconds picker? Often when using this to pick a time, the milliseconds are not relevant.

Cheers.

I need to store a field with date/time on the DB, and retrieve them. I am using MySql as my DB backend.
I would ideally store the date/time as timestamp on MySql; I would probably prefer to store the timestamp as a BIGINT (if I have to include the milliseconds, although I don't need them) or INT (if I can get datetime-picker to return me a straight Unix timestamp)

Now... when I load data in JSON, I get:

{
  eta: 1523466123000
}

I am trying to use the element like this:

 <datetime-picker auto-confirm required id="eta" name="eta" value="[[info.eta]]" label="ETA *"></datetime-picker>

Where info obviously contains the JSON result. Note that I only want one-way binding as I don't want info to change in real time -- I will update info once the record has been submitted via AJAX to the server, according to the server's response.

So, my question is: how do I actually do this?

The simplest use-case with setting value:

https://codepen.io/anon/pen/mLrVXg

Doesn't seem to work. Using the element as "write-only" works really well: its value is a Unix timestamp which gets submitted to the server without any trouble. However, when I try to load the record (as shown in the codepen), it just won't get set.

How do I do that? Why doesn't the element set its value when I set value?

I noticed a mismatch between the docs and the code. The docs state:

Clamp datetime to a property possible values:'month', 'day', 'hour', 'minute', 'second', 'millisecond'

while it should be 'minutes', 'seconds', 'milliseconds'

I am trying to initialize the date in a element by binding its date attribute to my element date attribute, its date is always set to today.
If I change my date attribute after rendering, it works.

my-test.html :

<dom-module id="my-test" attributes="date">
    <template>
        <overlay-date-picker auto-confirm id="echeancepicker" date="{{date}}"></overlay-date-picker>
        <div>[[date]]</div>
    </template>
    <script>
        Polymer({
            is: "my-test",
            properties: {
                date: {
                    type: String,
                    reflectToAttribute: true,
                    notify: true
                }
            }
        });
    </script>
</dom-module>

blabla.html :

....
<my-test date="2016-02-03"></my-test>
....

I am trying to add microseconds as well. Kind of stuck. Any help is much appreciated.

After #41 I updated to 2.8.2 and ~2.8.2 (which resolves to 2.8.5). In both cases, I am seeing some really odd behavior. With my same setup (copying the demo code and replacing with my local code) I am still unable to get it to render like in your demos. The picker doesn't show a calendar anymore, only the time with some weird line breaks (also, the time picker does work but doesn't show in the input). Plus I'm seeing a lot of CSS just on the page.

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="import" href="bower_components/datetime-picker/datetime-picker.html">

Thanks for the great, and much needed, element!
I am in a bit of a pickle. I am in Perth, WA, which happens to be UTC+8.
I pick the date 29th April, 2018 at 00:01 and saved it onto my DB. The date is saved correctly as UTC: 2018-04-28T16:00:01.000Z .

If I load it again (to edit the record), with the time element like this:

And display it in my browser, the element will display the 29th of April, 16:00 rather than my local time. I realise that there are timezone options in the datetime element, but that should be automatic: just like printing it on the screen, the date displayed should always been the local one. This is especially true since the element-s value does depend on the timezone, meaning that picking the 29th of April, 00:01, actually sets the date as 2018-04-28T16:00:01.000Z (which is correct)

To see what I mean:

https://codepen.io/anon/pen/mLrVXg

(Just imagine that that 2018-04-28T16:00:01.000Z came from the DB)
At the moment, every time you save the date, it goes back 8 hours... am I missing something obvious?