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

Jump to bottom

Add support to add Manual date entry in Datepicker table column #9631

Merged
merged 8 commits into from
May 24, 2024
Merged

Add support to add Manual date entry in Datepicker table column #9631

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2844ded
Removed unused packages
kavinvenkatachalam Mar 22, 2024
1cc89bc
Add Manual date entry in Datepicker table column
nakulnagargade May 7, 2024
6cd2f8f
Merge branch 'appbuilder-1.7' into chore/remove-unwanted-packages
johnsoncherian May 8, 2024
9a4a819
Remove date-fns dependency drom table date picker (#9585)
nakulnagargade May 8, 2024
10691ea
fix date input issue
nakulnagargade May 15, 2024
7443575
Remove consoles
nakulnagargade May 15, 2024
96e029f
Merge branch 'chore/remove-unwanted-packages' into datepicker-onchange
nakulnagargade May 16, 2024
8c8bd34
Merge branch 'appbuilder-1.7' into datepicker-onchange
johnsoncherian May 24, 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
106 changes: 75 additions & 31 deletions frontend/src/Editor/Components/Table/Datepicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,60 @@ import SolidIcon from '@/_ui/Icon/SolidIcons';

const DISABLED_DATE_FORMAT = 'MM/DD/YYYY';

const TjDatepicker = forwardRef(({ value, onClick, styles, dateInputRef, readOnly }, ref) => {
return (
<div className="table-column-datepicker-input-container">
<input
onBlur={(e) => {
e.stopPropagation();
}}
className={cx('table-column-datepicker-input text-truncate', {
'pointer-events-none': readOnly,
})}
value={value}
onClick={onClick}
ref={dateInputRef}
style={styles}
/>
{!readOnly && (
<span className="cell-icon-display">
<SolidIcon
width="16"
fill={'var(--borders-strong)'}
name="calender"
className="table-column-datepicker-input-icon"
/>
</span>
)}
</div>
);
});
const TjDatepicker = forwardRef(
(
{
value,
onClick,
styles,
dateInputRef,
readOnly,
onInputDateChange,
setIsDateInputFocussed,
setDateInputValue,
isDateInputFocussed,
},
ref
) => {
return (
<div className="table-column-datepicker-input-container">
<input
onBlur={(e) => {
if (isDateInputFocussed) {
onInputDateChange(e.target.value);
}
setIsDateInputFocussed(false);
e.stopPropagation();
}}
className={cx('table-column-datepicker-input text-truncate', {
'pointer-events-none': readOnly,
})}
value={value}
onClick={onClick}
ref={dateInputRef}
style={styles}
onChange={(e) => {
setIsDateInputFocussed(true);
setDateInputValue(e.target.value);
}}
onFocus={() => {
setDateInputValue(value);
}}
/>
{!readOnly && (
<span className="cell-icon-display">
<SolidIcon
width="16"
fill={'var(--borders-strong)'}
name="calender"
className="table-column-datepicker-input-icon"
/>
</span>
)}
</div>
);
}
);

export const getDateTimeFormat = (
dateDisplayFormat,
Expand Down Expand Up @@ -92,6 +118,8 @@ export const Datepicker = function Datepicker({
}) {
const [date, setDate] = React.useState(null);
const [excludedDates, setExcludedDates] = React.useState([]);
const [isDateInputFocussed, setIsDateInputFocussed] = React.useState(false);
const [dateInputValue, setDateInputValue] = React.useState('');
const pickerRef = React.useRef();

const handleDateChange = (date) => {
Expand Down Expand Up @@ -122,6 +150,11 @@ export const Datepicker = function Datepicker({
}
};

const handleInputDateChange = (value) => {
const inputDate = moment(value, parseDateFormat).toDate();
handleDateChange(inputDate);
};

useEffect(() => {
const date = getDate({
value,
Expand Down Expand Up @@ -204,11 +237,22 @@ export const Datepicker = function Datepicker({
'theme-dark dark-theme': darkMode,
})}
selected={date}
onChange={(date) => handleDateChange(date)}
value={computeDateString(date)}
onChange={(date) => {
setIsDateInputFocussed(false);
handleDateChange(date);
}}
value={isDateInputFocussed ? dateInputValue : computeDateString(date)}
dateFormat={dateDisplayFormat}
customInput={
<TjDatepicker dateInputRef={dateInputRef} readOnly={readOnly} styles={{ color: cellStyles.color }} />
<TjDatepicker
dateInputRef={dateInputRef}
readOnly={readOnly}
styles={{ color: cellStyles.color }}
onInputDateChange={handleInputDateChange}
setIsDateInputFocussed={setIsDateInputFocussed}
setDateInputValue={setDateInputValue}
isDateInputFocussed={isDateInputFocussed}
/>
}
showTimeSelect={isTimeChecked}
showTimeSelectOnly={!isDateSelectionEnabled && isTimeChecked}
Expand Down