An easily internationalizable, mobile-friendly datepicker library for the web developed by Airbnb.
An easily internationalizable, mobile-friendly datepicker library for the web developed by Airbnb.
Questions tagged [react-dates]
155 questions
0
votes
3 answers
What does type Props mean in react and typescript when used with Omit?
I am new to using typescript and react-dates package.
I am not sure what the below type means
type Props = Omit<
DayPickerRangeControllerShape,
| 'numberOfMonths'
| 'focusedInput'
| 'onFocusChange'
| 'hideKeyboardShortcutsPanel'
…
saritha
- 619
- 2
- 12
- 25
0
votes
1 answer
Display when order will be delivered & disable days deliveries can't be made in react-datepicker
I need some help displaying the next available day for delivery based on when a user places an order and what day/s they are eligible to receive an order.
I also need some help disabling/filtering all week days except the delivery day and future…
Chizzah
- 5
- 2
0
votes
1 answer
How to add multiple blocked dates color in airbnb calendar?
How can i add multiple blocked dates color in Reactjs airbnb calendar api?
ex:
Red = special holiday
Grey = unavailable
blue = special non-working holiday
tmcrz
- 1
0
votes
1 answer
Why is my React Dates component not working?
Can't seem to work out how to fix React Dates without breaking something different each time
I have this:
const [startDate, setStartDate] = useState(moment().subtract(2, 'year'))
const [endDate, setEndDate] = useState(null)
const [focusedInput,…
Red Baron
- 7,181
- 10
- 39
- 86
0
votes
1 answer
How to implement react-dates css in css-modules?
so react-dates css worked fine until i moved to css-modules. i tried importing the css file from node modules in index.js files and in the head of the html file but none of them worked.
Any help or suggestion will be greatly appreciated.
punit das
- 119
- 3
- 9
0
votes
1 answer
React-dates: Styling question to override inline styling
I want to make styling changes to react-dates, DateRangePicker.
I want to be able to give paddingBottom and on right as highlighted.
If I see in dev tools it shows me style is given inline so I cannot even override this change
some guidance is…
newdeveloper
- 1,401
- 3
- 17
- 43
0
votes
1 answer
How to prevent react-dates SingleDatePicker to open on focus?
I'm using react-dates SingleDatePicker. The visibility of the calendar is controlled by the focused prop. When using tabs on the website, I don't want the calendar to open, I want it to open on enter key. Is there a way to achieve this? Thanks!
Aysun Sulun Tas
- 21
- 2
0
votes
1 answer
Clearing input within React Component from a parent or grandparent Component
I'm have a filter form within my app that has normal input fields as well as a date range input (AirBnb's react-dates plugin). On submitting the filter form, I'd like the form to clear all fields. However, I haven't been able to find a way to access…
mg2019
- 191
- 17
0
votes
1 answer
Is there a better alternative to componentDidUpdate for getting the selected date from a date picker and sending that in API?
I'm using react-dates for a datepicker that when the user changes the date it updates a prop and that is sent to the backend to be run as a parameter in a query to get specific results for that day from the database. It looks like this:
class…
user12391758
0
votes
2 answers
How to get state to update based on an update to props?
I have a component that looks like:
class Table extends Component {
constructor(props) {
super(props);
this.columnDefs = columnDefs;
this.state = {
isLoading: true,
showTimeoutModal: false,
tableData: [],
…
user12391758
0
votes
3 answers
Having trouble invoking method in child that is passed as prop from parent
I have found a bunch of questions that seem like duplicates but I cannot seem to fix this issue I am having. I have a parent component:
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
//some other props
…
user12391758
0
votes
1 answer
Why won't this function work when the same logic works outside of the function?
Apologies if this seems low effort but I have spent all day googling. I am trying to change the state of a date when a selection is made using the date picker. I am able to get this functionality to work by doing:
onDateChange={currentDate =>…
user12391758
0
votes
0 answers
How can I reduce the size of a React bundle JS file?
My react-dates component is working, but my bundle JS file is 600kb. All I need is the DateRangePicker component and nothing more. Is it possible for me to edit the code and/or compress the bundle js file to make it smaller?
I have tried a few…
jake
- 1
- 1
0
votes
2 answers
Using moment.locale('de') on react dates to show german translation but receiving below unexpected output
Using moment.locale('de') under render method on react dates to show german translation but receiving below unexpected output but on refreshing, again and again, it renders right translations
Mayank_VK
- 19
- 1
- 5
0
votes
1 answer
How do I add airbnb react-dates to my HTML page?
I would like to have the airbnb react-dates SingleDatePicker or DateRangePicker appear on my html page. What do I need to add to my html page to get this to function correctly? Which files do I need from the airbnb react-dates?
I am a designer with…
user1234
- 1
- 1