currysoftware / elm-datepicker Goto Github PK

When manually changing the date via the text input, the DateEvent does not register it as updated.
Ellie (standard simple example with 3.0.1)

This was working with the elm-community version.
Ellie (former simple example from elm-community)

Ellie examples still run on version 1.0.0 of this package.

Use case:

I wanted to style the selected day and those user can select (i.e. :hover) as round. It was quite easy to achieve, but there's a certain flickery effect when hovering near the border between two cells. I bet that the reason for it was this piece of code:

.#{$datepicker-ns}day {
     cursor: pointer;
     color: $black;
    
     &:hover {
       background: $datepicker-hl;
       border-radius: 100%;
       color: $datepicker-picked-fg;
     }
}

I wonder if we couldn't maybe put a <button/> inside or at least a <span/>, although maybe more appropriate is button/> just because of HTML semantics as something user can click. Anyway, doing that would enable to style the content of the call directly and easier.

Even on the Ellie given example, when clicking to change to another month, it submit the form instead of showing other month. I am using google chrome.

As far as I understand the current interface there is no way for a user to remove a date selection. When we start the date might not be picked (Nothing) which seems to be a supported concept as the example shows

  case dateEvent of
                        Picked newDate ->
                            Just newDate

and https://ellie-app.com/3WbsRpXXzJ5a1 does it, but once a date is once picked there is no way to get back to this state. The Picked dateEvent is a Date not a Maybe Date, and if the user clears the text field and leaves empty text the Picked is not fired. FailedInput is fired as the empty text is not parsed as a date, but then one cannot distinguish between non-filled in valid forms versus filled in invalid ones.

It's debatable if this is a bug, feels more like a design issue, but one would expect the starting state to be reachable again with user interaction.

Is there plan to send dates entered directly into text-input?
DatePicker send internal msg SubmitText with current text-input value but client code cannot access it.

There is an issue when your CSS has:

button,
button:active,
button:focus {
border: 0;
}

Then you can't change month using arrows.

There is an issue when your settings allow to change year.

For instance,

changeYear = DatePicker.to 2030

If you are on December 2030 and click the arrow for next month then the calendar show January 2019 but it is on January 2031.
This also happens when you are on January 2019 and click the arrow for previous month then the calendar show December 2019/2030 but it is on December 2018.

First off, thank you for taking on the maintenance of this package! It really is an important package for the ecosystem.

Can you upgrade the dependency on justinmimbs/date to support version 3 as well? Should be able to allow both 2 and 3. Thank you!

Weekends are grey and non-selectable (Version 72.0.3612.0 (Official Build) canary (64-bit) and Firefox Quantum 63.0.1 (64-bit)): https://ellie-app.com/3t52wzTZxdda1

The page doesn't display on Chrome when you use the arrows to pick December (Version 72.0.3612.0 (Official Build) canary (64-bit)):
https://ellie-app.com/3t52wzTZxdda1

Same as: elm-community#80

Do you mind if I make a PR to update this?

Thank you for this package. In the predecessor elm-community/elm-datepicker, we could have a dropdown to change the year. Is this going to be implemented in this datepicker too?

How to reproduce:

• type in something that's not a date or not pass the parser (date in a wrong format from the one that parses understands).

Why impossible:

• Result.withDefault NoChange

Use case:

• I have a range like example in my codebase and I've applied some validation to it. However now, if user types in baddate, I don't have any easy way to fetch that error and display an error help text informing the user that his/her manual input is not correct.

So this is more like observation. Anyway, I've been playing around with styling of the elm-datapicker to suits my needs and it's been quite tricky. I've been wondering if it'd not be easier to maybe make cellFormatter function similar to

cellFormatter: {day: String, isDisabled: Bool, isSelected: Bool, isToday: Bool}. That way we could pretty much get rid of certain styles and classes shipped with the library and replace it with styling the content of the cell more based in Elm with an aid of caller Model.

For example, given bulma I'm using,

cellFormatter = 
  \{day, isDisabled, isSelected, isToday} ->
     Html.Button
       [ Attributes.classList [
         ("button is-fullwidth is-small", True)
         , ("is-white", not <| isSelected)
         , ("is-primary is-active", isSelected)
         , ("has-text-weight-bold", isToday)]
        , Attributes.disabled isDisabled
       ]
       [ Html.text day ]

That somehow seems nicer and easier to control from withing the module that uses the picker.

That's the idea, I don't how much much we could take this further (regarding other styles) if you see a value here.

The datepicker returns a Date. How can I go from this into the new elm posix time format?

Thanks

I couldn't find a setting to style elm-datepicker--picker.
Seems like a pickerClassList attribute is missing in settings.
Thanks

I'm sorry that I open an issue for this here, as it's not really a problem with this library - it's in the compiler. However, if the bug isn't fixed any time soon, I would love to see a workaround if that's possible. There are several open issues in the compiler repo, one of them is elm/compiler#1817.

Hi, thanks for maintaining this project! It was a relief to see it being ported to Elm 0.19.

I've been updating our app to Elm 0.19 and we're using Browser.application and that seems to listen to all the a tags in the DOM and act on the click events. Unfortunately I think this might mean that we're getting weird interactions with the left & right arrows in the DatePicker as they use a tags.

Have you seen this at all? I'm currently tracking down different bugs in my app due to this a tag behaviour and I'm not at all sure that I understand it correctly. In this case however, as no page navigation is taking place it seems like it might be reasonable to model them with button tags instead?

Hi there!

The documentation for pick says that this will produce a message that does the following:

• change the calendar focus
• replace the input text with the new value
• close the picker
• update datepickerSettings (pick someDate) datepicker

But it seems that the calendar focus isn't being changed properly. When I click the datepicker after setting a new date with pick it will show the current month instead of the month for the picked date.

I set up an Ellie demonstrating it here: https://ellie-app.com/4TRnVQ863Tsa1 see the GotTimeZone branch of update where I pick the date after getting the timezone.

Looking at the source code for pick it seems the the focus is being set to Nothing instead of the picked date, but if I manually pick a different date then the datepicker will remember the selected month the next time I open it.

Hello thanks for the library, however I ran into some awkward behavior when trying to use it (for the first time).

I see there are 2 functions init and initFromDate. I see one of them creates command which I would expect is to get the current time and timezone to configure the date picker. The other one takes Date type as an argument and doesn't produce any Cmd. However neither of these seems to work for me. When I'm in state where user did not pick any value yet so I'm passing Nothing as a first argument to view function, the year selected is 1992. I would expect date from the init call to be used for this so user will immediately end-up of selection of current year. Is this an expected behavior or bug?