bbone/application/modules/Delegation/views/edit_delegation_form.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- Body page content -->
<style>
    .alert-success  {
    background-color: #dff0d8;
    color: #3c763d;
    border-color: #d6e9c6;   
}

.flash-message {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    margin-left: 690px;
}
</style>

<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">

<?php if ($this->session->userdata('Create')): ?>
    <div class="alert-success flash-message" id="customPrompt" style="text-align: right;">
        <h2><?php echo $this->session->userdata('Create'); ?></h2>
         <span  onclick="$('#customPrompt').hide()" style="text-align: right;" ><i class="fa fa-times" aria-hidden="true"></i></span>
    </div>
<?php endif; ?>
<?php $this->session->unset_userdata('Create');?>

<ul class="nav navbar-right panel_toolbox">
   <a href="<?php echo base_url();?>Delegation/Delegation_list" class="btn  btn-primary" style="margin-top: 20px;">Back</a>
</ul>

<h1>Edit Delegate</h1>

<div class="clearfix"></div>
</div>
<div class="x_content">
<br />

<?php foreach( $Delegation_list as $data) { ?>

<form id="" data-parsley-validate class="form-horizontal form-label-left" method="post" action="<?php echo base_url();?>Delegation/Edit_Create_Delecation" enctype="multipart/form-data">

<input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">    

<div class="item form-group">

<label class="control-label col-md-2 col-sm-2 " for="first-name"> From Date<a style="color:red;">*</a> </label>
   <div class="col-md-3 col-sm-3 ">
    <div class='input-group date'>
     <input type='text' class="form-control"  placeholder="DD-MM-YYYY" id="fromdate" name="from_date" value="<?php echo date('d-m-Y', strtotime($data->from_date)) ?>" required autocomplete="off"/>
      </div>
 </div>


<label class="control-label col-md-1 col-sm-1" for="last-name">To Date<a style="color:red;">*</a> </label>
<div class="col-md-3 col-sm-3 ">
    <div class='input-group date' >
    <input type='text' class="form-control" placeholder="DD-MM-YYYY" id="todate" name= "to_date" value="<?php echo date('d-m-Y', strtotime($data->to_date))?>" required autocomplete="off"/>
    </div>
</div>

<input type='hidden' name="emp_id" value="<?php echo user()->id; ?>" required />

<input type='hidden' name="id" value="<?php echo $data->id; ?>" required />

</div>


<div class="item form-group">

    <label class="control-label col-md-2 col-sm-2 " for="last-name">Delegated To<a style="color:red;">*</a> </label>
    <div class="col-md-7 col-sm-7 ">
    <select id="emp_id" name="delegated_to" required="required" class="form-control" >
    <option value="<?php echo $data->delegated_to; ?>"><?php echo $data->name; ?></option>
    <?php foreach ($emp as $key => $value) { ?>

        <?php if($value->user_id != user()->id) { ?>
              
    <option value="<?php echo $value->user_id; ?>"><?php echo $value->name; ?></option>

    <?php } } ?>


    </select>
    </div>

</div>


<div class="ln_solid"></div>
<div class="item form-group">
<div class=" offset-md-8">
<a href="<?php echo base_url();?>Delegation/Delegation_list" class="btn btn-secondary">Cancel</a>
<button class="btn btn-primary" type="reset">Reset</button>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>

</form>

<?php }  ?>

</div>
</div>
</div>


</div>  
</div> 
</div>
<script>



        
document.addEventListener("DOMContentLoaded", function () {
            const fromDateInput = document.getElementById('fromdate');
            const toDateInput = document.getElementById('todate');

            flatpickr(fromDateInput, {
                dateFormat: 'd-m-Y',
                minDate: 'today',
                maxDate: new Date().fp_incr(365 * 10), 
                allowInput: false,
                autoclose: true,
                onChange: function (selectedDates, dateStr) {
                    toDateInput._flatpickr.set('minDate', dateStr);
                    console.log('Selected from date: ', dateStr);
                }
            });

            flatpickr(toDateInput, {
                dateFormat: 'd-m-Y',
                minDate: 'today',
                maxDate: new Date().fp_incr(365 * 10), 
                allowInput: false,
                autoclose: true,
                onChange: function (selectedDates, dateStr) {
                    console.log('Selected to date: ', dateStr);
                }
            });
        });




            // Function to validate the date range
            function validateDateRange() {
                var fromDate = fromDateInput.datepicker("getDate");
                var toDate = toDateInput.datepicker("getDate");

                // Check if both dates are selected
                if (!fromDate || !toDate) {
                    $("#error-msg").text("Please select both From Date and To Date");
                    return false;
                }

                // Compare the dates
                if (fromDate > toDate) {
                    $("#error-msg").text("From Date cannot be after To Date");
                    return false;
                }

                // Clear the error message if the date range is valid
                $("#error-msg").text("");
                return true;
            }



    
</script>