bbone/application/modules/Delegation/views/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: 15px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    margin-left: 650px;
}

</style>

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

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

<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form id="myForm" data-parsley-validate class="form-horizontal form-label-left" method="post" action="<?php echo base_url();?>Delegation/Assign_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'onclick="openDatePicker('fromdate')">
     <input type='text' class="form-control"  placeholder="DD-MM-YYYY" id="fromdate" name="from_date" value="" 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' onclick="openDatePicker('todate')">
    <input type='text' class="form-control input-field" placeholder="DD-MM-YYYY " id="todate" name= "to_date" value="" required autocomplete="off"/>
    </div>
</div>

<input type='hidden' name="emp_id" value="<?php echo user()->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" onchange="get_emp_id(this.value, this.id)" class="form-control" >
    <option value="">--Select--</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">Submit</button>
</div>
</div>

</form>
</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: true,
                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: true,
                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;
}

function get_emp_id(emp_id, id){
$.ajax({
        type:"get",
        url: "<?php echo base_url(); ?>Delegation/checkUniqueValue",
        data: { emp_id: emp_id },
        success:function(response)
        {
            if (response == true) 
            {   
                new PNotify({
                    title: 'Warning',
                    text: 'This Employee Already Delegated by Other',
                    styling: 'bootstrap3'
                });
                $("#"+id).val('');
                
            }
        }
    }); 
}


    
</script>

<script>
  let formSubmitted = false;

document.getElementById('myForm').addEventListener('submit', function(event) {
    if (formSubmitted) {
        event.preventDefault(); // Prevent the form from being submitted again
        return false;
    }

    formSubmitted = true;
    document.getElementById('submitBtn').setAttribute('disabled', 'disabled');

    // You might want to show a message or change button text to indicate submission

    return true;
});

</script>