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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML5 Date Fields #6766

Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 14 additions & 26 deletions docs/en/02_Developer_Guides/03_Forms/Field_types/02_DateField.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand Down
16 changes: 11 additions & 5 deletions docs/en/02_Developer_Guides/13_i18n/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
30 changes: 25 additions & 5 deletions docs/en/04_Changelogs/4.0.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

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

Need to add notes on the removal of MemberDatetimeOptionsetField to this section.

Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe mention DateField_View_JQuery too here.

Copy link
Member Author

Choose a reason for hiding this comment

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

Done


Expand Down
Loading