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...
})
}
Related
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!
I am using react datepicker in my react component. I have to show dates highlighted which are coming from api. I am getting the array of dates from api like below:
["2019-01-03T18:30:00.000Z","2019-01-03T18:30:00.000Z"]
I am mapping above array and using subDays function inside the map function to create the array of dates and pass it to highlightDates property inside datepicker. But it is giving me subDays is undefined error.
Can anyone please tell me, How can i highlight the dates coming from api in react datepicker?
Just need to make a new array of dates coming from the api and pass that array to the highlighDates array like below:
<DatePicker
className="form-control"
selected={this.state.dateFilter}
onChange={this.handleDateFilterChange}
dateFormat="dd-MMMM-yyyy"
highlightDates={this.state.highlightWithRanges}
/>
this.state.highlighWithRanges is my new array and i passed it to highlightDates property
First, for people wondering, I'm referring to this DatePicker
https://danielykpan.github.io/date-time-picker/#locale-formats
While the DatePicker feels and looks great, I have an issue with the outputting values. There are numerous options to format the view-part of a date, but I haven't seen or found examples or explanations on how I can switch the outputted ISO-8601 (2018-08-29T00:00:00.000Z) standard in my form. I'm using the datepicker in a reactive form and I have several pages with a similar prerequisite. I need to parse this value into a different format. For example...
29-08-2018
My first attempt - which wasn't too smart to begin with - was using [(ngModel)]="dateField" to grab the value that is inputted and change it into a value that I wanted to. Needless to say, of course it was changed in the view as well and since I didn't refer to index of the form field it merely caused a blank field. Shortly after I realized that the approach was poor to begin with, but since I can't find configurations for this particular problem I'm pretty lost as to what I can do.
#ak.leimrey. Normally all the datepicker give you a value of one type (in your case a string format in ISO, other case, e.g. using ng-bootstrap, return an object with day,month and year). if you want to send in other format, in the submit you can map the values and convert the form.value.
submit(form)
{
if (form.valid)
{
let result={
...form.value, //all the values of the form, but change some one
searchParams:form.value.searchParams.map(x=>{
...x
value.map(v=>{
let items=v.split('-');
return items[2].substr(0,2)+"-"+items[1]+"-"+items[0];
})
})
}
console.log(result)
}
}
Yes in your case transform the object is some hard but see as using the spread operator and map you can transform the value
use moment js libaray . its a simple and rich library that can help u ;
u can get it via npm : npm i moment .
then u can convert formats like this :
moment("2018-08-29","YYYY-MM-DD").format("YYYY-DD-MM"); // outputs : 2018-29-08
or
moment("2018-08-29","YYYY-MM-DD").format("DD-MM-YYYY"); // outputs : 29-08-2018
I'm working on a project in which I need to implement a list of dates. I have been able to pull the data from the api, however I have been having troubles parsing the format within these dates.
The data that I have been able to pull looks similar to this
[["2015-10-05T13:00:00Z","2015-10-05T21:00:00Z"],
["2015-10-06T13:00:00Z","2015-10-06T21:00:00Z"],
["2015-10-07T13:00:00Z","2015-10-07T21:00:00Z"]]
Which is sweet that i've been able to pull.....but as you can see, the dates are not really what a user will need.
I've been looking into moment() methods. (http://momentjs.com/) However the problems that i've run into is that the methods that you can use with moment() is that i've only been able to make anything work with one date, not with an array of dates such as what i have.
So my question is, are there any alternatives to moment(), or better ways of parsing an array of dates?
You'd have to loop and parse.. you can do it fairly simply with a .map call (with momentjs):
var formattedDates = array.map(function(inner) {
return inner.map(function(d) {
return moment(d).format("MM/DD/YYYY hh:mm A");
});
}).reduce(function(p, c) {
return p.concat(c);
});
Demo: http://jsfiddle.net/6ncpspc0/
How to make a custom function to order?
I made this plunker, and noticed that I get an element at a time, which prevents me from ordering the elements of an array. Any idea?
I got to see these two issues, but none helped:
angularjs custom sort function in ng-repeat e AngularJS: Custom Sorting Function using OrderBy
You need to return a value from your function that will be compared against the other values.
For example, it looks like in your plunkr you want to sort by birthday.
You might accomplish this with a function like so:
$scope.customSortFunc = function(person) {
return new Date(person.birthday);
};
Keeping in mind that different browsers support parsing different date formats so ideally you'd use something like momentjs.
Example Plunkr