Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filterable list control: Convert date inputs into datepicker fields #6009

Merged
merged 6 commits into from
Sep 21, 2020

Conversation

anselmbradford
Copy link
Member

@anselmbradford anselmbradford commented Sep 15, 2020

Most modern browsers have built in datepickers. Let's use them!

Changes

  • Changes date input field type to date in the filterable list control.

How to test this PR

  1. Pull branch and build.
  2. Open /blog in various browsers and the iOS simulator and select a date.

Screenshots

Chrome
Screen Shot 2020-09-01 at 3 45 26 PM

Firefox
Screen Shot 2020-09-01 at 3 45 49 PM

Probably Opera
Screen Shot 2020-09-01 at 3 46 27 PM

Safari 馃槥
Screen Shot 2020-09-01 at 3 46 56 PM

Edge
Screen Shot 2020-09-01 at 3 56 11 PM

iOS
ios-datepicker

@anselmbradford anselmbradford requested review from a team and contolini September 15, 2020 16:27
Copy link
Member

@contolini contolini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very graceful solution! Couple minor tweaks.


/* TODO: Merge this into the regex checks.
This converts numbers from any other format to MM/DD/YYYY */
if ( !Number.isNaN( field.valueAsNumber ) ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IE11 doesn't support Number.isNaN. You can use isNaN though.


# For more information on date formatting, see the python documentation here:
# https://docs.python.org/2/library/datetime.html#strftime-and-strptime-behavior

full_date_patterns = (
'%m/%d/%Y', # 10/25/2016, 9/1/2016
'%m-%d-%Y', # 10-25-2016, 9-1-2016
'%Y-%m-%d', # 2016-10-25, 2016-9-1
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%m and %d are zero-padded so it'd be cool if you could update all these comments accordingly (2016-09-01, 09-01-2016, etc.) See https://docs.python.org/2/library/datetime.html#strftime-and-strptime-behavior.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

@alexm118
Copy link
Contributor

@anselmbradford Hey, just wanted to let you know there is an associated cypress test for filterable lists. Looks like this change breaks one of the tests (unsurprisingly around the date)

@anselmbradford
Copy link
Member Author

Thanks @alexm118 ! I updated the associated test. This brings up the question of how does Cyprus fit into our code checks? Is the idea it will run in GitHub actions in PRs like this one (if it's possible to run headless), or will it run with gulp test like our other frontend tests, or something else? Unless I'm doing something wrong I needed to run yarn run cypress open and know to click into the filterable-list.js test, which seems like it would be quite easy to miss in the future.

@alexm118
Copy link
Contributor

@anselmbradford Currently, the cypress tests run in headless mode inside our jenkins server. Potentially once we have github hooks setup it may be possible for us to do something with Github Actions (we could possibly do this without jenkins, I just haven't dug into the potential work it would take to spin up the docker stack via Github Actions).

I put some documentation in place for how Cypress is currently setup to run, there are a couple options basically one that leverages docker and another that allows you to run it via yarn. I find that running via yarn is helpful when modifying/creating tests and docker is easier to run when you just want to validate the tests will pass but YMMV.

@anselmbradford anselmbradford merged commit b622e80 into main Sep 21, 2020
@anselmbradford anselmbradford deleted the ans_filters_datepicker branch September 21, 2020 18:48
@stephanieosan
Copy link
Member

stephanieosan commented Sep 21, 2020

date-picker (1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants