Display current week in react-native

Question

I need to display the current week of the month in the following format in react-native:

(Week 2: 05.10 - 11.10) (example of week 2 of current month)

What would be some suggestions as how to achieve this? I know that there are packages such as momentjs to build this but would like some examples of how to achieve this

any help is appreciated!

What have you tried? Does this answer your question? https://stackoverflow.com/questions/43603604/how-to-get-week-numbers-of-current-month-in-moment-js/43611388 — Marc, Oct 25 '20 at 21:48
It may for the week but what about the date? as in 05.10 - 11.10 :) — privatere, Oct 25 '20 at 21:56
Does this answer your question? [Get week of the month](https://stackoverflow.com/questions/3280323/get-week-of-the-month) — Heretic Monkey, Oct 25 '20 at 22:12

score 0 · Answer 1 · answered Oct 26 '20 at 15:41

You can adapt the code below. I say "adapt" because you haven't specified when your week starts (Sunday or Monday?) or how you want to count which week within the month it is (i.e. is week #1 the first full week? The code below assumes so).

Anyway, by clicking the "Run Code Snippet" button, you'll see what it does, including some intermediate steps, which are there to illustrate where the values are coming from, and therefore what you might want to "adapt" for your needs.

//get the first day of week and last day of week, borrowed from https://stackoverflow.com/a/64529257/1024832 above
const getWeek = (date = new Date()) => {
  const dayIndex = date.getDay();
  const diffToLastMonday = (dayIndex !== 0) ? dayIndex - 1 : 6;
  const dateOfMonday = new Date(date.setDate(date.getDate() - diffToLastMonday));
  const dateOfSunday = new Date(date.setDate(dateOfMonday.getDate() + 6));
  return [dateOfMonday, dateOfSunday];
}

//get week number w/in the month, adapted from https://stackoverflow.com/a/57120367/1024832
const getWeekNumber = () => {
  let todaysDate = moment(moment.now());
  let endOfLastMonth = moment(todaysDate).startOf('month').subtract(1, 'week');
  let weekOfMonth = todaysDate.diff(endOfLastMonth, 'weeks');
  return weekOfMonth;
}

//capture/log some steps along the way
const [Monday, Sunday] = getWeek();
console.log("First/Last of week as Date Objects: ", Monday, Sunday);
let Monday_formatted = moment(Monday).format("DD.MM");
let Sunday_formatted = moment(Sunday).format("DD.MM");
console.log(Monday_formatted, "-", Sunday_formatted);
console.log("Week #:", getWeekNumber());

//set the DIV content
document.getElementById("datehere").innerText = `(Week ${getWeekNumber()}):  ${Monday_formatted} - ${Sunday_formatted}`;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<div id="datehere"></div>

score -1 · Answer 2 · answered Oct 25 '20 at 21:56

Here's an answer as a function which returns the current week's Monday and Sunday in an array:

getWeek = (date = new Date()) => {
  const dayIndex = date.getDay();

  const diffToLastMonday = (dayIndex !== 0) ? dayIndex - 1 : 6;
  const dateOfMonday = new Date(date.setDate(date.getDate() - diffToLastMonday));
  const dateOfSunday = new Date(date.setDate(dateOfMonday.getDate() + 6));

  return [dateOfMonday, dateOfSunday];
}

const [Monday, Sunday] = getWeek();

console.log(Monday, Sunday);

The response is two valid date objects. You can also pass a date object for the function to get Monday and Sunday of that date's week (e.g. getWeek(new Date(0));

But when you want to parse those dates, you should gain better knowledge of Date Object.

Display current week in react-native

2 Answers2