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.

Sign up for GitHub

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

EZEE-2481: Time picker bases on system time ignoring time zone in user settings #893

Merged
merged 4 commits into from
Mar 19, 2019
Merged

EZEE-2481: Time picker bases on system time ignoring time zone in user settings #893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8cc98f4
EZEE-2480: Allow user to select date in ezdatetime in their timezone
tischsoic Mar 11, 2019
d36d25d
Use browser timezone from Intl and .tz() from moment js to convert da…
tischsoic Mar 13, 2019
556a7e6
Fix only convertDateToTimezone from eZ.helpers.timezone
tischsoic Mar 13, 2019
d43866b
Change how the current set date is evaluated
Mar 18, 2019
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
28 changes: 21 additions & 7 deletions src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
const SELECTOR_FLATPICKR_INPUT = '.flatpickr-input';
const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper';
const EVENT_VALUE_CHANGED = 'valueChanged';
const { convertDateToTimezone } = eZ.helpers.timezone;
const userTimezone = eZ.adminUiConfig.timezone;

class EzDateTimeValidator extends eZ.BaseFieldValidator {
/**
Expand Down Expand Up @@ -63,21 +65,22 @@
const datetimeConfig = {
enableTime: true,
time_24hr: true,
formatDate: (date) => new Date(date).toLocaleString(),
};
const updateInputValue = (sourceInput, date) => {
const updateInputValue = (sourceInput, dates) => {
const event = new CustomEvent(EVENT_VALUE_CHANGED);

if (!date.length) {
if (!dates.length) {
sourceInput.value = '';
sourceInput.dispatchEvent(event);

return;
}

date = new Date(date[0]);
sourceInput.value = Math.floor(date.getTime() / 1000);
const selectedDate = dates[0];
const selectedDateWithUserTimezone = convertDateToTimezone(selectedDate, userTimezone, true);
const timestamp = Math.floor(selectedDateWithUserTimezone.valueOf() / 1000);

sourceInput.value = timestamp;
sourceInput.dispatchEvent(event);
};
const clearValue = (sourceInput, flatpickrInstance, event) => {
Expand All @@ -91,13 +94,24 @@
const sourceInput = field.querySelector(SELECTOR_INPUT);
const flatPickrInput = field.querySelector(SELECTOR_FLATPICKR_INPUT);
const btnClear = field.querySelector('.ez-data-source__btn--clear-input');
const defaultDate = sourceInput.value ? new Date(sourceInput.value * 1000) : null;
const secondsEnabled = sourceInput.dataset.seconds === '1';
const formatDate = secondsEnabled ? (date) => date.toLocaleString() : (date) => eZ.helpers.timezone.formatDate(date);
Copy link
Contributor Author

@tischsoic tischsoic Mar 13, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Note: As agreed with @SylvainGuittard, if seconds are enabled we fall back to date.toLocaleString() because there it high probability that the date format from user settings does not include seconds. Otherwise we use the date format from user settings.

let defaultDate = null;

if (sourceInput.value) {
const defaultDateWithUserTimezone = convertDateToTimezone(sourceInput.value * 1000);
const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

defaultDate = new Date(convertDateToTimezone(defaultDateWithUserTimezone, browserTimezone, true));
}

const flatpickrInstance = flatpickr(
flatPickrInput,
Object.assign({}, datetimeConfig, {
onChange: updateInputValue.bind(null, sourceInput),
defaultDate,
enableSeconds: !!parseInt(sourceInput.dataset.seconds, 10),
enableSeconds: secondsEnabled,
formatDate,
})
);

Expand Down
4 changes: 2 additions & 2 deletions src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
const userPreferedFullDateFormat = eZ.adminUiConfig.dateFormat.full;
const userPreferedShortDateFormat = eZ.adminUiConfig.dateFormat.short;

const convertDateToTimezone = (date, timezone = userPreferedTimezone) => {
return moment(date).tz(timezone);
const convertDateToTimezone = (date, timezone = userPreferedTimezone, forceSameTime = false) => {
return moment(date).tz(timezone, forceSameTime);
};
const formatDate = (date, format = userPreferedFullDateFormat) => {
return moment(date).formatPHP(format);
Expand Down
4 changes: 1 addition & 3 deletions src/lib/Behat/PageElement/DateAndTimePopup.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,7 @@ public function setTime(string $hour, string $minute): void

if (!$isTimeOnly) {
// get current date as it's not possible to set time without setting date
$currentDateScript = sprintf('document.querySelector("%s %s")._flatpickr.formatDate(document.querySelector("%s %s")._flatpickr.selectedDates, "Y-m-d")',
$this->fields['containerSelector'],
$this->fields['flatpickrSelector'],
$currentDateScript = sprintf('document.querySelector("%s %s")._flatpickr.selectedDates[0].toLocaleString()',
$this->fields['containerSelector'],
$this->fields['flatpickrSelector']);
$currentDate = $this->context->getSession()->getDriver()->evaluateScript($currentDateScript);
Expand Down