0

I will select the date range from the calendar say for example I will select the date range from 10 june to 26 th july .I need to calculate the number of tuesday and thursday in the selected range

pageNotfoUnd
  • 666
  • 10
  • 20
  • This isn't a `react` issue, it's just a `Javascript` issue. Nothing about it is specific to React. Here's a post about counting specific days between dates in Javascript (and Googling can find you more posts): https://stackoverflow.com/questions/25562173/calculate-number-of-specific-weekdays-between-dates – Jayce444 Jun 13 '18 at 08:39

2 Answers2

1

You can do it easily with moment library (http://momentjs.com, you can add it to project with npm install moment and then just import it in Component where you need it).

  countDays = () => {
    let { date1, date2 } = this.state;
    let tuesdays = 0,
      thursdays = 0;

    date1 = moment(date1);
    date2 = moment(date2);
    let fromDayWeek = date1.isoWeeks();
    let toDayWeek = date2.isoWeeks();
    let fromDay = date1.isoWeekday();
    let toDay = date2.isoWeekday();
    let weekIteration = toDayWeek - fromDayWeek;
    let j = 1,
      daysOfWeek = 7;

    for (let i = 0; i <= weekIteration; i++) {
      // iterating throught days - first day = 1 = monday, last day = 7 = sunday
      j = i === 0 ? fromDay : 1; // we want to start counting for the first selected date
      daysOfWeek = i === weekIteration - 1 ? toDay : 7; // we want to end counting for the last selected date

      for (j; j <= daysOfWeek; j++) {
        // if it's tuesday, it is 2 day of week
        if (j === 2) {
          tuesdays++;
        }
        // if it's thursday, it is 4 day of week
        if (j === 4) {
          thursdays++;
        }
      }
    }

    return {
      tuesdays,
      thursdays
    };
  };

Check out a fully working solution with the moment here: https://codesandbox.io/s/x2w6nq6npq

Vikky
  • 750
  • 8
  • 16
  • thanks but your code fails in some case like select the date from 10 june to 26 th july its giving result as 6 and 6 but thats actually 7 – pageNotfoUnd Jun 13 '18 at 09:59
  • Sorry! I used weeks instead of isoWeeks! Edited sandbox and the answer, you can try it now! :) – Vikky Jun 13 '18 at 10:36
  • How can I manage years if the date is from today to next year same date – pageNotfoUnd Jun 13 '18 at 10:49
  • 1
    You need year-loop around week-loop, and week-loop must have checks just like the day loop - because start week can be 1 (if new year), or selected week - if it's the start of the loop, and the end week can be max number of years (if it's not same year), and week of the selected day - if it's "last year" - year of the selected "to-date" . I forked my sandbox, you can check it here (if numbers are wrong, I guess you will have to manage for loops to fit correct numbers or add some additional checks) - https://codesandbox.io/s/ooxwnkj8k6 – Vikky Jun 13 '18 at 11:35
  • sry for repeated questions i need the dates of that tuesdays and thursdays and plot that in the calendar how can i do that – pageNotfoUnd Jun 13 '18 at 12:57
  • I've updated sandbox (https://codesandbox.io/s/ooxwnkj8k6), I've converted dates and added them to an array... But you will have to go deeper into it and add dates to the calendar, how will you do it - it depends on component you use, and I cannot help you there, it's not trivial (of course, it's connected to the calendar - it cannot be trivial), and it would take too much time, it's almost the whole calendar project :) – Vikky Jun 14 '18 at 07:58
  • Np! Good luck! :) – Vikky Jun 14 '18 at 09:29
0

However, this can be simplified but this is the easiest way to go.

I assume you have Datepickers for range , For instance assume - 

<input type="date" name="from"/>
<input type="date" name="to"/>

Now we get dates from the input as value and loop through - 

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    tuesdays=[],
    mondays=[];

$('button').click(function(){
var startDate = new Date($('input[name="from"]').val()),
    endDate =  new Date($('input[name="to"]').val());

  while(startDate <= endDate){

    var dayName = days[new Date(startDate).getDay()];

    if(dayName==="Monday"){
       mondays.push(new Date(startDate));
    }

    if(dayName ==="Tuesday"){
      tuesdays.push(new Date(startDate));
    }

    startDate = new Date(startDate).setDate(new Date(startDate).getDate() + 1); 
  }
});

Go through start and end date and get the day name.

Have a look at this fiddle I made for you - http://jsfiddle.net/xpvt214o/220346/

P.S. Make sure you put validation of StartDate being lower than EndDate and others if needed. This is just an example to start with it.

Manoz
  • 6,507
  • 13
  • 68
  • 114