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
Related
I have issue extracting week/year from DATE column.
We are in week 02 of 2022 and my goal is to set MAX week to be "01 2022" at the moment.
Goal is to have dynamic calculated column or measure that will always show previous week.
weekMax = FORMAT(MAX(fact[date]),"WW YYYY")
With this solution it is showing me 03 2022 result.
Is there a way to sort this out?
You could try something like:
weekMax =
VAR lastweek = FORMAT(DATEADD('Table'[Date].[Date], -7, DAY) ,"WW YYYY")
RETURN
IF(FORMAT(TODAY() - 7 ,"WW YYYY") = lastweek, lastweek, BLANK())
Output:
Or if you always just want the last week without considering any columns, you can use:
weekMax = FORMAT(TODAY() - 7 ,"WW YYYY")
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');
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")}}
/>
I have a format which returns me some dates and I need to parse it into something else which I find a little bit complicated.
The data format is Mon Dec 24 2018 9:00:00 as a startDate for example and Friday Dec 28 2018 17:00:00 as an endTime for example. What happens here is that I select I want someone to start on Monday at 9 until 17 everyday, but what my data does is makes it look like he's working non-stop.
I have tried mapping over it and putting it onto objects with days of the week and start and end times, but I ran into a problem because I create the object like
dates : {
monday: {
start: 9:00,
end: 18:00
},
tuesday: {
start:9:00,
end:18:00
}
// etc for everyday of the week
}
But, what if I only need Monday through Thursday, for example, that would be a problem. Anyone has any idea, how could I do that, in any other way? I was thinking about using moment.js.
I'm not sure if I understand your question, but I think you want to list all days between two different dates, here is an example of function that iterates over days by using moment.isSameOrBefore and moment.add functions, hope this help:
function toDays(startDateString, endDateString) {
const startDate = moment(startDateString, 'dddd MMM DD YYYY');
const endDate = moment(endDateString, 'dddd MMM DD YYYY');
const dates = {};
while(startDate.isSameOrBefore(endDate, 'day')) {
const currentDay = startDate.format('dddd');
dates[currentDay] = {start:'9:00', end:'18:00'};
startDate.add(1, 'days');
}
return dates;
}
const result = toDays('Monday Dec 24 2018', 'Friday Dec 28 2018');
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
I have a DayPickerInput element from react-day-picker plugin and I don't know how to disable all days after a month(31 days) starting with current day. Any help please?
Thanks.
The documentation could be a clearer. This should do it for you:
<DayPickerInput
value={moment(minDate).format('YYYY-MM-DD')}
dayPickerProps={{
disabledDays: {
after: new Date(2018, 3, 20),
},
}}
onDayChange={day => console.log(day)}
/>
Replace the new Date(y, m, d) with your date.
[Edit per my comment]
Not all months are 31 days, if you literally want to add 31 days to the first of a month:
Source: Add day(s) to a Date object
var myDate = new Date();
myDate.setDate(myDate.getDate() + AddDaysHere);
Where "AddDaysHere" would be 31.
If you just want to insure there is no way to select a date next month, you could:
// There is probably a billion better ways to get the next available month, this is just basic
let currentMonth = 2;
let nextMonth = currentMonth + 1;
if (nextMonth > 11) { nextMonth = 0;} // I believe javascript months start at 0.
Date(2018, nextMonth, 1)
Happy coding!