automatic calculation of the calendar week in JavaScript-CodePudding

i have an input field in html where i can select the current Date:

<input type="date" name="date" id="date"><br>
<input type="text" name="cw" id="calendarweek"> //here should appear automaticly the cw

In the next row i have another input field. That field should give me the calendarweek of the input field with the id "date" above. My target is: When i select the date, the calendarweek should appear in the input field underneath the "date".

I want to have a function in JavaScript. I only get the current calendwarweek..

I hope you can help me. I still try to learn.

Cheers.

CodePudding user response：

This is a demo including 2 functions that return the week of the year given a date object.

Both those functions were grabbed from the web and they have the corresponding source listed in the comments.

In particular, the second function getWeek() is attached to the Date object prototype and it requires an offset as argument:

getWeek() is a more general week number function that will return the correct week number for any week definition. The argument dowOffset specifies the day of week your locale starts its week on—U.S. users would want to pass a value 0; European and those who want the ISO 8601 standard would pass a value of 1. Of course, you can choose to start the week on any day; getWeek() will define the week numbers based on the third day of the week.

The date gets retrieved when the date gets picked from the calendar, and when such event occurs, both the fields for the calendar week get updated.

function onDatePicked(event){
  const datePicked = new Date(event.target.value);
  let o = getCalendarWeek(datePicked);      
  document.getElementById('calendarweek').value = o;
  document.getElementById('calendarweekIso').value = datePicked.getWeek(1);  
}

/**
 * ->>>> https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php <<<<--
 */
function getCalendarWeek(date){  
  var oneJan = new Date(date.getFullYear(),0,1);
  var numberOfDays = Math.floor((date - oneJan) / (24 * 60 * 60 * 1000));
  var result = Math.ceil(( date.getDay()   1   numberOfDays) / 7);  
  return result;  
}

/**
 * ->>>> https://www.epoch-calendar.com/support/getting_iso_week.html <<<<--
 *
 * Returns the week number for this date.  dowOffset is the day of week the week
 * "starts" on for your locale - it can be from 0 to 6. If dowOffset is 1 (Monday),
 * the week returned is the ISO 8601 week number.
 * @param int dowOffset
 * @return int
 */
Date.prototype.getWeek = function (dowOffset) {
/*getWeek() was developed by Nick Baicoianu at MeanFreePath: http://www.epoch-calendar.com */

    dowOffset = typeof(dowOffset) == 'int' ? dowOffset : 0; //default dowOffset to zero
    var newYear = new Date(this.getFullYear(),0,1);
    var day = newYear.getDay() - dowOffset; //the day of week the year begins on
    day = (day >= 0 ? day : day   7);
    var daynum = Math.floor((this.getTime() - newYear.getTime() - 
    (this.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000)   1;
    var weeknum;
    //if the year starts before the middle of a week
    if(day < 4) {
        weeknum = Math.floor((daynum day-1)/7)   1;
        if(weeknum > 52) {
            nYear = new Date(this.getFullYear()   1,0,1);
            nday = nYear.getDay() - dowOffset;
            nday = nday >= 0 ? nday : nday   7;
            /*if the next year starts before the middle of
              the week, it is week #1 of that year*/
            weeknum = nday < 4 ? 1 : 53;
        }
    }
    else {
        weeknum = Math.floor((daynum day-1)/7);
    }
    return weeknum;
};

<input type="date" name="date" id="date" onchange="onDatePicked(event);"><br>

<br>
<label>week number</label>
<input type="text" name="cw" id="calendarweek">
<br>
<label>ISO 8601 week number</label>
<input type="text" name="cw" id="calendarweekIso">