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

<!-- bootstrap-daterangepicker -->
    <script src="https://localhost/ams//assets/default/moment/min/moment.min.js"></script>
    <script src="https://localhost/ams//assets/default/bootstrap-daterangepicker/daterangepicker.js"></script>
    <!-- bootstrap-datetimepicker -->    
    <script src="https://localhost/ams//assets/default/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></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 $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 $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">
<button class="btn btn-secondary" onclick="history.back()">Cancel</button>
<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>
            // Initialize datepickers
            var dateFormat = "dd-mm-yy";
            var fromDateInput = $("#fromdate");
            var toDateInput = $("#todate");

            fromDateInput.datepicker({
                dateFormat: dateFormat,
                changeYear: true,
                changeMonth: true,
                onSelect: function (dateText, inst) {
                    toDateInput.datepicker("option", "minDate", dateText);
                    validateDateRange();
                }
            });

            toDateInput.datepicker({
                dateFormat: dateFormat,
                changeYear: true,
                changeMonth: true,
                onSelect: function (dateText, inst) {
                    validateDateRange();
                }
            });


            // 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>