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!
Related
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...
})
}
I am using a native HTML Date input component like below in Angular -
<input #dateField id="dateField" type="date">
#ViewChild("dateField") el: ElementRef;
onClick() {
console.log(this.el.nativeElement.shadowRoot);
}
It rendered the date based on the operating system locale of the user like below -
However, whenever I try to access the value from this field, it always returns the value in 'yyyy-mm-dd' format.
I want to access the actual string value which is getting displayed on the UI as per user locale like '16-Sep-2021'. Is there any way to achieve this? I have tried properties such as innerHTML, textContent, innerText, outerText but none of them is returning the actual displayed value.
Also, is it possible to access the locale information in which it is showing this date value? Even if the default placeholder text -
I am also not able to access the shadowRoot property on this element, it always returns me null.
Also, this is not specific with Angular, even if normal Javascript it gives same result.
There is no way to achieve what you're looking for. You can only retrieve the value in one of the following formats:
value will return the date in yyyy-mm-dd.
valueAsNumber will return the date in timestap
valueAsDate will return the date in JavaScript Date format.
In angular you can use,
fromDate
package to convert date into output like you wanted, here is the snippet just copy and paste at required place and you will be able to see the date format you wanted:
//add this
import { formatDate } from "#angular/common";
//format it
const format = 'dd/MM/yyyy';
const myDate = '2019-sep-16';
const locale = 'en-US';
const formattedDate = formatDate(myDate, format, locale);
console.log(formattedDate)//16/09/2019
Hope this will help :-p
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 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.