HTML5 Date Fields

docs/en/02_Developer_Guides/03_Forms/Field_types/02_DateField.md

@@ -40,19 +40,19 @@ A custom date format for a [api:DateField] can be provided through `setDateForma
 	DateField::create('MyDate')->setDateFormat('dd-MM-yyyy'); 
 
 <div class="info" markdown="1">
-The formats are based on [CLDR format](http://userguide.icu-project.org/formatparse/datetime).
+The formats are based on [ICU format](http://www.icu-project.org/apiref/icu4c/classSimpleDateFormat.html#details).
 </div>
 
 
 ## Min and Max Dates
 
 Sets the minimum and maximum allowed date values using the `min` and `max` configuration settings (in ISO format or 
-strtotime()).
+`strtotime()`).
 
 	:::php
 	DateField::create('MyDate')
 		->setMinDate('-7 days')
-		->setMaxDate'2012-12-31')
+		->setMaxDate('2012-12-31')
 
 ## Separate Day / Month / Year Fields
 
@@ -66,33 +66,21 @@ HTML5 placeholders 'day', 'month' and 'year' are enabled by default.
 Any custom date format settings will be ignored. 
 </div>
 
-## Calendar Picker
+## Date Picker and HTML5 support
 
-The following setting will add a Calendar to a single DateField, using the jQuery UI DatePicker widget.
+The field can be used as a [HTML5 input date type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
+(with `type=date`) by calling `setHTML5(true)`.
 
 	:::php
 	DateField::create('MyDate')
-		->setShowCalendar(true);
-
-The jQuery date picker will support most custom locale formats (if left as default).
-If setting an explicit date format via setDateFormat() then the below table of supported
-characters should be used.
-
-It is recommended to use numeric format, as `MMM` or `MMMM` month names may not always pass validation.
-
-Constant | xxxxx
--------- | -----
-d        | numeric day of the month (without leading zero)
-dd       | numeric day of the month (with leading zero)
-EEE      | dayname, abbreviated
-EEEE     | dayname
-M        | numeric month of the year (without leading zero)
-MM       | numeric month of the year (with leading zero)
-MMM	     | monthname, abbreviated	
-MMMM     | monthname
-y        | year (4 digits)
-yy       | year (2 digits)
-yyyy     | year (4 digits)
+		->setHTML5(true);
+
+In browsers [supporting HTML5 date inputs](caniuse.com/#feat=input-datetime),
+this will cause a localised date picker to appear for users.
+In this mode, the field will be forced to present and save ISO 8601 date formats (`y-MM-dd`),
+since the browser takes care of converting to/from a localised presentation.
+
+Browsers without support receive an `<input type=text>` based polyfill.
 
 ## Formatting Hints
 

docs/en/02_Developer_Guides/13_i18n/index.md

@@ -71,18 +71,24 @@ and default alignment of paragraphs and tables to browsers.
 
 ### Date and time formats
 
-Formats can be set globally in the i18n class. These settings are currently only picked up by the CMS, you'll need
-to write your own logic for any frontend output.
+Formats can be set globally in the i18n class. 
+You can use these settings for your own view logic.
 
 	:::php
 	Config::inst()->update('i18n', 'date_format', 'dd.MM.YYYY');
 	Config::inst()->update('i18n', 'time_format', 'HH:mm');
 
-Most localization routines in SilverStripe use the [Zend_Date API](http://framework.zend.com/manual/1.12/en/zend.date.overview.html).
-This means all formats are defined in
-[ISO date format](http://framework.zend.com/manual/1.12/en/zend.date.constants.html),
+Localization in SilverStripe uses PHP's [intl extension](http://php.net/intl).
+Formats for it's [IntlDateFormatter](http://php.net/manual/en/class.intldateformatter.php)
+are defined in [ICU format](http://www.icu-project.org/apiref/icu4c/classSimpleDateFormat.html#details),
 not PHP's built-in [date()](http://nz.php.net/manual/en/function.date.php).
 
+These settings are not used for CMS presentation.
+Users can choose their own locale, which determines the date format
+that gets presented to them. Currently this is a mix of PHP defaults (for readonly `DateField` and `TimeField`),
+browser defaults (for `DateField` on browsers supporting HTML5), and [Moment.JS](http://momentjs.com/)
+client-side logic (for `DateField` polyfills and other readonly dates and times).
+
 ### Language Names
 
 SilverStripe comes with a built-in list of common languages, listed by locale and region.

docs/en/04_Changelogs/4.0.0.md

@@ -398,6 +398,18 @@ In templates this can also be invoked as below:
     <%t MyObject.PLURALS 'An item|{count} items' count=$Count %>
 
 
+#### Removed Member.DateFormat and Member.TimeFormat database settings
+
+We're using [native HTML5 date and time pickers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
+in `DateField` and `TimeField` now ([discussion](https://github.com/silverstripe/silverstripe-framework/issues/6626)),
+where the browser localises the output based on the browser/system preferences.
+In this context it no longer makes sense to give users control over their own
+date and time formats in their CMS profile. 
+
+`Member->getDateFormat()` and `Member->getTimeFormat()` still exist, and default to
+the [IntlDateFormatter defaults](http://php.net/manual/en/class.intldateformatter.php) for the selected locale.
+
+
 #### New asset storage mechanism
 
 File system has been abstracted into an abstract interface. By default, the out of the box filesystem
@@ -1495,19 +1507,27 @@ New `DatetimeField` methods replace `getConfig()` / `setConfig()`:
 
 New `DateField` methods replace `getConfig()` / `setConfig()`:
 
-* `getShowCalendar()` / `setShowCalendar()`
-* `getDateFormat()` / `setShowCalendar()`
+* `getDateFormat()` / `setDateFormat()`
 * `getMinDate()` / `setMinDate()`
 * `getMaxDate()` / `setMaxDate()`
-* `getPlaceholders()` / `setPlaceholders()`
-* `getClientLocale` / `setClientLocale`
 * `getLocale()` / `setLocale()`
-* option `dmyfields` is now superceded with an `SeparatedDateField` class
+
+The `DateField` has changed behavior:
+
+* `DateField` no longer provides a jQuery UI date picker,
+   and uses [HTML5 date pickers](https://www.wufoo.com/html5/types/4-date.html) instead.
+   Use `setUseHTML()` to activate this mode (instead of `setConfig('showcalendar', true)`).
+* `DateField` provides an optional polyfill for
+  [browsers without HTML5 date picker support](http://caniuse.com/#feat=input-datetime) 
+* The `dmyfields` option is now superceded with an `SeparatedDateField` class.
+* `getPlaceholders()` / `setPlaceholders()` moved to a new `SeparatedDateField` class
+* `getClientLocale` / `setClientLocale` have been removed (handled by `DateField->locale` and browser settings)
 
 New `TimeField` methods replace `getConfig()` / `setConfig()`
 
 * `getTimeFormat()` / `setTimeFormat()`
 * `getLocale()` / `setLocale()`
+* `getClientConfig()` has been removed (in favour of `setHTML5()`)
 
 #### <a name="overview-template-removed"></a>Template and Form Removed API