I'm using XYPlot with xType={'time'} and Russian locale as described in documentation, is there a way to pass 24h time format to d3-scale?
Instead of "03 AM" I need something like "03:00".
Russian locale from d3-time-format has time defined as %H, which should be 24 hours :
{
"dateTime": "%A, %e %B %Y г. %X",
"date": "%d.%m.%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
// ... some other options
}
Unfortunately the setting doesn't affect scale behaviour.
So, according to the link you provided at the end of the web page, you can notice configuration in another locale. You can tweak its time a bit to achieve what you need:
import {timeFormatDefaultLocale} from 'd3-time-format';
timeFormatDefaultLocale({
dateTime : '%a %b %e %X %Y',
date : '%d/%m/%Y',
time : '%H%H:%m%m:%s%s',
periods : ['AM', 'PM'],
days : ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
shortDays : ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
months : ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Decembre'],
shortMonths : ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jui', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec']
});
You can find date formats here: Javascript Date Format
You can use something like this using Moment.js:
<XAxis
tickFormat={(v) => ${moment(v).format("h:mm a")}}
/>
Related
export const lastUpdated = createSelector(
learningDetails,
ld =>
{
(ld.lastModifiedDate) &&
Intl.DateTimeFormat('th-TH', {
month: '2-digit',
day: '2-digit',
year: 'numeric',
}).format(new Date(ld.lastModifiedDate))
}
);//returns >> 3107-05-21
Above is a function where the last update date is being picked up, since the ld.lastModifiedDate received from service is already in Thai time-zone by formatting the date value, it again gets converted.
For eg.:
Original date : 2021-05-21 in UTC
Converted on the the service layer to Thai time-zone to 2564-05-21 i.e. 543 years ahead (as Thai culture follows Buddhist calendar).
Service returns & populates ld.lastModifiedDate to 2564-05-21 which then gets formatted using Intl.DateTimeFormat as per culture this leads to bump up of the year again by 543 years. (2021+543+543) which is incorrect. Is there a dynamic way to avoid the second time conversion for all cultures irrespectively along with formatting.
Note: We can't change the legacy service layer to return UTC/original date as it is being invoked by other internal functions.
Got the solution from : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
Basically, by appending '-u-ca-gregory' to the culture solves the issue.
Default considering Gregorian calendar.
export const lastUpdated = createSelector(
learningDetails,
ld =>
{
(ld.lastModifiedDate) &&
Intl.DateTimeFormat('th-TH-u-ca-gregory', {
month: '2-digit',
day: '2-digit',
year: 'numeric',
}).format(new Date(ld.lastModifiedDate))
}
);//returns >> 2564-05-21
When I tried to convert 2020-12-14 to 14 Dec 2020 by using
1st Method
<small>{item.date}</small>
2nd Method
{new Date(item.date).toLocaleString()}
then I got below output
2020-12-14
12/14/2020, 5:30:00 AM
Is there any way to convert the date format from 2020-12-14 to 14 Dec 2020.? in reactjs
A small modification to this elegant answer by Dave splits the toString date string into an array and formats it into the result you want. Check the code below:
const date = new Date(2020, 11, 14).toString().split(" ");
// ["Mon", "Dec", "14", "2020", "14:05:53", "GMT+0100", "(Central", "European", "Standard", "Time)"]
console.log(date[2] + " " + date[1] + " " + date[3]);
// 14 Dec 2020
using moment package
moment(moment('2020-11-18', 'YYYY-MM-DD')).format('DD MMM YYYY');
Beginner with ReactJS, I use now the wonderful ReactJS Datepicker. Questions about my custom date format :
i found no doc to explain all the possibilities like M is month, MM is month on 2 letters, etc. (shall I look to the github code? which source?)
How to add the name of the day... like Saturday. I tried dddd but it shows the number of the day with 2 leading 0 before !!
How to exclude the non office hour (like hours 0 to 8 and 20 to 23), I tried the excludesTimes below but no way.
Here is my code :
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
locale={fr}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={60}
dateFormat="dddd, DDD, ddd, d, dd MMMM yyyy à HH'h'mm"
timeCaption="Heure"
minDate={new Date()}
showDisabledMonthNavigation
placeholderText="Choisir ici ..."
excludeTimes={[0, 1, 2, 3, 4]}
/>
Date shown in input field is then :
0023, 082, 023, 23, 23 mars 2019 à 20h00
Thanks
React datepicker uses Moment.js for dates, I think you should review the docs at his website.
For example MMMM Do YYYY, h:mm:ss a should return a date formated as March 21st 2019, 8:50:37 am.
EDIT
I went to the repo and it appears the author removed moment from package, so I gave a try to the formatting dates guide found here and it appears to be working now! Per example use "eeee" if you want day of the week.
I made a working example at codesandbox.
You also can convert manually ...
const convertDate = str => {
str = str.toString();
let parts = str.split(" ");
let months = {
Jan: "01",
Feb: "02",
Mar: "03",
Apr: "04",
May: "05",
Jun: "06",
Jul: "07",
Aug: "08",
Sep: "09",
Oct: "10",
Nov: "11",
Dec: "12"
};
return parts[3] + "-" + months[parts[1]] + "-" + parts[2];
};
:) Reinventing the wheel
I have a JSON data in the below format and want to display the startDateTime in human readable format.
var txns = {
"payeeAccNum": "12081031991",
"startDateTime": "2018-11-13T20:47:47.866"
}
I have done in the following way, but it always showing time as 12:00:00 AM only. can any one help on this?
<span [innerHTML]="(txns.startDateTime | date:'d MMM yyyy h:mm:ss a')"></span>
Using the date filter you can format your date/time to any format you need to:
'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)
'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10
12:05 PM)
'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale
(e.g. Friday, September 3, 2010)
'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g.
12:05:08 PM)
'shortTime': equivalent to 'h:mm a' for en_US locale
(e.g. 12:05 PM)
Now what format do you want your time to be displayed in?
for Medium display, use:
<span [innerHTML]="(txns.startDateTime | date:'medium')"></span>
and it's better if you use [innerText] in stead of HTML for span contents.
to get something like medium date without seconds use 'MMM d, y h:mm a'
Dateoffset filter:
transform(value: any, format = 'MM/dd/yyyy'): string {
let formattedDt: string;
if (value) {
if (DateUtil.DATE_TIMEZONE_REGEX.test(value)) {
value = this.removeTimezone(value);
}
formattedDt = this.datePipe.transform(new Date(value), format);
}
return formattedDt;
}
private removeTimezone(value: any): string {
const timezoneDashIndex = value.lastIndexOf('-');
return value.slice(0, timezoneDashIndex);
}
consider using moment.js library for datatime conversions
visit momentjs.com
for your code this is the solution:
var requiredDateFormat= moment(tsnx.startDateTime).format('MM-DD-YYYY')
sorry for the noob question but is it possible to change the date format in date picker?
I have searched in google but the only thing I see is either I change the CultureInfo or set the StringFormat.
I tried binding the StringFormat but I realized that it is not a DP.
So is it possible to change date format? Let's say:
Formats in database:
mm/dd/yyyy
dd/mm/yyyy
yyyy/dd/mm
yyyy/mm/dd
...(etc)
TIA!
This can help you..
Match the format first
(in the array, add more formats to check)
string[] formats = {"M/d/yyyy", "MM/dd/yyyy",
"d/M/yyyy", "dd/MM/yyyy",
"yyyy/M/d", "yyyy/MM/dd",
"M-d-yyyy", "MM-dd-yyyy",
"d-M-yyyy", "dd-MM-yyyy",
"yyyy-M-d", "yyyy-MM-dd",
"M.d.yyyy", "MM.dd.yyyy",
"d.M.yyyy", "dd.MM.yyyy",
"yyyy.M.d", "yyyy.MM.dd",
"M,d,yyyy", "MM,dd,yyyy",
"d,M,yyyy", "dd,MM,yyyy",
"yyyy,M,d", "yyyy,MM,dd",
"M d yyyy", "MM dd yyyy",
"d M yyyy", "dd MM yyyy",
"yyyy M d", "yyyy MM dd"
};
DateTime dateValue;
foreach (string dateStringFormat in formats)
{
if (DateTime.TryParseExact(sqlDateTime, dateStringFormat, CultureInfo.InvariantCulture, DateTimeStyles.None, out dateValue))
}
Then change it to your format
var x=dateValue.ToString("yyyy-MM-dd"); // or any other format