Develop Reference

dynamic datePicker in material ui Reactjs

I have a problem, I can not make actual dates in the datepicker. I have an array of date strings in a state. I only need to put these dates in the datepicker so that only these dates are available for clicking, how can I do this please?
Array of dates:
Data
An example of how I want to do:
Example of Calendar
I have a default datePicker from MUI https://codesandbox.io/s/v0xqj0?file=/demo.js
Here is how it looks
I tried to use google, tried through renderday, but so far it did not work.
The maximum that happened is, it's funny))
My result

You can use the props "shouldDisableDate" to disable certain dates and pass a function that will return true if the value is not in your array of dates.
You have an example in the documentation here: https://mui.com/x/react-date-pickers/date-picker/
I forked your codesandbox here is what you could do: https://codesandbox.io/s/hardcore-yonath-kvk59t?file=/demo.js:917-921

Maybe this will come in handy for someone...
the parameter in the DesktopDatePicker helped me -
shouldDisableDate={getData}
and in it
const getData = (data) => {
dates.map((value) => {
some action...
})
}

how to automatically get date in specific format from DatePicker?

I'm using the component DatePicker from antd.
I have currently a Form from antd, in which there's a Form.Item, in which I put the DatePicker.
I want the Form.Item to be given the date in a specific format, lets say YYYY-MM-DD, is there a way to do that?
by giving it the prop format I can choose how it will look like in the UI but I'm trying to make it send back the value by the same format.
I've tried giving it a dateFormat prop with the function
function dateFormat(date) {
return moment(date).format("YYYY/MM/DD");
}
but it doesn't work.
is there a way to do this manipulating the data in the onChange function?

so apparently there's no way to do it in the props,
I've checked and so has #MoaazBhnas.
If anyone somehow finds a way, I'll be looking forward to hear!

How to render Date Object in React Redux?

I am working on a booking app in learning purposes. I'm using React, Redux and React DatePicker.
Basically, everything works well, except for passing the Date object as a prop. It throws an error message:
Error: Objects are not valid as a React child (found: Sat Nov 09 2019 16:09:32 GMT+0500 (Yekaterinburg Standard Time)). If you meant to render a collection of children, use an array instead.
I know that React can't render objects, so I tried to use "toString()" method in reducer but it didn't help. I guess I should use this method in DatePicker but I don't know how.
<DatePicker
selected={this.props.date}
dateFormat="LLL"
onChange={(day) => {this.props.setDate(day)}}
locale="ru"
inline
/>
Tell me, please, where do I need to add toString() method, so that when I select a date in the calendar, the Date object is a string and my application works fine.

The best way to turn your date object into a string is going to depend on what information you want to display. Try .toLocaleDateString() to get a string that's formatted to the way dates are commonly written in the user's custom.
Check out MDN's Date documentation for more options (you'll probably want one listed under the 'conversion getter' section)
For how to integrate this into React, you don't need to do the conversion in your reducer. Redux can store date objects just fine, then you can call the conversion method of choice inside your component.
Imagine, for instance, a todo item component which takes in a Date object as a prop. This object, in your case, would come from redux.
const TodoItem = ({ task, dueDate }) => (
<div>
<h2>{task}</h2>
<span>{dueDate.toLocaleDateString()}</span>
</div>
);
The other option would be to call .toLocaleDateString() inside of your mapStateToProps function

Saving moments to use as events in React-Big-Calendar

I'm having trouble generating events for react big calendar. When making a new event object (in another component), I set the id, event name, just fine, and then I wonder if I'm setting start and end correctly. I'll have a moment like this (created with moment.js) date = 05/15/2018 11:00 AM, and when setting the start/end fields of an event I will set them as new Date(date). For now I am saving this value in local storage, but it eventually will go to a database. I checked, and when I create a constant at the top of my component with my moments, and the new Date() syntax explicitly in the code it works fine, but my pre-made saved dates are not working. I am getting the following error.
index.js:209 Uncaught TypeError: date[("get" + method)] is not a function
at Object.hours (index.js:209)
at Object.isJustDate (dates.js:91)
at TimeGrid.js:237
My question is how should I go about saving my moment so that it can be correctly interpreted by react big calendar?

I answered my own question, Store `new Date ()` in JSON object
You can't store a Date as a Date in JSON, you have to convert it, so I will do so.

Ember.js - ember-pikaday not allowing preset date

I am trying to create a datepicker in ember.js using the ember-pikaday addon. The datepicker should have a date in it when it is displayed. So, I added the following code to my template:
{{pikaday-input value=rental.date format="MMMM Do YYYY" yearRange="2016" useUtc=true}}
However, even though I specify the value as rental.date, the input is blank. I know that the value of rental.date is not null because when I set the placeholder to rental.date, the placeholder's date is correct.

The problem with your case is due to the fact that you are passing a momentjs object to ember-pikaday directly. Instead of passing the momentjs object directly just create a computed property called as follows on your owner component:
rentalDate:Ember.computed('rental.date', function() {
return this.get('rental.date').toDate();
}),
and perform binding to rentalDate. ember-pikaday does not handle momentjs object passed in by itself, just extract the actual javascript date object via toDate() as shown in code snippet above. Just for clarification you can also pass formatted string to ember-pikaday such as "25/05/2016", "2016.05.25", etc. It will also handle such string values properly.