php - Simple modification of the JavaScript code to add the chosen date

Question

I am not a JavaScript programmer but I ran into that case with me: I am designing a doctor appointment reservation system so I need to add Class "Active" css to today's date over span? In addition to adding this link:

<a href='?B=<? $item_num; ?>&y="select year or a year shown "&m="select month or a month shown ",&d="select day or a day shown "'>

in this code in booth status: and very thanks for your help my friend!

var date = null;
    var Ginc = null;

    $(document).ready(() => {
        buildCalender(+7);
    });

    function buildCalender(days) {

        if (date == null)
            date = new Date();

        var count = days >= 0 ? days : days * -1;
        var inc = days >= 0 ? +1 : -1;
        var daysArr = []; var html = "";

        if (Ginc != null && Ginc != inc) {
            date.setDate(date.getDate() + days + -inc);
        }

        Ginc = inc;

        for (var i = 1; i <= count; i++) {
            date.setDate(date.getDate() + inc);
            daysArr.push(new Date(date));
        }

        if (days >= 0) {

            var m1 = daysArr[0].toLocaleString('default', { month: 'short' }) + " " + daysArr[0].getFullYear().toString().substr(2, 2);
            var m2 = daysArr[daysArr.length - 1].toLocaleString('default', { month: 'short' }) + " " + daysArr[daysArr.length - 1].getFullYear().toString().substr(2, 2);

            if (m1 != m2) {
                $("#monthName").text(m1 + " / " + m2);
            } else {
                $("#monthName").text(m1);
            }

            for (var i = 0; i < daysArr.length; i++)
                html += "<div><a href='B=<?= $item_num; ?>'><span>" + daysArr[i].getDate() + "</a></span>" +
                    "<sup>" + daysArr[i].toLocaleString('default',
                        { weekday: 'short' }) + "</sup></div>";
        } else {

            var m1 = daysArr[0].toLocaleString('default', { month: 'short' }) + " " + daysArr[0].getFullYear().toString().substr(2, 2);
            var m2 = daysArr[daysArr.length - 1].toLocaleString('default', { month: 'short' }) + " " + daysArr[daysArr.length - 1].getFullYear().toString().substr(2, 2);

            if (m1 != m2) {
                $("#monthName").text(m2 + " / " + m1);
            } else {
                $("#monthName").text(m1);
            }

            for (var i = daysArr.length - 1; i > -1; i--)
                html += "<div><a href='B=<?= $item_num; ?>'><span>" + daysArr[i].getDate() + "</a></span>" +
                    "<sup>" + daysArr[i].toLocaleString('default',
                        { weekday: 'short' }) + "</sup></div>";
        }

        $("#weekDays").html(html);
    }

html code:

<div class="row unknown">
<div class="col-12 col-slots-contians">
<div class="month-col">
<div class="inner-month-col">
<span id="prevWeek" class="btn2" onclick="buildCalender(-7)"></span>
<span id="monthName"></span>
<span id="nextWeek" class="btn1" onclick="buildCalender(+7)"></span></div></div>
<div id="weekDays" class="date-col-day"></div></div></div>

css code:

.btn2 {
        width: 50px;
        height: 25px;
        padding-top: 2px;
        margin-left:20px !important;
        border-radius: 5px;
        color: white;
        background-image:url(images/left-arrow-circle.svg);
        background-repeat:no-repeat;
        background-size:contain;
    }

 .btn1 {
        width: 50px;
        height: 25px;
        padding-top: 2px;
        border-radius: 5px;
        color: white;
        background-image:url(images/right-arrow-circle.svg);
        background-repeat:no-repeat;
        background-size:contain;
    }



 .date-time-col {
  padding-bottom: 15px;
  }
  .month-col {
  width: 100%;
   }
     .month-col .inner-month-col {
  background-color: #fff;
   box-shadow: 0px 6px 15px #0000000D;
   padding: 14px;
   border-radius: 10px;
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   font-size: 15px;
   color: #000;
     }
   .month-col .inner-month-col span.left-prev,
  .month-col .inner-month-col span.right-next {
    cursor: pointer;
   line-height: 0;
       }
    .date-col-day {
      text-align: center;
     padding-top: 10px;
      font-family:Arial, Helvetica, sans-serif;
       }
     .date-col-day > div {
    padding: 5px;
     float: left;
     width: 14.28%;
      }
    .date-col-day span {
   width: 35px;
   height: 35px;
   margin: 0 auto;
   border-radius: 50px;
   background-color:transparent;
   color: #000;
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
   justify-content: center;
   -webkit-justify-content: center;
   font-size: 12px;
   border:1px solid #ccc;
    }
   .date-col-day span.active {
    background-color: #e5b673;
    }
   .date-col-day sup {
    font-size: 13px;
    padding-top: 7px;
    display: inline-block;
    top: 0;
    }
   .timing-col {
    width: 100%;
   margin: 0 0px;
    }
  .timing-col .timing-box {

    padding-top: 9px;
   width:100%;
    }
    .timing-col .timing-box .inner-timing-box {
background-color: #fff;
box-shadow: 0px 6px 15px #00000014;
padding: 4px;
border-radius: 10px;
    }
   .timing-box .title-col {
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
align-items: center;
-webkit-align-items: center;

margin-bottom: 5px;
   }
.timing-box .title-col span.time-icon {
line-height: 0;
     }
 .from-to-col {
    display: flex;
  display: -webkit-flex;
  margin: 0 -4px;
  }
 .from-to-col > div {
padding: 0 4px;
 width: 50%;
 }
.from-to-col span {
font-size: 11px;
color: #858585;
padding-bottom: 4px;
  }
.from-to-col input {
font-size: 11px;
border: 1px solid #CFCFCF;
border-radius: 5px;
width: 100%;
padding: 6px;
height: 34px;
background-color: #fff;
   color: #000;
    }
   .date-time-col .bottom-button {
      padding-top: 10px;
      }

   .timing-col .timing-box .inner-timing-box:hover,
   .timing-col .timing-box .inner-timing-box.active {
    background-color: #e5b673;
    color: #fff;
    }

 .timing-col .timing-box .inner-timing-box:hover .title-col span.time-icon,
 .timing-col .timing-box .inner-timing-box:hover .from-to-col span,
 .timing-col .timing-box .inner-timing-box.active .title-col span.time-icon,
  .timing-col .timing-box .inner-timing-box.active .from-to-col span {
            color: #fff;
       }

question from:https://stackoverflow.com/questions/65910963/simple-modification-of-the-javascript-code-to-add-the-chosen-date

Answer 1

I am solved a problem: to To benefit

var date = null;
var Ginc = null;
$(document).ready(() => {
buildCalender(+7);
    });

    function buildCalender(days) {

        if (date == null)
            date = new Date();

        var count = days >= 0 ? days : days * -1;
        var inc = days >= 0 ? +1 : -1;
        var daysArr = []; var html = "";

        if (Ginc != null && Ginc != inc) {
            date.setDate(date.getDate() + days + -inc);
        }

        Ginc = inc;

        for (var i = 1; i <= count; i++) {
            date.setDate(date.getDate() + inc);
            daysArr.push(new Date(date));
        }

        if (days >= 0) {

            var m1 = daysArr[0].toLocaleString('default', { month: 'short' }) + " " + 
daysArr[0].getFullYear().toString().substr(2, 2);
            var m2 = daysArr[daysArr.length - 1].toLocaleString('default', { month: 
'short' }) + " " + daysArr[daysArr.length - 1].getFullYear().toString().substr(2, 2);
            
            var m3= (date.getMonth() + 1).toString().padStart(2, "0");
            
            var m4= (date.getMonth() + 1);
            var y1= date.getFullYear();
            var d1= date.getDate();

var today_now = new Date();
var today = today_now.getFullYear()+'-'+(today_now.getMonth()+1)+'- 
'+today_now.getDate();
var currentDate = y1+'-'+m4+'-'+d1;
            if(currentDate == today){
                var activeClass="activeClass";
                }else{ 
                var activeClass=currentDate; 
                }

            if (m1 != m2) {
                $("#monthName").text(m1 + " / " + m2);
            } else {
                $("#monthName").text(m1);
            }

            for (var i = 0; i < daysArr.length; i++)
                html += "<div><a href='?B=<?= $item_num; ?>" + "&y=" + y1 + "&m=" + m3 
 + "&d=" + (daysArr[i].getDate()).toString().padStart(2, "0") +" '><span class='" + 
 activeClass + "'>" + daysArr[i].getDate()+ "</a></span>" +
                    "<sup>" + daysArr[i].toLocaleString('default',
                        { weekday: 'short' }) + "</sup></div>";
        } else {

            var m1 = daysArr[0].toLocaleString('default', { month: 'short' }) + " " + 
 daysArr[0].getFullYear().toString().substr(2, 2);
            var m2 = daysArr[daysArr.length - 1].toLocaleString('default', { month: 
 'short' }) + " " + daysArr[daysArr.length - 1].getFullYear().toString().substr(2, 2);
            
            var m3= (date.getMonth() + 1).toString().padStart(2, "0");
            
            var m4= (date.getMonth() + 1);
            var y1= date.getFullYear();
            var d1= date.getDate();

  var today_now = new Date();
  var today = today_now.getFullYear()+'-'+(today_now.getMonth()+1)+'- 
 '+today_now.getDate();
 var currentDate = y1+'-'+m4+'-'+d1;
            if(currentDate == today){
                var activeClass="activeClass";
                }else{ 
                var activeClass=""; 
                }
                
                
            if (m1 != m2) {
                $("#monthName").text(m2 + " / " + m1);
            } else {
                $("#monthName").text(m1);
            }

            for (var i = daysArr.length - 1; i > -1; i--)
                html += "<div><a href='?B=<?= $item_num; ?>" + "&y=" + y1 + "&m=" + m3 
  + "&d=" +
                 (daysArr[i].getDate()).toString().padStart(2, "0") +" '><span 
  class='" + activeClass + "'>" + daysArr[i].getDate() + "</a></span>" +
                    "<sup>" + daysArr[i].toLocaleString('default',
                        { weekday: 'short' }) + "</sup></div>";
        }

        $("#weekDays").html(html);
    }