jquery datepicker insert dayid to all days within attribute

Question

I need to add dayid to all <td>

for example:

<td class=" " data-year="2022" data-month="8" data-event="click" data-handler="selectDay">
 <a class="ui-state-default" href="#">22</a>
</td>

would be like

<td class=" " data-year="2022" data-month="8" dayid="22" data-event="click" data-handler="selectDay">
  <a class="ui-state-default" href="#">22</a>
</td>

<td class=" " data-year="2022" data-month="8" dayid="23" data-event="click" data-handler="selectDay">
  <a class="ui-state-default" href="#">23</a>
</td> ... and so on

is this possible in jquery? I started writing this

$('td')
 .filter('[data-year="2022"]')
 .filter('[data-month="08"]')
 .find('a') // find all Anchors in this filtered result
 .attrib('dayid', '');

but don't think it can work as I don't want to hardcode the year & month, and can't get the value of each to set the attribute

OK, I am curious as to why you need to do this. If by chance you run something like this method it goes away: `$( ".selector" ).datepicker( "destroy" );` and you would have to re-do it. There may be another way to obtain your objective here. — Mark Schultheiss, Sep 20 '22 at 21:50
Why `.find('a') // find all Anchors in this filtered result` if as you said you want the `td` to have the new attribute (as your example shows) — Mark Schultheiss, Sep 20 '22 at 21:53

score 0 · Answer 1 · answered Sep 20 '22 at 19:24

You can start from the a and assign it's text() to the containing td

$('td[data-year] a').each(function(i, o) {
  $(o).closest('td').attr('dayid', $(o).text())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class=" " data-year="2022" data-month="8" data-event="click" data-handler="selectDay">
      <a class="ui-state-default" href="#">22</a>
    </td>
  </tr>
  <tr>
    <td class=" " data-year="2022" data-month="8" data-event="click" data-handler="selectDay">
      <a class="ui-state-default" href="#">23</a>
    </td>
  </tr>
</table>

score 0 · Answer 2 · answered Sep 20 '22 at 22:23

This is not exactly what you asked but here is one way to get all the days of the current calendar using the data-date attributes the calendar uses.

let $datepicker = $('#datepicker');
$datepicker.datepicker({
  duration: 1 // really fast for our purpose here
});

// creates a datepicker element by showing and hiding so we can then walk through
$datepicker.datepicker("show").datepicker("hide");
// back to normal speed for usability
$datepicker.datepicker( "option", "duration", "normal");
$sd =$(".ui-datepicker-calendar").find("[data-date]");
console.log("We have:",$sd.length," Dates in the month, here they are:");
$sd.each(function(){console.log($(this).data("date"));});

.picker-container {
  border: solid 1px blue;
}

.picker-container>tbody {
  display: flex;
}

.picker-day {
  border: solid green 1px
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<div class="picker-container">
  <p>Date: <input type="text" id="datepicker"></p>
</div>

jquery datepicker insert dayid to all days within attribute

2 Answers2