Datepicker and Calendar: WIP #1260

Closed
wants to merge 177 commits into
from

Conversation

Projects
None yet
5 participants
Member

fnagel commented Jun 4, 2014

This was replaced by #1281.

This PR introduces the Calendar widget which is utilized in Datepicker widget. It also includes several improvements and changes as outlined in the wiki: http://wiki.jqueryui.com/w/page/12137778/Datepicker

Included changes and bugfixes:

  • Introduce value option
  • Split functionality into Datepicker and Calendar widget
  • Fix item highlighting when month is changed
  • Make use of uniqueId method
  • Improvements for $.date
  • Add min and max option
  • Fix some minor style issues for multi calendar support
  • Fix most demos
  • Fixed and improved existing datepicker unit tests
  • Improved localization, added localization unit tests.

tjvantoll and others added some commits Aug 26, 2013

@tjvantoll @jzaefferer tjvantoll Datepicker: Initial commit of widget rewrite work from old branch. Hi…
…story is on the datepicker-dead branch.
d3216b3
@tjvantoll @jzaefferer tjvantoll Datepicker: Get datepicker's test suite to at least run. It fails hor…
…ribly, but at least it loads with its dependencies.
b850573
@tjvantoll @jzaefferer tjvantoll Datepicker: Updating/fixing the animation demo. bf19f75
@jzaefferer jzaefferer Datepicker: Fix the build. Exclude broken datepicker units from runni…
…ng with phantomjs. Fix various jshint warnings in date_core tests and datepicker src
632aa2b
@jzaefferer jzaefferer Datepicker: Fix dateFormat demo by adding a dateFormat option and pas…
…sing that through to $.date
7a8f351
@jzaefferer jzaefferer Datepicker: Update all demos to include necessary dependencies. Doesn…
…'t mean that they actually work for the most part
c8217f5
@jzaefferer jzaefferer Datepicker: Improve animations demo, make slideUp actually work f0b49f6
@jzaefferer jzaefferer Datepicker: Fix localization demo 907d370
@jzaefferer jzaefferer Datepicker: Update alt-field demo - remove the options and use Global…
…ize to parse and format instead
abaeedc
@jzaefferer jzaefferer Datepicker: Fix dependencies on buttonbar demo cb3f565
@jzaefferer jzaefferer Datepicker: Fix the eachDay option (until we have a better design), u…
…se that in other-months demo. Fix handling of extraClasses property, split on space.
7adf5bf
@jzaefferer jzaefferer Datepicker: Update icon-trigger demo, build a custom trigger. Prevent…
… the datepicker from opening with a new cancellable beforeOpen event. Cancel = don't open
88d3c69
@tjvantoll tjvantoll Datepicker: Only apply the ui-state-focus class name to one cell.
This is specifically for multi month pickers. This makes the assumption that the keyboard is always interacting with the first month in a multi month calendar. The next step is to store which grid currently has focus and to base these focus logic off of that.
b59d4de
@tjvantoll tjvantoll Datepicker: Fixing widget() method test and minor coding standard cha…
…nges.
45d64ea
@tjvantoll tjvantoll Datepicker: Updating first batch of structure tests to new APIs and s…
…tandards.
41add14
@tjvantoll tjvantoll Datepicker: Fixing and/or commenting out remaning multi month datepic…
…ker structure tests.
ebeb23e
@tjvantoll tjvantoll Datepicker: Fixing or commenting out remaining structure tests. 5baa227
@tjvantoll tjvantoll Datepicker: Cleaning up and commenting out custom structure tests as …
…none of these options are implemented yet.
c8a0eed
@tjvantoll tjvantoll Datepicker: Coding standards and new APIs for keyboard handling tests.
These tests are commented out for now as they need a means of getting a Date object from the widget and currently there isn't one.
00debdf
@tjvantoll tjvantoll Datepicker: Coding standards and new APIs for mouse core tests.
Disabling these tests as well as they utilize the old getDate() and setDate() methods and there is no replacement for these yet.
fb79842
@tjvantoll tjvantoll Datepicker: Commenting out event tests with TODOs for now. f79cc9e
@tjvantoll tjvantoll Datepicker: Adding boilerplate for events in new API. 97ad9ca
@tjvantoll tjvantoll Datepicker: Updating tests for the destroy() method. 45c126d
@tjvantoll tjvantoll Datepicker: Updating enable()/disable() tests. c68d3e5
@tjvantoll tjvantoll Datepicker: Boilerplate for other method tests.
Moving widget() method test from core.js as it makes more sense in methods.js.
6782140
@tjvantoll tjvantoll Datepicker: Commenting out the options tests for now as they are almo…
…st all irrelevant now.
0f6d4e2
@tjvantoll tjvantoll Merge branch 'master' into datepicker
Conflicts:
	Gruntfile.js
	ui/jquery.ui.datepicker.js
b986309
@tjvantoll tjvantoll Datepicker: Saner id attribute values for the test suite. d32a482
@tjvantoll tjvantoll Datepicker: Support changing the appendTo option after init.
Adding tests for the appendTo option.
1074fdd
@tjvantoll tjvantoll Datepicker: Boilerplate for tests for additional implemented options. 601bf92
@tjvantoll tjvantoll Datepicker: Various changes for the showWeek option.
* Re-add ui-datepicker-week-col class name currently used.
* Add test suite.
* Support changing option after initialization.
488665a
@tjvantoll tjvantoll Datepicker: Support position option changes after init. Added positio…
…n option tests.
25ac260
@tjvantoll tjvantoll Datepicker: Position tests should create a new <input>. 6da407b
@tjvantoll tjvantoll Datepicker: Support changing eachDay after initialization. Add tests …
…for eachDay.
6e36670
@tjvantoll tjvantoll Datepicker: Allow dateFormat to be changed after init. Add dateFormat…
… tests.
dfad85f
@tjvantoll tjvantoll Datepicker: Adding test to ensure the <input>'s value is preselected …
…in the picker.
f83adf8
@tjvantoll tjvantoll Datepicker: Implementing a value() method. 83646f9
@tjvantoll tjvantoll Datepicker: Implement a valueAsDate() method. b668db2
@tjvantoll tjvantoll Datepicker: Support destroying inline datepickers. 560e704
@tjvantoll tjvantoll Datepicker: Add tests for the value() and valueAsDate() methods and i…
…nline pickers.
44eb843
@tjvantoll tjvantoll Datepicker: Remove unnecessary code now that destroying inline picker…
…s is supported.
3333c70
@tjvantoll tjvantoll Datepicker: Enter keypresses on the <input> should select the current…
… date
fd94740
@tjvantoll tjvantoll Datepicker: Enable enter with existing value test. Coding standards c…
…leanup of keyboard tests.
a089c49
@tjvantoll tjvantoll Datepicker: Restore handling of Control+Home and Control+End on the <…
…input>.
845814c
@tjvantoll tjvantoll Datepicker: Updating escape key tests to new APIs. e14f8e6
@tjvantoll tjvantoll Datepicker: First batch of tests for arrow key handling. fdaac17
@rxaviers rxaviers Datepicker: Use Globalize 1.0.0
- Update globalize; (not using bower yet 😢)
- Update $.date;
- Update translations; (this isn't external libray, it should NOT be in
  /external)
- Add comments on datepicker;
febd2b2
Member

rxaviers commented on febd2b2 Dec 1, 2013

@scottgonzalez @jzaefferer @tjvantoll

This commit updates Globalize to v1.0.0-pre, and it changes $.date and datepicker accordingly.

Having said that, we can consider it temporary though. It will likely to be fixed and squashed later. There are so many things to be improved here. But, I wanted to get it working (in the simplest way). So, we can discuss the implementation. Follow my comments inline in the code above.

PS: Do we have a datepicker PR? I could not find it. That's why I am making comments inline in this code. Although, we may lose all of them in case we squash/fix/amend this commit.

PS2: I took the liberty to push this commit here (in the current datepicker branch). Because, I understood we want to release this new datepicker using the new Globalize-CLDR (v1.0.0). In case I should keep this implementation in a separate branch, just let me know.

Member

tjvantoll replied Dec 1, 2013

PS: Do we have a datepicker PR? I could not find it. That's why I am making comments inline in this code. Although, we may lose all of them in case we squash/fix/amend this commit.

We do not.

PS2: I took the liberty to push this commit here (in the current datepicker branch). Because, I understood we want to release this new datepicker using the new Globalize-CLDR (v1.0.0). In case I should keep this implementation in a separate branch, just let me know.

I think this is fine on this branch, but can you please update the unit tests and demos so that they run again? It's probably just a matter of fixing up paths.

I'll be able to take a more thorough look at these changes tomorrow.

Member

rxaviers replied Dec 1, 2013

I think this is fine on this branch, but can you please update the unit tests and demos so that they run again? It's probably just a matter of fixing up paths.

Sure. Will do it tomorrow, and let you know.

Member

rxaviers replied Dec 2, 2013

Done. db78dd5 (previously aeeac1b)

Demos:
Some of the demos were broken and have been fixed. Something to notice:

  • icon-trigger.html - Did it work previously fdaac17? Icon or focus are not triggering the calendar to me.
  • min-max.html - Did it work previously fdaac17? Min or max ranges make no difference to me.
  • show-week.html
    • Dropped week of year's ISO 8601 definition, and instead adopted [Unicode CLDR's](www.unicode.org/reports/tr35 /tr35-dates.html#Date_Field_Symbol_Table). According to demo's description, previous calculation was: "the week starts on Monday, the first week of the year contains the first Thursday of the year". On CLDR, this calculation depends on the locale. Because, different locales have different rules for the first day of the week, and for the minimum days required in the first week of a year. So, $.date now uses CLDR Week of Year ("w" pattern) generated using Globalize.format aeeac1b#diff-7;

Tests:

  • Date: all passes except for two prev failing tests;
  • Spinner widget is currently broken as a side effect of current Globalize not supporting number formatting/parsing.
Member

tjvantoll replied Dec 2, 2013

The demos look fine now. Not all of them were working correctly and we're tracking the issues with them on the wiki (search for "Issues on existing demos").

I'm still getting a lot of failures and a "Globalize is not defined" error on the tests though.

I guess we probably should create a datepicker PR so these comments don't get lost.

Member

rxaviers replied Dec 2, 2013

I'm still getting a lot of failures and a "Globalize is not defined" error on the tests though.

On which component?

Member

tjvantoll replied Dec 2, 2013

datepicker

Member

rxaviers replied Dec 2, 2013

Updated in db78dd5

PS: Ouch, I haven't considered the browser tests before. Now, grunt and also browser tests got fixed.

In this file, we define the "jQuery UI translation data". I think we must move this file away from /external. Because, it is not an external dependency file in any way. This is part of jQuery UI. I have no suggestion where to place it though.

Member

rxaviers replied Dec 1, 2013

PS: Above, the translation data have not been changed. But, as I fixed the indentation, everything has been (-), then (+).

I have inserted above: (a) CLDR en calendar data, and (b) CLDR supplemental data in here for simplicity. But, it should NOT be here.

This data should be taken care by user-code (considering our demo and tests as user-codes as well). We should probably add a section in the documentation with good explanations about how to get it setup.

User should be able to choose how this data should be loaded: it could be inlined as above (ugly), it could be handled via AMD (eg), it could be fetched via $.ajax by user's application, etc.

User should also be able to choose what data to load. Here I mean two things: what amount of locale data to load based on his need, and also which CLDR version to load.

@rxaviers rxaviers Datepicker: Use Globalize 1.0.0
- Update $.date, and datepicker tests;
- Update globalize; (previously, the link has been committed)
- Update demos;
- Change Week of Year of $.date days(). Drop iso8601Week and instead use CLDR's
  Week of Year ("w" pattern) generated using Globalize.format;
db78dd5

Can we extend Globalize or the underlying CLDR lib to accept indices for the day, starting at 0 for Sunday? Would be nice if we could remove these lookup lists/maps.

Member

rxaviers replied Dec 17, 2013

Absolutely.

I think we'll have a clear picture after we have some other stuff settle down first, eg. are we going to refactor this using moment.js-CLDR?

What is this?

Member

rxaviers replied Dec 17, 2013

I'm not rebasing, amending commits on this branch to avoid bothering @tjvantoll or other people working on this same branch. But, this is fixed on a subsequent commit: db78dd5.

Yes, we should do that. Could you also add a note on the wiki TODO list for datepicker about this?

tjvantoll and others added some commits Dec 27, 2013

@tjvantoll tjvantoll Datepicker: Test for up and down arrow keys e4a3e82
@tjvantoll tjvantoll Datepicker: Tests for Page Up and Page Down keys 677601c
@tjvantoll tjvantoll Datepicker: Tests for moving years with Page Up and Page Down 7e79a71
@tjvantoll tjvantoll Datepicker: Use explicit dates in tests.
This prevents tests from running differently dependent on the current date. Some of these tests when the clocked moved forward to 2014.
6c2a806
@tjvantoll tjvantoll Datepicker: Port tests for keyboard handling with short months & leap…
… years.
0c40d2a
@tjvantoll tjvantoll Datepicker: Re-adding mouse tests. 010a131
@tjvantoll tjvantoll Datepicker: Adding an isValid() method. 5da4880
@tjvantoll tjvantoll Datepicker: Handle for invalid values in value() and valueAsDate() b2018c4
@tjvantoll tjvantoll Datepicker: Update the picker as the user types valid dates 98c8556
@tjvantoll tjvantoll Date: Updating test suite to coding standards. 0cd4989
@tjvantoll tjvantoll Date: Make $.date() a constructor function. Move methods to prototype. dee3879
@tjvantoll tjvantoll Merge branch 'master' into datepicker
Conflicts:
	Gruntfile.js
	demos/datepicker/alt-field.html
	demos/datepicker/animation.html
	demos/datepicker/buttonbar.html
	demos/datepicker/date-formats.html
	demos/datepicker/date-range.html
	demos/datepicker/datepicker-ar.js
	demos/datepicker/datepicker-he.js
	demos/datepicker/datepicker-zh-TW.js
	demos/datepicker/default.html
	demos/datepicker/dropdown-month-year.html
	demos/datepicker/icon-trigger.html
	demos/datepicker/inline.html
	demos/datepicker/localization.html
	demos/datepicker/min-max.html
	demos/datepicker/multiple-calendars.html
	demos/datepicker/other-months.html
	demos/datepicker/show-week.html
	tests/unit/datepicker/datepicker.html
	tests/unit/datepicker/datepicker_core.js
	ui/datepicker.js
8b2e13c
@fnagel fnagel Merge branch 'master' into datepicker
Conflicts:
	demos/datepicker/alt-field.html
	demos/datepicker/animation.html
	demos/datepicker/buttonbar.html
	demos/datepicker/date-formats.html
	demos/datepicker/date-range.html
	demos/datepicker/default.html
	demos/datepicker/dropdown-month-year.html
	demos/datepicker/icon-trigger.html
	demos/datepicker/inline.html
	demos/datepicker/localization.html
	demos/datepicker/min-max.html
	demos/datepicker/multiple-calendars.html
	demos/datepicker/other-months.html
	demos/datepicker/show-week.html
e86cd81
@fnagel fnagel Datepicker: fix jshint and htmllint issues, code style 4d65dae
@fnagel fnagel Datepicker: rename select method to _select
Make select() a private method as it's not part of the specification.
036190e
@fnagel fnagel Datepicker: fix and simplify icon trigger demo 6ee2cd5
@fnagel fnagel Datepicker: use short instead of abbreviated format for table header
Revert to old behavior with two instead of three chars.
Fixes layout issue with wrong day table cell width.
7175e0d
@fnagel fnagel Datepicker: remove unneeded comma 2914766
@fnagel fnagel Datepicker: remove unneeded default setting of option dateFormat c3a2b1b
@fnagel fnagel Datepicker: fix populate alternate field demo 3736808
@fnagel fnagel Datepicker: adjust date.js day name unit test to short name change 8d9f5db
@fnagel fnagel Datepicker: restore old icon trigger demo behavior cd96b4c
@fnagel fnagel Datepicker: Introduce value option
Change status caching, fix existing value related methods, introduce
$.date construction with date object, add selected getter
49728a9
@fnagel fnagel Calendar: Add calendar widget
Add calendar widget by copying and renaming datepicker widget files
d6c8e5d
@fnagel fnagel Calendar: remove unneeded translation files bb275b7
@fnagel fnagel Calendar: Rename $.date selected method
Rename $.date selected method in order to prevent internal variable conflict.
44baada
@fnagel fnagel Calendar: remove datepicker functionality, options and methods d11e35b
@fnagel fnagel Calendar: Fix focus highlighting when month is changed 7aac60a
@fnagel fnagel Calendar: Make use of uniqueId method 485825d
@fnagel fnagel Calendar: Add _isValid method
Add a basic _isValid method for both widgets to check for valid dates.
dad7a63
@fnagel fnagel Datepicker: $.date.selected() should return the actual date object
The method should return the actual date object instead of the copied $.date
object
9191785
@fnagel fnagel Datepicker: Remove calendar functionality, options and methods 8acfca5
@fnagel fnagel Calendar: Fix AMD dependencies aa1aea1
@fnagel fnagel Calendar: Add min and max option
Add min and max option by extending _isValid method and improving render day
cell mechanism
504ab73
@fnagel fnagel Calendar: Remove unneeded demo files ada1afb
@fnagel fnagel Datepicker: Add min and max option 8f5e4c8
@fnagel fnagel Datepicker: Remove select callback reference 83ff362
@fnagel fnagel Calendar: Remove select callback reference 088bcca
@fnagel fnagel Calendar: Fix min / max option incl. refresh after setting option c1e4beb
@fnagel fnagel Calendar: Fix multiple calendar styles 9709140
@fnagel fnagel Datepicker: Fix date range demo 2d380e8
@fnagel fnagel Datepicker: Remove unneeded inline demo file 8feabf1
@fnagel fnagel Datepicker: Read and write min / max attributes 6083a01
@fnagel fnagel Calendar: Add missing AMD dependency todo comment 7cabbef
@fnagel fnagel Datepicker: Read and write min / max attributes (follow-up) 43b448e
@fnagel fnagel Datepicker tests: Add Calendar widget dependency to unit tests fb774c8

fnagel added some commits Jun 11, 2014

@fnagel fnagel Datepicker: Use correct format for reading min and max options.
Use HTML5 date format for reading min and max attributes from input element.
Remove now unneeded helper method for parsing date strings.
4122838
@fnagel fnagel Datepicker: Simplify usage of calendar options and avoid duplications f37357f
Member

fnagel commented Jun 12, 2014

@tjvantoll Sorry, I missed our time frame this week. Any chance to talk at the weekend?

I've implemented all changes and hints discussed in this PR. I will now try to fix the unit tests in order to stabilize and fix existing functionality.

Member

fnagel commented Jun 13, 2014

Some more fixes for datepicker and its unit tests.

Member

tjvantoll commented Jun 13, 2014

Hey @fnagel, sorry I have been traveling this week and I won't be able to chat this weekend. I have an open calendar on Monday and Tuesday next week though.

Member

fnagel commented Jun 16, 2014

Some unit tests clean up (thanks @tjvantoll), re-added beforeOpen, some min / max option and common unit tests.

Tried to fix travis build by merging master branch.

Member

fnagel commented Jun 17, 2014

Reworked some more unit tests and fixes minor glitches. Travis build works now.

Member

fnagel commented Jun 17, 2014

@tjvantoll You were right, merging master branch fixed the travis build issue :-D

Member

fnagel commented Jun 19, 2014

Fixed almost all datepicker unit tests, fixed most demos and several minor issues.

Member

fnagel commented Jun 19, 2014

Fixed 'snake easter-egg' issue ;-)

Member

fnagel commented Jun 19, 2014

Changed keyboard support, improved localization, added localization unit tests.

Member

tjvantoll commented Jun 19, 2014

@fnagel This PR is starting to become too big to digest so it would be nice to see this get merged into the main branch soon. Could you work on removing the duplicate demos and tests for calendar next? I think once the duplicate stuff is removed we can get these changes incorporated.

Member

fnagel commented Jun 20, 2014

@tjvantoll I agree - we should merge this soon to keep the PR usable. I already finished removing duplicated demos and started with the unit tests. This will take some more time as it's an non trivial task and I'm starting a new job next week.

Member

fnagel commented Jun 27, 2014

@rxaviers Thanks for your comments. Which seems to be no more available, even when using the anchor links within the GitHub notification emails. We already talked about updating Globalize and I will make sure to add proper dependencies to calendar / datepicker.

rxaviers wrote:

General reminder: external/date.js is NOT an external library. It's not hosted (neither version-controlled) anywhere except in here. So, we may need to either make it an external library or move it inside ui/.

@jzaefferer @scottgonzalez @tjvantoll Any thoughts on this?

Owner

jzaefferer commented Jun 27, 2014

As I wrote in a wiki comment: Regarding the pseudo-external date.js: I suggest handling it as another source file for now, putting it in the "ui" folder. The unit tests already match that. That would be less misleading then what we have now. And we can still extract it later, if we want to.

Member

rxaviers commented Jun 27, 2014

@fnagel, thanks for bringing it back. After I added a couple of comments in here and talked with Scott about it, I realized my comments made more sense to be added into the wiki instead. So, I've deleted them and edited the wiki accordingly.

@jzaefferer, I think your approach is better than the current scenario. So, 👍

Member

tjvantoll commented Jun 29, 2014

+1 to putting date.js in the "ui" folder for now.

Member

fnagel commented Jul 2, 2014

PR updated: work on unit tests (fix calendar tests and remove duplicates), fix calendar demos, removed duplicated demos, fix some minor issues.

Owner

scottgonzalez commented Jul 2, 2014

Can you rebase this? It's really hard to see what's actually happening with all the old commits.

Member

fnagel commented Jul 2, 2014

We already talked about rebase vs. merge and agreed to merge datepicker branch as a rebase is to much trouble.

The latest commits start at TJs comment from June 19.

We talked about closing this PR as soon as I finish the unit tests split (which should be very soon as all test except the options tests are ready).

Owner

jzaefferer commented Jul 2, 2014

How about merging master into the datepicker branch, the rebasing this PR on top of it? That should get the non-datepicker commits out of this PR.

fnagel added some commits Jul 2, 2014

@fnagel fnagel Merge branch 'master' into datepicker
Conflicts:
	demos/calendar/buttonbar.html
	demos/calendar/dropdown-month-year.html
	demos/calendar/multiple-months.html
	demos/datepicker/alt-field.html
	demos/datepicker/animation.html
	demos/datepicker/date-formats.html
	demos/datepicker/date-range.html
	demos/datepicker/default.html
	demos/datepicker/icon-trigger.html
	demos/datepicker/inline.html
	demos/datepicker/localization.html
	demos/datepicker/min-max.html
	demos/datepicker/other-months.html
	demos/datepicker/show-week.html
	external/globalize/globalize.culture.de-DE.js
	external/globalize/globalize.culture.ja-JP.js
	tests/unit/datepicker/datepicker.html
4ce0c3f
@fnagel fnagel Calendar: Adjust files to match reorganization of external directory 077e9aa
@fnagel fnagel Datepicker: Adjust files to match reorganization of external directory 7bb5056
Member

fnagel commented Jul 7, 2014

@scottgonzalez Did you manage to find some time to look at this PR?

Owner

scottgonzalez commented Jul 7, 2014

I've gotten through all the commits in the original datepicker branch (see https://github.com/scottgonzalez/jquery-ui/tree/datepicker-rebase-cleanup) and I'll likely be able to start on the rebase of this tomorrow morning. I expect to have the rebase done before this week's meeting.

Member

fnagel commented Jul 7, 2014

Nice, thanks for the info.

I'm not sure if I will be able to attend the meeting this week as I'll be at a customer site.

scottgonzalez referenced this pull request Jul 14, 2014

Closed

Calendar WIP #1281

Owner

scottgonzalez commented Jul 14, 2014

Moved to #1281.

This was referenced Sep 3, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment