How to set a start date on a datepicker for each row in a table

Question

Datepicker default is sun/sat, I am trying to set a start date on the datepicker based on users input.

For example, if a user selected Friday and saved his changes, then when he loads his datepicker again, the week will start from Friday to Thursday.

Now I want to do this for each row. The above was row one

I know that I can set the day of the week in the datepicker by doing `firstDay: 5. This will set it to Friday.

What I am currently doing:

$weekDays = array("", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
$weekCount = [];

$timestamp = strtotime($ceStartDate);
$day = date('l', $timestamp);
// var_dump($day);

foreach ($weekDays as $key => $val) {
    if($val == $day) {
        $weekCount = $key;
        // echo $weekCount;
    }
}


function updateDatePicker() {
    var linkRef = $(this).attr("linkref");
    
    if($("input[name='"+linkRef+"ceItem[<?= $ceId ?>][ceStartDate]']")) {
        $('.datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "dd/mm/yy",
            firstDay: "<?= $weekCount ?>",
            onSelect: function() {
                $(this).change();
            }
        });
    }
}

The above works fine for the first row only meaning if I set it to Friday it will start from Friday however, once I set the second row to Monday that's when the first row breaks and the week on the first row starts from Monday and will highlight the Friday next week which obviously make no sense

The input:

<tr rowLink="ceItem[<?= $ceId ?>]" cat="<?= $catType ?>">

  <td><? if($category["inputs"]["dateRange"]) { ?><input linkRef="ceItem[<?= $ceId ?>]" cat="<?= $catType ?>" name="ceItem[<?= $ceId ?>][ceStartDate]" item="<?=$ceId?>" class="datepicker contentsDateInput" type="text" <? if($ceStartDate != "0000-00-00 00:00:00") { ?>value="<?= date("d/m/Y", strtotime($ceStartDate)) ?>"<? } ?> style="width: 100%" /><? } ?></td>

  <td><? if($category["inputs"]["dateRange"]) { ?><input linkRef="ceItem[<?= $ceId ?>]" cat="<?= $catType ?>" name="ceItem[<?= $ceId ?>][ceEndDate]" item="<?=$ceId?>" class="datepicker contentsDateInput" type="text" <? if($ceEndDate != "0000-00-00 00:00:00") { ?>value="<?= date("d/m/Y", strtotime($ceEndDate)) ?>"<? } ?> style="width: 100%" /><? } ?></td>

</tr>

How can I can change the datepicker for each row? I tried checking the input but it always get the last row.

if($("input[name='"+linkRef+"ceItem[<?= $ceId ?>][ceStartDate]']")) {

EDIT:

The updateDatePicker() is being called at the end of the php file

<script>

  updateDatePicker()

  function updateDatePicker() {
      var linkRef = $(this).attr("linkref");

      if($("input[name='"+linkRef+"ceItem[<?= $ceId ?>][ceStartDate]']")) {
          $('.datepicker').datepicker({
              changeMonth: true,
              changeYear: true,
              dateFormat: "dd/mm/yy",
              firstDay: "<?= $weekCount ?>",
              onSelect: function() {
                  $(this).change();
              }
          });
      }
  }

</script>

Answer 1

I'll break down the solution here:

Since we got 2 datepickers inside the <tr> I had to alter the rows slightly so I could identify the specific id and update via ajax

changes inside the <td> rows:

item="<?= $ceId ?>" class="datepickerStart contentsDateInput" for="<?= $ceId ?>"

item="<?= $ceId ?>" class="datepickerEnd contentsDateInput" for="<?= $ceId ?>"

The functions have changed to match this

function updateDatePickerStart() {

    $('.datepickerStart').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
        onSelect: function() {
            $(this).change();
        }
    }); 
}


function updateDatePickerEnd() {

    $('.datepickerEnd').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
        onSelect: function() {
            $(this).change();
        }
    }); 
}

I am using ajax here to query the database get the results, strip the date and add an index to the firstDay on the datepicker.

$(function() {
    var dateStart = $('.datepickerStart');

    dateStart.each(function(index, element){ 
        var ceId = $(element).attr('item');
        var firstDay = $(element).datepicker('option', 'firstDay');

        if(ceId){
        
            $.ajax({
                method:'POST',
                cache:false,
                url:'ajax/file.loadDates.php',
                data: {
                    method: 'datepickerStart',
                    ceCmId:'<?=$ceCmId?>',
                    ceAgId: '<?=$ceAgId?>',
                    ceId:ceId,
                    ceCategory: '<?=$ceCategory?>'
                }
            }).done(function(data) {
                if(data)
                {
                    var response = $.parseJSON(data);
            
                    console.log(response);
            
                    if(response.status == "success")
                    {
                        $.each(response.dates, function(key, val) {
                            var d = val.dateStart;
                            var a = d.split("/");
                            var date = new Date( a[2], (a[1] - 1), a[0] );
                            index = date.getDay();
                            $('.datepickerStart[for="'+ceId+'"]').datepicker('option', 'firstDay', index);
                            $('.datepickerEnd[for="'+ceId+'"]').datepicker('option', 'firstDay', index);
                            $('.datepickerStart[for="'+ceId+'"]').datepicker("refresh");
                            $('.datepickerEnd[for="'+ceId+'"]').datepicker("refresh");
                        });
                
                    }

                }
            })
        }

    });

});

There is probably another way of doing this but this is what worked for me and seems pretty decent.

This post helped me figure out setter and getter Reference: Set start day of the week in jQuery UI Datepicker?