HTML5Datepicker & Laravel

Below is an example of dependant datepicker using the HTML5 native datepicker, style is added for opening datepicker as soon as anywhere inside the input box is clicked

<style>
    input#end_date{
        position:relative;
        overflow:hidden;
    }
    input#end_date::-webkit-calendar-picker-indicator{
        display:block;
        top:0;
        left:0;
        background: transparent;
        position:absolute;
        transform: scale(12);
        width: auto;
        right: 0;
        height: auto;
        cursor: pointer;
        bottom: 0;
        cursor: pointer;
    }
    input#end_date{
        position:relative;
        overflow:hidden;
    }
    input#end_date::-webkit-calendar-picker-indicator{
        display:block;
        top:0;
        left:0;
        background: transparent;
        position:absolute;
        transform: scale(12);
        width: auto;
        right: 0;
        height: auto;
        cursor: pointer;
        bottom: 0;
        cursor: pointer;
    }



    input#start_date{
        position:relative;
        overflow:hidden;
    }
    input#start_date::-webkit-calendar-picker-indicator{
        display:block;
        top:0;
        left:0;
        background: transparent;
        position:absolute;
        transform: scale(12);
        width: auto;
        right: 0;
        height: auto;
        cursor: pointer;
        bottom: 0;
        cursor: pointer;
    }
    input#start_date{
        position:relative;
        overflow:hidden;
    }
    input#start_date::-webkit-calendar-picker-indicator{
        display:block;
        top:0;
        left:0;
        background: transparent;
        position:absolute;
        transform: scale(12);
        width: auto;
        right: 0;
        height: auto;
        cursor: pointer;
        bottom: 0;
        cursor: pointer;
    }
</style>

<div class="row">
 <div class="col-md-6 mb-3">
  <label  class="form-label">Coupon Start Date <span class="req">*</span></label>                            
  <input type="date" value="{{(isset($coupon))?Carbon\Carbon::createFromFormat('m/d/Y g:i A', $coupon->start_date)->format('Y-m-d') : ''}}" onchange="f1()"class="form-control" id="start_date" name="start_date" />
</div>
 <div class="col-md-6 mb-3">
  <label  class="form-label">Coupon End Date <span class="req">*</span></label>
   <input type="date" value="{{(isset($coupon))?Carbon\Carbon::createFromFormat('m/d/Y g:i A', $coupon->end_date)->format('Y-m-d') : ''}}" class="form-control" id="end_date" name="end_date" />
 </div>
</div>

<script>
function f1()
    {
        var datePck = new Date($('#start_date').val());
        var month = datePck.getMonth() + 1;
        var day = datePck.getDate();
        var year = datePck.getFullYear();

        if(month < 10)
            month = '0' + month.toString();
        if(day < 10)
            day = '0' + day.toString();

        var maxDate = year + '-' + month + '-' + day;    

        $('#end_date').attr('min', maxDate);
    }
</script>

Format which is shown is mm-dd-YYYY
Format which goes is YYYY-mm-dd
Carbon can be used to parse data into other formats

$data['coupon']->start_date = Carbon::createFromFormat('m/d/Y g:i A', $data['coupon']->start_date)->format('Y-m-d');