JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="week" value="" /><input type="week" value="2024-W06" />

CSS

html {
  height: 100%;
}

body {
  height: 100%;
}

span.weeks-component-holder {
  position: relative;
  display: inline-block;
  width: calc(100% - 120px);
  vertical-align: middle;
}

input[type="text"].week-alias {
  width: calc(100% - 120px);
  padding: 7px;
  border: solid 1px #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #222;
  background-repeat: no-repeat;
  background-position: calc(100% - 6px) center;
  background-image:...

JavaScript

$('input[type="week"]').change(function() {

  console.log($(this).val());

});


Date.prototype.addDays = function(days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}


function WeekScheduler(originalComponent,aliasComponent,domElement, domElementWeeks, domElementHeaders, domElementCurrentDate, jqueryElementNavigation,componentTimestamp) {

  var t = this;
  
  var clearLink = $('<a javascript:void(0);" class="clear-link">Clear</a>');
  
  clearLink.click(function(){
  
  	originalComponent.val('');
    aliasComponent.val('Week ——, ————');
    
    $(domElement).find('>li').removeClass('selected');
    $(domElementWeeks).find('>li').removeClass('selected');
    
    aliasComponent.click();
  
  });
  
  clearLink.insertAfter($(domElement));
  
  var thisweekLink = $('<a javascript:void(0);" class="this-week-link">This Week</a>');
  
  thisweekLink.click(function(){
  
  	var d = new Date();
    
    var timestamp = d.toISOString().slice(0, 10);

   var w = getWeek(timestamp);
   
   console.log("timestamp",timestamp);
   console.log("w",w);
   
   
   originalComponent.val(t.formatForStorage(w,timestamp));
   
   aliasComponent.val(t.formatForSelection(w,timestamp));
   
   aliasComponent.click();
   
  
  });
  
  thisweekLink.insertAfter($(domElement));
  
  t.daysInYear = function (year) {
      return ((year % 4 === 0 && year % 100 > 0) || year %400 == 0) ? 366 : 365;
  }
  
  
  
  t.formatForStorage = function(w,timestamp) {

    var y = timestamp.substr(0,4);
    var w = w;
    
    if(timestamp.substr(5,2) == "12"){
    
    	if(w == 1){
      
      	y++;
      
      }
    
    } else if(timestamp.substr(5,2) == "01"){
    
    	if(w == 52){
      
      	y--;
      
      }
    
    }
    
    w = w + '';

    return y + '-W' + w.padStart(2, '0');

  }
  
  t.formatForSelection = function(w,timestamp) {

    var y = timestamp.substr(0,4);
    var w = w;
    
    
    if(timestamp.substr(5,2) ==...