IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DatePicker: able to set minimum date that can be selected (#49503)

Browse Source
This commit is contained in:
Alexander Zobnin 2022-05-24 17:43:09 +03:00 committed by GitHub
parent 8166d7dc4d
commit d373beeb73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
View File

@ -15,6 +15,7 @@ export interface DatePickerProps {
onClose: () => void;
onChange: (value: Date) => void;
value?: Date;
minDate?: Date;
}
/** @public */
@ -37,7 +38,7 @@ export const DatePicker = memo<DatePickerProps>((props) => {
DatePicker.displayName = 'DatePicker';
const Body = memo<DatePickerProps>(({ value, onChange }) => {
const Body = memo<DatePickerProps>(({ value, minDate, onChange }) => {
const styles = useStyles2(getBodyStyles);
return (
@ -45,6 +46,7 @@ const Body = memo<DatePickerProps>(({ value, onChange }) => {
className={styles.body}
tileClassName={styles.title}
value={value || new Date()}
minDate={minDate}
nextLabel={<Icon name="angle-right" />}
prevLabel={<Icon name="angle-left" />}
onChange={(ev: Date | Date[]) => {
@ -68,6 +70,10 @@ export const getStyles = (theme: GrafanaTheme2) => {
background-color: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.weak};
border-radius: 2px 0 0 2px;
button:disabled {
color: ${theme.colors.text.disabled};
}
`,
};
};

3
packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
View File

@ -12,6 +12,7 @@ export const formatDate = (date: Date | string) => dateTime(date).format('L');
/** @public */
export interface DatePickerWithInputProps extends Omit<InputProps, 'ref' | 'value' | 'onChange'> {
value?: Date | string;
minDate?: Date;
onChange: (value: Date | string) => void;
/** Hide the calendar when date is selected */
closeOnSelect?: boolean;
@ -21,6 +22,7 @@ export interface DatePickerWithInputProps extends Omit<InputProps, 'ref' | 'valu
/** @public */
export const DatePickerWithInput = ({
value,
minDate,
onChange,
closeOnSelect,
placeholder = 'Date',
@ -49,6 +51,7 @@ export const DatePickerWithInput = ({
<DatePicker
isOpen={open}
value={value && typeof value !== 'string' ? value : dateTime().toDate()}
minDate={minDate}
onChange={(ev) => {
onChange(ev);
if (closeOnSelect) {