I have a day picker in a datepicker modal I am writing in React with hooks. I want to display today's date in the middle and count backwards going up and forwards going down from today. I also need my dates to wrap to the next or previous month and start or end on the correct number of days. My html looks like this
<div className={'dateField'} ref={dayRef}>
<div>{getDayNumber(-3)}</div>
<div>{getDayNumber(-2)}</div>
<div>{getDayNumber(-1)}</div>
{/* TODAY */}
<div>{date.getDate()}</div>
{/* END TODAY */}
<div>{getDayNumber(1)}</div>
<div>{getDayNumber(2)}</div>
<div>{getDayNumber(3)}</div>
</div>
I have a getDayNumber function, but it behaves very strangely. It will count backwards, but not forwards, and sets today's date minus 1 as the same as today's date. I think this is because it is somehow switching to a 0 index count of days? How do I change this back into the day number?
const getDayNumber = (dayNumber) => {
var newDate = new Date(date.setDate(date.getDate() - dayNumber));
console.log('NEW DATE NUMBER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!', newDate.getDate());
return newDate.getDate();
};
I also have an issue where passing different numbers into getDayNumber() doesn't work - I think this is because I am resetting the central date object with setDate()?:
const [ date, setMyDate ] = useState(new Date());
I think setting the getDayNumber function to create a new Date first gets rid of the problem:
const getDayNumber = (dayNumber) => {
var newDate = new Date();
newDate.setDate(date.getDate() - dayNumber);
console.log('NEW DATE NUMBER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!', newDate.getDate());
return newDate.getDate();
};
Related
For example is it possible to call a function after 2 weeks?
I thought about react and a library like dayjs and some code like this:
const date = Number(dayjs(new Date()).format("DD"))
if (date === date + 14) {
//function
}
I testet it with seconds and realised that i am dumb because everytime i refresh the page it will restart the "timer". Do you have any ideas if it is possible?
As suggested in the comments, you could make a cookie/session storage item containing the date at which you want this to take place. Here is an example using session storage, though a cookie is more preferable:
const nowInTwoWeeks = new Date(Date.now()) // Today's date
nowInTwoWeeks.setDate(nowInTwoWeeks.getDate() + 14) // Add 14 days
sessionStorage.setItem('twoWeeksMark', nowInTwoWeeks)
const now = new Date(Date.now()) // Today's date to use for comparison
if (now >= sessionStorage.getItem('twoWeeksMark')) {
// Do the work
}
I am new to react and I try to validate a form. To do validation I want to compare two dates. So I get today date and add seven days to today date.
const date = new Date();
date.setDate(date.getDate() + 7);
Then I try to compare this date with the input field date.
if (values.expiryDate<=date) {
errors.expiryDate = "Expiry date should not be longer than a week.";
}
I try to compare two dates like this. But this code does not validate these two days. How do I solve this issue?
If the values.expiryDate is in string then first convert it to Date object.
const d1 = new Date(values.expiryDate);
then you can compare d1 and date easily.
if (d1<=date) {
errors.expiryDate = "Expiry date should not be longer than a week.";
}
Using the antd/datepicker , I'm trying to enable users to choose only first day of each month whenever monthSelect is true.
The only thing I've managed to do is to enable all the dates after current and that is the case when monthSelect is false.
For now, I still have problem resolving the case where monthSelect is true. I've tried to disabled value > moment().startOf('month'), which only enables the date before first month of current month and not the following months or previous months. How can I enable datePicker for only first day of each month?
const disabledDate = (value) => {
if (monthSelect) return value > moment().startOf('month');
return value < moment().startOf('day');
}
<DatePicker
disabled={disabledSettingButton || disabledSaveButton}
disabledDate={disabledDate}
format = 'YYYY-MM-DD'
>
</DatePicker>
Any help would be appreciated, thanks in advance
Try this:
function disabledDate(value) {
return value.format("YYYY-MM-DD") !== moment(value).startOf('month').format("YYYY-MM-DD");
}
this will only enable the first date of each month.
I'm trying to highlight the current week in my grid row, get NaN for currentWeek and jsonWeek:
if (this.props.data.startDate) {
var jsonWeek = moment(this.props.data.startDate, "MM-DD-YYYY").week();
var now = moment();
var currentWeek = now.week();
if (currentWeek == jsonWeek) {
styles = {
backgroundColor: 'yellow'
};
}
}
Any ideas?
Your issue made me correct mine too...fixed the NaN this way..
did you change the locale like this?
moment.locale('en',
{
week: {
dow: 1 // Monday is the first day of the week
}
});
that`s the reason to me, because this will add a week object to internal function localeData().
I removed the locale customization and changed all
.startOf('week')
to
startOf('isoweek')
to get the mondays working and the week will work as well
I don't see anything wrong with your code. It's probably a problem with your moment dependency. Check that the version is > 2. It looks like week was added in 2.0.0.
I am unable to work out how to display a date which is one or more days/months/years in the future from that being input by the user.
For example:
<input ng-model="startDate" type="date" id="start-date" name="startDate">
Which is to be displayed below:
<p>The start and end dates are: {{startDate | date}} and {{endDate() | date}}.</p>
The endDate function is as follows:
$scope.endDate = function() {
if($scope.startDate) {
var endDate = $scope.startDate;
return endDate.setYear(endDate.getYear() + 1);
}
}
Whilst the startDate displays, the endDate() does not. This happens whether or not I wrap it in the if statement.
I'd strongly suggest using the moment.js library for any AngularJS related date maths. Very easy addition and subtraction etc functions for date objects.
http://momentjs.com/
Example
$scope.date = moment().add(1, 'months') will add a month to the current date.