honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2959 from alicelupsan/bug/react-list-form/2943 

React-list-form DateField does not support manually entering date #2943
This commit is contained in:
Hugo Bernier 2022-09-05 20:41:33 -07:00 committed by GitHub
parent 055d9c9293 c133fc3af6
commit 6aac8d69c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
samples/react-list-form/src/webparts/listForm/components/formFields/DateFormField.tsx
View File

@ -24,9 +24,8 @@ export interface IDateFormFieldState {
export default class DateFormField extends React.Component<IDateFormFieldProps, IDateFormFieldState> {
constructor(props) {
super(props);
this._createComboBoxHours = this._createComboBoxHours.bind(this);
this._createComboBoxMinutes = this._createComboBoxMinutes.bind(this);
this.state = {
date: null,
hours: 0,
minutes: 0
};
@ -35,13 +34,14 @@ export default class DateFormField extends React.Component<IDateFormFieldProps,
public componentDidUpdate(prevProps: IDateFormFieldProps, prevState: IDateFormFieldState) {
//Component Value property got updated from List State
if (this.props.value && prevProps.value != this.props.value) {
let momentDate = moment(this.props.value, moment.localeData(this.props.locale).longDateFormat('L'));
let date: Date = this._parseDateString(this.props.value);
this.setState({
hours: momentDate.hour(),
minutes: momentDate.minute(),
date: momentDate.toDate()
date: date,
hours: date.getHours(),
minutes: date.getMinutes()
});
}
//Component value updated
if (this.state.date && this.state.date != prevState.date) {
let result = this.props.fieldSchema.DisplayFormat == 1 ?
@ -59,10 +59,10 @@ export default class DateFormField extends React.Component<IDateFormFieldProps,
ariaLabel={this.props.ariaLabel}
className={css(this.props.className, this.props.fieldSchema.DisplayFormat == 1 ? "ms-sm12 ms-md12 ms-lg6 ms-xl8" : "ms-sm12")}
firstDayOfWeek={this.props.firstDayOfWeek}
formatDate={(date: Date) => (typeof date.toLocaleDateString === 'function') ? date.toLocaleDateString(this.props.locale) : ''}
formatDate={(date: Date) => (date && typeof date.toLocaleDateString === 'function') ? date.toLocaleDateString(this.props.locale) : ''}
isRequired={this.props.isRequired}
onSelectDate={this._onSelectDate}
parseDateFromString={(dateStr: string) => new Date(Date.parse(dateStr))}
parseDateFromString={this._parseDateString}
placeholder={this.props.placeholder}
strings={strings}
value={this.state.date}
@ -95,29 +95,67 @@ export default class DateFormField extends React.Component<IDateFormFieldProps,
}
private _onSelectDate = (inputDate: Date | null | undefined): void => {
let date = inputDate ? moment(inputDate) : moment();
date.hour(this.state.hours);
date.minute(this.state.minutes);
this.setState({ date: date.toDate() });
this.setState(prevState => {
let momentDate = inputDate ?
moment(inputDate, moment.localeData(this.props.locale).longDateFormat('L')) : moment();
momentDate.hour(prevState.hours);
momentDate.minute(prevState.minutes);
return {
date: momentDate.toDate(),
hours: prevState.hours,
minutes: prevState.minutes
};
});
}
private _onHoursChanged = (event: React.FormEvent<IComboBox>, option?: IComboBoxOption): void => {
if (option) {
let date = this.state.date ? moment(this.state.date) : moment();
let hours = parseInt(option.key.toString());
date.hour(hours);
this.setState({ date: date.toDate(), hours });
this.setState(prevState => {
let momentDate = prevState.date ?
moment(prevState.date, moment.localeData(this.props.locale).longDateFormat('L')) : moment();
let hours = parseInt(option.key.toString());
momentDate.hour(hours);
momentDate.minute(prevState.minutes);
return {
date: momentDate.toDate(),
hours: hours,
minutes: prevState.minutes
};
});
}
}
private _onMinutesChanged = (event: React.FormEvent<IComboBox>, option?: IComboBoxOption): void => {
if (option) {
let date = this.state.date ? moment(this.state.date) : moment();
let minutes = parseInt(option.key.toString());
date.minute(minutes);
this.setState({ date: date.toDate(), minutes });
this.setState(prevState => {
let momentDate = prevState.date ?
moment(prevState.date, moment.localeData(this.props.locale).longDateFormat('L')) : moment();
let minutes = parseInt(option.key.toString());
momentDate.hour(prevState.hours);
momentDate.minute(minutes);
return {
date: momentDate.toDate(),
hours: prevState.hours,
minutes: minutes
};
});
}
}
private _createComboBoxHours(): IComboBoxOption[] {
private _parseDateString = (inputDate: string): Date => {
if (!inputDate) {
return null;
}
let momentDate = moment(inputDate, moment.localeData(this.props.locale).longDateFormat('L'));
let time = this.props.fieldSchema.DisplayFormat == 1 ? moment(inputDate.split(" ")[1], moment.localeData(this.props.locale).longDateFormat('LT')) : null;
if (time) {
momentDate.hours(time.hours());
momentDate.minutes(time.minutes());
}
return momentDate.toDate();
}
private _createComboBoxHours = (): IComboBoxOption[] => {
let results = new Array<IComboBoxOption>();
if (this.props.fieldSchema.HoursOptions) {
results = this.props.fieldSchema.HoursOptions.map((item, index) => {
@ -129,7 +167,7 @@ export default class DateFormField extends React.Component<IDateFormFieldProps,
}
return results;
}
private _createComboBoxMinutes(): IComboBoxOption[] {
private _createComboBoxMinutes = (): IComboBoxOption[] => {
let results = new Array<IComboBoxOption>();
for (var i = 0; i < 60; i++) {
results.push({
@ -139,5 +177,4 @@ export default class DateFormField extends React.Component<IDateFormFieldProps,
}
return results;
}
}

2
samples/react-list-form/src/webparts/listForm/components/formFields/SPFieldDateEdit.tsx
View File

@ -17,7 +17,7 @@ const SPFieldDateEdit: React.SFC<ISPFormFieldProps> = (props) => {
ariaLabel={props.fieldSchema.Title}
locale={locale}
firstDayOfWeek={props.fieldSchema.FirstDayOfWeek}
allowTextInput
allowTextInput={true}
fieldSchema={props.fieldSchema}
value={props.value}
valueChanged={props.valueChanged}