Ghost/ghost/admin/app/components/gh-date-time-picker.hbs
Simon Backx 07cb542b97
Improved timezone support date picker and improved tests (#15545)
fixes https://github.com/TryGhost/Team/issues/1946

Problem:
- When running the admin tests in a timezone that is later than UTC, the tests failed.

Causes:
- Some tests needed some adjustements
- The DateTimePicker did not always use the correct timezone.
- Test models createdAt times sometimes depended on the timezone of the test runner

Solution:
- All the input DateTimePicker gets should be processed in the blog's timezone.
- Make sure that all communication (properties, setters, minDate...) with `PowerDatepicker` happens in the local timezone. When setting, convert that date to the blog timezone and use that as the real value.
2022-10-07 12:20:06 +02:00

44 lines
2.0 KiB
Handlebars

<div class="gh-date-time-picker" data-test-component="gh-date-time-picker">
<PowerDatepicker
@selected={{readonly this.localDateValue}}
@center={{readonly this.localDateValue}}
@onSelect={{action "setLocalDate" value="date"}}
@renderInPlace={{this.renderInPlaceWithFallback}}
@disabled={{this.disabled}} as |dp|
>
<dp.Trigger class={{@datePickerTriggerClass}} @tabindex="-1" data-test-date-time-picker-datepicker>
<div class="gh-date-time-picker-date {{if this.dateError "error"}}">
<input type="text"
placeholder={{this.dateFormat}}
value={{readonly this.dateValue}}
disabled={{this.disabled}}
{{on "input" (fn this.onDateInput dp)}}
{{on "blur" this.onDateBlur}}
{{on "keydown" (fn this.onDateKeydown dp)}}
data-test-date-time-picker-date-input>
{{svg-jar "calendar"}}
</div>
</dp.Trigger>
<dp.Content class="dropdown-menu {{@datePickerClass}}">
<dp.Nav />
<dp.Days @minDate={{this._minDate}} @maxDate={{this._maxDate}} @weekdayFormat="min" />
</dp.Content>
</PowerDatepicker>
<div class="gh-date-time-picker-time {{if this.hasError "error"}} {{@timeInputClass}}">
<input
type="text"
value={{this._time}}
disabled={{this.disabled}}
{{on "change" this.updateTimeValue}}
{{on "blur" (fn this.setTimeInternal this._time)}}
{{did-insert this.registerTimeInput}}
data-test-date-time-picker-time-input
>
<small class="gh-date-time-picker-timezone" data-test-date-time-picker-timezone>{{this.timezone}}</small>
</div>
{{#if this.hasError}}
<div class="gh-date-time-picker-error" data-test-date-time-picker-error>{{this.dateError}}{{this.timeError}}</div>
{{/if}}
</div>