Click here to Skip to main content
15,867,594 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm using the jQuery UI calendar. So right now i can select, save, display and remove the dates but i want to show the saved dates on the calendar (saved dates should always be active on the calendar with a different color), and save them automatically when i click on the number of the days.

HTML
<div id="datepicker"></div>
<div id="showdates"></div>
<button id="save">save</button>
<button id="restore">restore</button>
<button id="clear">clear</button>

<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>


JavaScript
const save = document.getElementById("save");
const restore = document.getElementById("restore");
const clear = document.getElementById("clear");
const showdates = document.getElementById("showdates");
const select = document.getElementsByClassName(".ui-datepicker-calendar tbody td a.ui-state-active");


$("#showdates").datepicker({
  dateFormat: "dd-mm-yy",
  duration: "fast",
});

save.addEventListener("click", function () {
  $("#showdates").datepicker({
    dateFormat: "yy-mm-dd",
  });

  //get date in a variable
  var date = $("#showdates").datepicker("getDate");
  var formatDate = $.datepicker.formatDate("yy-mm-dd", date);

  if (formatDate !== null) {
    localStorage.setItem(formatDate, formatDate);
  }
  const value = localStorage.getItem(formatDate);

  showdates.innerHTML += `Date: ${value}<br />`;
});

restore.addEventListener("click", function () {
  for (let i = 0; i < localStorage.length; i++) {
    const formatDate = localStorage.key(i);
    const value = localStorage.getItem(formatDate);

    showdates.innerHTML += `Date: ${value}<br />`;
  }
});

clear.addEventListener("click", function () {
  for (let i = 0; i < localStorage.length; i++) {
    const formatDate = localStorage.key(i);
    localStorage.clear(formatDate);
    const value = localStorage.getItem(formatDate);
    showdates.innerHTML += `Date: ${value}<br />`;

    if (value == null) {
      showdates.innerHTML = "Cleared";
    }
  }
});


What I have tried:

I searched a lot and tried some things, but they didn't work.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900