search

fooloomanzoo / datetime-picker

A minimal picker for date and time for Polymer, that can use the native input
MIT License
78 stars 18 forks source link

help on setting up default values/angular #30

Closed jjarrell56 closed 6 years ago

jjarrell56 commented 6 years ago

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?

fooloomanzoo commented 6 years ago

There were a lot of changes relating the default values in the last week. Have you updated your elements to the newest versions? Just to check:

Because I can not reproduce your failure. In the demos are also examples now, of elements with preset values.

jjarrell56 commented 6 years ago

That's what I want to hear. Will try it out tomorrow. ;)

On Tue, Jan 16, 2018 at 5:22 PM, fooloomanzoo notifications@github.com wrote:

There were a lot of changes relating default values in the last week. Have you updated your elements to the newest versions? Just to check:

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fooloomanzoo/datetime-picker/issues/30#issuecomment-358127777, or mute the thread https://github.com/notifications/unsubscribe-auth/AZCebyINLHGYOMSFd_pF4ZJKXuXUCiJ0ks5tLSEvgaJpZM4RgX3E .

jjarrell56 commented 6 years ago

Updated appears to have solved most of the problem. I'm still losing one day on one of my inputs, I suspect it has something to do with timezone.

This is what I am binding to, the lodate, results in 12/31/2015 while the hidate correctly results in 12/01/2017. I have tried various flavors of adding time/with timezone off sets to the string, then it reverts to the bad, where it uses the current date as the default.

const params = new TwoDateParams();
    params.lodate = "2016-01-01" ;
    params.hidate = "2017-01-01" ;

By the way I am in EST

fooloomanzoo commented 6 years ago

Timezone is set automatically to the local timezone and is currently not changeable. It is also not included in the datetime- or the time-attribute. But I can not reproduce your problem, please have a look at https://codepen.io/fooloomanzoo/pen/RxqNOb

jjarrell56 commented 6 years ago

I looked at yours, all good. My turn now. I'm getting slightly different behavior from my app. In my app it was mostly working, but my app is one rev behind angular (4.x vs 5.x) and the typescript versions are slightly different than current.

So I used the angular-cli to generate a new stub project and put an example of what I am doing. This sample has angular 5.x and a different version of typescript. You will notice, I'm not getting default values but when I open the pull down, I do have the right value. I am using a slightly hackish setTimeout but I can use a later angular lifecycle event.

Here is my sample repo. https://gitlab.com/oldprogrammerio/datetimedemo.git

You will need to install angular-cli to run it (and do normal npm install and bower install). 

npm install @angular/cli -g
npm install
bower install
ng serve

I like your work and appreciate any help you can provide. ;)

fooloomanzoo commented 6 years ago

I am not familiar with angular. But the first look at two-dates.component.html raises a question: could it be that in angular the attribute-binding must also be in kebab-case to be set? You try to set autoConfirm, but it might not be set, because it should be here auto-confirm?

fooloomanzoo commented 6 years ago

there might have been a minor bug for initial values, i fixed in the newest version

jjarrell56 commented 6 years ago

no, you were correct. the casing was wrong. this follow works and I don't need to defer the assignment.

auto-confirm="true" I have to admit, i'm not completely clear on what angular is doing, your docs have it cased differently. No worries though I'm happy it's working. thank you.

fooloomanzoo commented 6 years ago

But Angular-syntax is different to Polymer's databinding-syntax. Polymer transforms the internal used camelCase-style variables to attributes in kebab-style. But polymer's elements should be compatible in context in a way like normal HTML-elements