ria/app/Views/publicholidays.php

<style type="text/css">
  .num {
    text-align: right;
  }
</style>

<div class="content-page">
  <div class="content">
    <!-- Start Content-->
    <div class="container-fluid">
      <!-- start page title -->
      <div>
        <div class="row">
          <div class="col-6">
            <div class="page-title-box page-title-box-alt">
            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">HR</a></li>
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Leave</a></li>
                                    <li class="breadcrumb-item active">
                                    <h4 class="page-title"> Public Holiday Information</h4>
                                    </li>
                                </ol>
                            </div>
         
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="row" style="padding-left: 26px;">
                <div class="col-md-3">
                  <span>Holiday Name : </span>
                  <input type="text" name="hname" id="hname" class="form-control">
                </div>
                <div class="col-md-3">
                  <span>Date : </span>
                  <input type="text" name="hdate" id="hdate" class="form-control">
                </div>
                <div class="col-md-3">
                  <input type="button" id="Add" value="Add" class="btn btn-success" class="form-control" style="margin-top: 20px;margin-bottom: 0px;">
                </div>
              </div>
              <div class="card-body">
                <table id="phdays" class="table dt-responsive nowrap w-100 ria_data_table">
                  <thead>
                    <tr>
                      <!-- <th>S.No</th> -->
                      <th>Holiday_Name</th>
                      <th>Date</th>
                      <th style="width:10%" ;>Action</th>
                    </tr>
                  </thead>
                  <tbody id="db">
                    <?php
                    $index = 0;
                    $testarray = array();
                    if (!empty($days)) {
                      foreach ($days as $day) {
                        $index++;
                        $date = date_create($day->H_Date);
                        $date = date_format($date, 'd-m-Y');
                    ?>
                        <tr id="<?php echo $index; ?>">
                          <!--  <td style="text-align:right;"><?php echo $index ?></td> -->
                          <td contenteditable='true' style="text-align:left;"><?php if (!empty($day->H_Name)) {
                                                                                echo $day->H_Name;
                                                                              } else {
                                                                                echo "NO DATA";
                                                                              } ?></td>
                          <td contenteditable='false' style="text-align:left;"><?php echo $date; ?></td>
                          <td style="text-align:center;"><a href='#' onclick="DeleteRow(<?php echo $index; ?>)" id="Del"><span class="fas fa-trash"></span></a></td>
                        </tr>
                    <?php
                      }
                    }
                    ?>
                  </tbody>
                </table>
                <p>&nbsp;</p>
                <div class="row">
                  <div class="col-md-12 text-right" id="savebutton">
                    <input type="button" id="submit" value="Save" class="btn btn-success">
                  </div>
                </div>
              </div> <!-- end card body-->
            </div> <!-- end card -->
          </div><!-- end col-->
        </div>
      </div>
    </div> <!-- container -->
  </div> <!-- content -->
</div>

<script type="text/javascript" src="<?php echo base_url(); ?>public/assets/js/common.js" charset="utf-8"></script>
<script type="text/html" id="addList">
  <tr>
    <td style="text-align:left;" contenteditable="true"><%=Holiday_Name%></td>
    <td style="text-align:left;" contenteditable="false"><%=Date%></td>
    <td style="text-align:center;">
      <a href='#' onclick="DeleteRow(<?php echo $index; ?>)" id="Del"><span class="fas fa-trash"></span></a>
    </td>
  </tr>
</script>

<script>
  function DeleteRow(rowid) {
    var d = '';
    //alert(rowid);
    var tr = document.getElementById(rowid);
    var Row = $('#phdays').find('tr').eq(rowid).find('td');
    $.each(Row, function(index, value) {
      if (index == 1) {
        d = value.textContent
      }
    });
    // alert(d);
    // $('#content').loader('show');
    $.ajax({
      data: {
        param1: d
      },
      type: "POST",
      url: "<?php echo base_url() ?>monthlypay/deletePublicHoliday",

      success: function(data) {
        // $('#content').loader('hide');
        alert(data);
      }

    });
    tr.parentNode.removeChild(tr);
  }

  $('#Add').click(function() {
    var index = $('#phdays tr').length;
    var H_name = $('#hname').val();
    var H_date = $('#hdate').val();

    if (H_name != '' && H_date != '') {
      var template = jQuery("#addList").html();
      $('#db').append(_.template(template)({
        index: index,
        Holiday_Name: H_name,
        Date: H_date
      }));
      $('#hname').val('');
      $('#hdate').val('');
    }
  });

  $('#submit').click(function() {
    var jsondata = $('#phdays').tableToJSON();
    var jsondata = JSON.stringify(jsondata);

    // $('#content').loader('show');
    $.ajax({
      data: {
        param1: jsondata
      },
      type: "POST",
      url: "<?php echo base_url() ?>monthlypay/savePublicHolidays",

      success: function(data) {
        // $('#content').loader('hide');
        alert(data);
      }

    });

  });

  // $('#page-title-year-selected')
</script>

<script src="<?php echo base_url() ?>public/assets/lightswitch/lightswitch/lib/jquery.tabletojson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
<script src="<?php echo base_url() ?>public/assets/lightswitch/lightswitch/lib/jquery.tabletojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
  $(document).ready(function() {
    $("#hdate").datepicker({
        format: 'dd-mm-yyyy', // Correct format for Bootstrap Datepicker
        startDate: new Date(), // Replace `d` with `new Date()` if `d` is not defined
        autoclose: true,
        todayHighlight: true,
        clearBtn: true 
    });


    function isValidDateFormat(date) {
      var datePattern = /^\d{2}-\d{2}-\d{4}$/;
      var altDatePattern = /^\d{2}\/\d{2}\/\d{4}$/;
      return datePattern.test(date) || altDatePattern.test(date);
    }

    function convertToDDMMYY(date) {
      if (date.includes("/")) {
        var parts = date.split("/");
        return parts[1] + '-' + parts[0] + '-' + parts[2];
      }
      return date;
    }

    // Handle manual input change for the date
    $("#hdate").on('change', function() {
      var selectedDate = $(this).val(); // Get the date entered manually (string)
      if (selectedDate) {
        if (isValidDateFormat(selectedDate)) {
          selectedDate = convertToDDMMYY(selectedDate);
          var dateParts = selectedDate.split("-");
          var year = dateParts[2];
          var yearNumber = parseInt(year, 10);
          console.log("Year as a number: " + yearNumber);
          $('#page-title-year-selected').html(yearNumber);
        } else {
          console.log("Invalid date format. Please enter in 'dd-mm-yy' format.");
        }
      } else {
        console.log("No date selected or entered.");
      }
    });
  });

  $('html').bind('keypress', function(e) {
    //alert('Key Pressed');
    if (e.keyCode == 13) {
      return false;
    }
  });
</script>