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.
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
}
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.
Is it possible to prevent previousButton in 'Ext.calendar.panel.Panel' from showing dates earlier than today?
In addition, views config allows selecting firstDayOfWeek, where 1 equals Monday:
views: {
week: {
firstDayOfWeek: 1
}
}
But, is it possible to configure week view to start always from today?
Looks like the min date is not implemented in the calendar.
To start week from today, you can use the following code:
views: {
week: {
firstDayOfWeek: (new Date()).getDay()
}
},
This is update of my question upon the answer from #Arthur Rubens:
Let's say that for the sake of generalization, instead of (new Date()).getDay(), some more complex function is needed to be calculated (for example factorial of that number times that number to the power of five, and then mod 7). Obviously, some method must be written, like:
initComponent: function () {
this.firstDayOfWeek = this.getTheResult(); // <- this is not defined
this.callParent(arguments);
},
getTheResult: function () {
// some calculation...
return result;
}
However, that raises two problems:
1) this.firstDayOfWeek is not properly defined since firstDayOfWeek is not property of class, but it is within
views: {
week: {
firstDayOfWeek:
}
},
So, how to address properly that specific property? In other words, can be this property associated with some method (in this case getTheResult)?
2) I don't know for what reason, but initComponent simply doesn't work with calendar class.
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();
};
I'm using a calendar from http://w3widgets.com/responsive-calendar/.
I´d like to get the date on event onMonthChange.
But the year, month and day are always undefined.
The documentation of the plugin is well made but doesnt explains how to do it by example.
Here is my event:
onMonthChange: function(events) {
var $year=$(this).data('year'); //here I get undefined
var $month=$(this).data('month');//here I get undefined
var $day=1; //but I´d like to get the day of the current date after changed
},
if I use this event from documentation always works well:
onDayClick: function(events) {
var thisDayEvent, key;
key = $(this).data('year')+'-'+addLeadingZero( $(this).data('month') )+'-'+addLeadingZero( $(this).data('day') );
}
The documentation your are showing applies to day events.
When using onMonthChange, there is no event argument, and in order to access the object, use $(this)[0]. That gives you access to the new selected Month through the properties currentMonth and currentYear (see code):
$(".responsive-calendar").responsiveCalendar({ onMonthChange: function() {
alert(($(this)[0].currentMonth + 1) + '/' + $(this)[0].currentYear );
} });
Please note that this uses the javascript getMonth(), so the months will be 0-11.