Comments (9)
This should be possible when you follow the layout docs section.
With this you can customize how the elements are placed and even add your proprietary elements to it. It should be possible to add a DateRangeField
component as well.
All of it should be controlled by a single state so that changes are reflected on each part of the layout.
from mui-x.
@michelengelen , could you please be more specific (looks like a polite RTFM, we have a paying support) ?
from mui-x.
Sure thing.
I have built a quick example of what I wanted to showcase.
With the custom layout you can basically juggle around the elements, or even build your own that you can then render at specific places around that layout.
Here is the example: Custom Layout
This is purely a showcase and is far from perfect in terms of styling, etc.
from mui-x.
anything to add here @LukasTy?
from mui-x.
@michelengelen , our question is how to get the information when the calendar is closed of the shortcut used in the fields
from mui-x.
@michelengelen , our question is how to get the information when the calendar is closed of the shortcut used in the fields
OK, what do you mean by that? 🤷🏼
If you want to know the span from the range value you can either calculate that or store it together with the range when you click on one of the shortcuts.
from mui-x.
@michelengelen , the question is how to add the shortcut information in the date range field, not in the date range calendar
hope it helps
from mui-x.
@david-ic3 yes, that helps.
The initial description was misleading.
So, there are still a few different ways to do this.
To be fully independent to the shortcuts you can just calc the diff yourself, like this:
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRange } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import InputAdornment from '@mui/material/InputAdornment';
import Chip from '@mui/material/Chip';
export default function DateRangeFieldValue() {
const [value, setValue] = React.useState<DateRange<Dayjs>>(() => [
dayjs().subtract(7, 'day'),
dayjs(),
]);
const getShortcutLabel = () => {
// do the calc to define the label here
const today = dayjs();
const isStartToday = value[0]?.isSame(today, 'day');
const isEndToday = value[1]?.isSame(today, 'day');
const daysDiff = value[0]?.diff(value[1], 'day');
console.log('daysdiff', daysDiff);
switch (true) {
case isEndToday && daysDiff === -7:
return 'Last 7 days';
case isStartToday && daysDiff === 7:
return 'Next 7 days';
}
};
const ShortcutAdornment = () => {
const label = getShortcutLabel();
console.log('label', label);
if (!label) return null;
return (
<InputAdornment position="start">
<Chip size="small" label={label} />
</InputAdornment>
);
};
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['SingleInputDateRangeField']}>
<SingleInputDateRangeField
label="Controlled field"
value={value}
onChange={(newValue) => setValue(newValue)}
slotProps={{
textField: {
InputProps: {
startAdornment: <ShortcutAdornment />,
},
},
}}
/>
</DemoContainer>
</LocalizationProvider>
);
}
Or, if you want to use the shortcuts and only show it when you clicked one of those, you can store the shortcut value and label in a wrapper around the DateRangePicker
, customize it with the previous example and make it controlled, so that the value has a single place to live in.
Hope that helps.
from mui-x.
The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.
from mui-x.
Related Issues (20)
- [pickers] Allow to refuse ranges that contains at least one disabled date HOT 5
- Move focus up after an edit when shift enter is pressed
- [pickers] Enhancing User Experience: Introducing Month and Year Selection in Date-Pickers HOT 5
- [TreeView][ESM] package exports are incorrect HOT 4
- Make Loading overlay states change based on data HOT 6
- [pickers] Ensuring Comprehensive Validation for Date and DateTime Range Fields HOT 2
- [charts] Axis min/max does not allow dynamic rescaling of the other Axis when that axis has no min/max set HOT 5
- [pickers] Ineffective Date and Time Validation Despite minTime, maxTime, and disableIgnoringDatePartForTimeValidation Settings HOT 2
- [data grid] Dynamic Aggregation Position HOT 7
- [How to get column widths exact on resize within detail panel based on Data Grid columns] HOT 2
- [data grid] Is it possible to have tree data row children open and under that details panel? HOT 9
- [data grid] Same column in different column groups HOT 8
- ThemeProvider not provide Translation keys. HOT 2
- [Data Grid Premium - Cell Copy and paste] Copied content from cell doesnt mantain the sorting set in the data premium grid HOT 3
- [data grid] Copy and Paste content from cell selection doesn't maintain the sorting set HOT 3
- [charts] labels are incorrect in RTL HOT 3
- [data grid] New DataGrid header style not properly passed to header HOT 4
- [data grid] Pressing `Delete` key in a Boolean type cell, the value incorrectly resets to empty string HOT 6
- [data grid premium] Copy and Paste content from cell selection doesnt mantain the sorting set HOT 2
- [data grid] Copy and Paste content from cell selection doesnt mantain the sorting set HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.