React-Horizontal-Timeline requires input date as YYY-MM-DD but I only want to display YYYY
Based on the docs, it looks like you need to provide a sorted list of dates in yyyy-mm-dd format. Then you write a getLabel function that React-Horizontal-Timeline can use to derive the label from those dates.
<HorizontalTimeline
values=['1984-10-10', '1985-11-10', '1986-10-10']
getLabel={function(date) { return date.slice(0, 4); }}
...remaining props
/>
Here I am using the .slice method to extract yyyy from yyyy-mm-dd.
Related
I have tried to change the value of selection in angular material date picker to YYYY-MM-DD format as follows:
In dateInput event of the field I call a function which will change the format of date using date pipe and set value back. However, the format doesnt change.
HTML Code
<input matInput placeholder="Stop Date" [matDatepicker]="stopDate" (dateInput)="OnStopDate($event.value)" formControlName="stopDate">
<mat-datepicker-toggle matSuffix [for]="stopDate"></mat-datepicker-toggle>
<mat-datepicker #stopDate></mat-datepicker>`
TS Code
`OnStopDate(Value){
const update= this.datepipe.transform(Value, 'YYYY-MM-dd'); //this value is being update
this.myForm.controls.stopDate.setValue(update,{emitEvent: false}); // the value is not being set in yyyy-mm-dd but in mm-dd-yyyy
}
I did see a solution provided using MomentDateAdapter as here. Is this the only solution proceed and why ?
I have a calendar on my ionic app and there is an API that brings me events from database.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://portalemme2.com.br/SaoJoseAPI/agenda', true);
this.http.get('http://portalemme2.com.br/SaoJoseAPI/agenda').map(res => res.json()).subscribe(vetor => {
this.eventos = vetor.eventos;
});
How can I change the date format to appear on calendar?
Every event has an date like '2018-01-01' and an hour like '01:00:00.0000000' (from database)
But the calendar from ionic only accepts date in this format '2017-12-16 01:00:00'
I need to transform all dates to push in "this.eventos" array.
You can use moment.js, an excellent and easy to use library to manipulate dates. You should use data returned from the server to construct a Moment object pasing them to the moment() function and then, use format method to convert date to the format required by Calendar. In your case, to convert to these format, you should pass to format method something like "YYYY-MM-DD HH:MM:SS".
I have just started using the react-day-picker library. I have the following code sandBox which is a fork of the range with 2 inputs example,
https://codesandbox.io/s/w6vnlox29l
I have it working the way I want but I want to input the dates as MM/DD/YYYY instead of the default format, YYYY-MM-DD. When I add the following attributes
<DayPickerInput
value={from}
format="M/D/YYYY"
formatDate={formatDate}
parseDate={parseDate}
placeholder="MM/DD/YYYY"
onDayChange={this.handleFromChange}
dayPickerProps={{
selectedDays: [from, { from, to }],
modifiers,
disabledDays: {
after: new Date(),
},
numberOfMonths: 2,
toMonth: new Date(),
}}
/>
I can no longer correctly enter the date in the input field the date. When I remove the format, formatDate and parseDate attributes the date picker input functions the way I expected. I have read the documentation but think I may be missing something simple. How can I use the input text box and date picker with dates formatted as MM/DD/YYYY?
I had the following code where i get the data from JSON response. I want to change the date string format w.r.t to country locale. I'm using angular-translate for translations and added all the strings in respective locale json file. For example i want to add the date format (dd/mm/year) for es_ES(spanish) locale and (mm/dd/year) for en_US. Can i add the date format by any chance in the Json file or how can i add a filter to format in markup itself? Is it possible at all?
//Sample Html markup
<tr ng-repeat="data in data.list">
<td>{{data.originalDate}}</td>
<td>{{data.expiryDate}}</td>
</tr>
//sampleJsonResponse
{
"data": [
"{originalDate:\"09/30/2017\",expiryDate:\"10/30/2018\"}"
]
}
Thanks
You can use just javascript to transform date to different locale:
first you will need to create date object with (new Date(yourdate)):
let date = new Date('10/30/2018');
then set date to specific locale use dash instead of underscore
date.toLocaleString('es-ES')
for your purposes you can just do:
new Date(data[0].originalDate).toLocaleString('es-ES')
new Date(data[0].expiryDate).toLocaleString('es-ES')
or do a map on entire data like this:
data.map(value => {
return {
originalDate: new Date(value.originalDate).toLocaleString('es-ES'),
expiryDate: new Date(value.expiryDate).toLocaleString('es-ES')
}
});
More info here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
For all other advanced date manipulation I would suggest momentJS: https://momentjs.com/
I'm using sugar.js javascript library for date formatting and also it has other general functions such as number and string formatting which serves well in my code base.
I'm trying to display a properly formatted date in a Datatable column. I'm using MomentJS to detect and format the cell properly, as it comes as a yyyyMMdd (i.e. 20051201) string from the database:
columns: [
{
data: "fechaPago",
"render": function(data){
return (moment(data).isValid()) ? moment(data).format("DD/MM/YYYY") : "-";
}
},
]
Which works exactly as expected:
Now, I'm struggling to implement a more flexible approach, and let the current locale determine the format. We have 3 available languages in our webapp, and I want the Datatable to detect the current language and change the format (from dd/MM/yyyy to MM/dd/yyyy, if it's in English).
I have tried to use 'LLLL' as the format, but it returns the whole date with letters, and I can't figure out how to modify it.
You can use moment locale(String) function to set locale for a moment oblect or moment.locale(String) to set moment locale globally.
To get localized day, month and year use L token in the format().
Your code will be like the following:
columns: [
{
data: "fechaPago",
"render": function(data){
var locale = // get current locale code
return (moment(data).isValid()) ? moment(data).locale(locale).format("L") : "-";
}
},
]
Remember to use moment-with-locales.js (or import required locales).