Comments (3)
@SSmJaE , hi, thanks for the issue.
I think I do not get it at all. The date picker is controlled by the design 🤷♂️
In all examples from README you can see these lines 👇
const [selectedDates, onDatesChange] = useState<Date[]>([]);
const dpState = useDatePickerState({
selectedDates,
onDatesChange,
dates: { toggle: true, mode: 'multiple' },
});
You don't need to create a local state and then call onChange
Just make sure that the value is an array of dates and that onChange accepts an array of dates.
If you need to make a date transformation to the dayjs
you can make it in the parent component before submission.
The example above should look like this:
export function DateRangePicker({
value,
onChange,
}: {
value: Date[];
onChange: (value: Date[]) => void;
}) {
const {
data: { weekDays, calendars },
propGetters: { dayButton, previousMonthButton, nextMonthButton },
} = useDatePicker({
dates: {
mode: "range",
},
selectedDates: value,
onDatesChange: onChange,
});
return (COMPONENT GOES HERE);
}
Everything else in your code is redundant! 😉
from datepicker.
@Feshchenko thanks for quick response
actually, i have tried what you mentioned earlier
onDatesChange
has a problem that, whenever a dayButton
is click, it will trigger this callback
so if I log like this
onDatesChange : (value) => {
console.log({
valueInPicker: value,
});
}
it will output
{
valueInPicker : [ Date() ] // not [ Date(), Date() ]
}
what i want is, the prop onChange
callback to only fire when the range selection is done
I haven't found a related explantion in the readme, maybe there is a better way to achieve this?
from datepicker.
@SSmJaE yes, you are right.
You need to check it manually, for example inside onDateChange which you are passing as a prop.
Actually, this is an implementation detail.
const [selectedDates, setDates] = useState<Date[]>([]);
const onChange = () => {
console.log('Send me to the BE');
}
const onDateChange = (dates: Date[]) => {
setDates(dates);
if(dates.length === 2) onChange(dates);
}
We have the Discord for live help. I'm trying to answer and help as soon as I can :)
from datepicker.
Related Issues (20)
- Why not aria-select=true on the selected dates? HOT 4
- WeekPicker HOT 3
- Key values are invalid in example HOT 3
- Accessibility HOT 3
- Default selected time is outside of the enabled range HOT 1
- Keep the time when selecting a different day HOT 1
- useTime Performance HOT 4
- Features Missing according to documentation. Please update documentation and examples. HOT 2
- nextMonthButton and previousMonthButton are missing from prop getters HOT 2
- Start of Years HOT 5
- How to change years independently for only one calendar HOT 2
- Problem with maxDate and month view HOT 2
- Contributing HOT 1
- Add Keyboard navigation. HOT 2
- Selecting time with set_focus_date HOT 5
- Limiting the choice of months by minDate HOT 1
- Date Range Issues HOT 7
- Give an option to set start date as empty as well HOT 2
- Strange behavior of the time picker (time duplication) when you select March 31 and then March 30 HOT 1
- Documentation error HOT 1
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 datepicker.