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

Fix Datepicker default date formatting (v2) #425

Merged
merged 6 commits into from
May 28, 2024
Merged

Fix Datepicker default date formatting (v2) #425

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
532612b
fix default date issue
May 24, 2024
c492a64
fix formatting
May 27, 2024
c506fb9
fix time format tokens
May 27, 2024
2ef14c8
fix indentation
May 27, 2024
8ffbcba
fix time with second local format
May 28, 2024
f040544
reverting seconds fix on format date
May 28, 2024
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
33 changes: 21 additions & 12 deletions src/plugins/date-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,11 +109,11 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => {
borderColor: theme.greyColor,
color: theme.greyColor,
cursor: 'default'
},
'&:focus':{
outline: 'none',
boxShadow: `0 0 3px 1px ${theme.primaryWeakColor}`
}
},
'&:focus':{
outline: 'none',
boxShadow: `0 0 3px 1px ${theme.primaryWeakColor}`
}
}));

const Padding = styled.div(({ theme }) => ({
Expand Down Expand Up @@ -203,11 +203,15 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => {
};

handleAbort = () => {
const { message } = this.props;

this.props.onDismissFullscreen();
}

handleOnChange = (_, selectedString) => {
if (selectedString) {
this.setState({ msg: selectedString })
}
}

onKeyDown = (event) => {
const webchatWindow = document.getElementById("webchatWindow");
const calenderElements = webchatWindow?.getElementsByClassName("flatpickr-calendar");
Expand Down Expand Up @@ -297,7 +301,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => {
static getOptionsFromMessage(message: IMessage) {
const { data } = message.data._plugin;

const dateFormat = data.dateFormat || 'YYYY-MM-DD';
const dateFormat = data.dateFormat || 'Y-m-d';
kwinto marked this conversation as resolved.
Show resolved Hide resolved
const defaultDate = DatePicker.transformNamedDate(data.defaultDate)
|| DatePicker.transformNamedDate(data.minDate)
|| undefined;
Expand All @@ -307,9 +311,13 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => {
const flatpickrLocaleId = getFlatpickrLocaleId(localeId);
let locale = l10n[flatpickrLocaleId];
const enableTime = !!data.enableTime;

const timeTemp = data.time_24hr ? 'H:i' : 'h:i'; //12-hour format without AM/PM
const timeWithSeconds = data.enableSeconds ? `${timeTemp}:S` : timeTemp;
const timeFormat = data.time_24hr ? timeWithSeconds :`${timeWithSeconds} K` //12-hour format with AM/PM

const dateFormatString = enableTime ? `${dateFormat} ${timeFormat}` : dateFormat;
const dateFormatLocalString = `L${enableTime ? " LT" : ""}${data.enableSeconds ? "S" : ""}`;
fabclj marked this conversation as resolved.
Show resolved Hide resolved

if ( localeId === 'gb' ) locale = { ...locale, firstDayOfWeek: 1 };
const options = {
Expand All @@ -320,7 +328,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => {
minuteIncrement: data.minuteIncrement || 5,
noCalendar: data.noCalendar || false,
weekNumbers: data.weekNumbers || false,
dateFormat: enableTime ? `${dateFormat} ${timeFormat}` : dateFormat,
dateFormat: dateFormatString,
defaultDate,
disable: [] as any[],
enable: [] as any[],
Expand All @@ -336,7 +344,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => {
parseDate: dateString => moment(dateString).toDate(),
// if no custom formatting is defined, apply default formatting
formatDate: !data.dateFormat
? date => moment(date).locale(momentLocaleId).format(enableTime ? 'L LT' : 'L')
? date => moment(date).locale(momentLocaleId).format(dateFormatLocalString)
: undefined
};

Expand All @@ -351,7 +359,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => {
// resolve relative date names like today, tomorrow or yesterday
.map(DatePicker.transformNamedDate);

// the code in function_enable_disable was executed in a vm to check that its return value is from type boolean
// the code in function_enable_disable was executed in a vm to check that its return value is from type boolean
if (data?.function_enable_disable?.length > 0) {
try {
const flatpickrFn = new Function(`"use strict"; return ${data.function_enable_disable}`)();
Expand Down Expand Up @@ -415,7 +423,8 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => {
</Header>
<Content className="webchat-plugin-date-picker-content">
<Flatpickr
onChange={(dates, msg) => { this.setState({ msg }) }}
onChange={this.handleOnChange}
onReady={this.handleOnChange} // we need it to store defaultDate in state
options={
options
}
Expand Down
Loading