Nepali Date Conversion Bi-directional using leapfrog date converter (laravel/livewire)

date.blade.php

<div>
<div class="@error('dateOfBirthBs')border border-danger rounded-3 @enderror input-group">
    <input wire:model='nepaliFormattedDateBs'
        class="multisteps-form__input form-control dob-picker" type="text"
        onfocus="focused(this)" onfocusout="defocused(this)"
        data-twofas-input-listener="true" placeholder="११/१/२०२२" id="dateOfBirthBs"
        name="dateOfBirthBs">
    <span class="input-group-text">BS</span>
</div>
@error('dateOfBirthBs')
    <div class="text-danger">Nepali date of birth is required</div>
@enderror
<div
    class="@error('dateOfBirthAd')border border-danger rounded-3 @enderror input-group">
    <input wire:model="dateOfBirthAd" class="form-control" type="date"
        onfocus="focused(this)" onfocusout="defocused(this)"
        data-twofas-input-listener="true" id="dateOfBirthAd" name="dateOfBirthAd">
    <span class="input-group-text">AD</span>
</div>
@error('dateOfBirthAd')
    <div class="text-danger">English date of birth is required</div>
@enderror
</div>

date.php

<?php

namespace App\Http\Livewire\Date;

use Livewire\Component;

class Index extends Component
{
    public $nepaliFormattedDateBs; // Do nothing with this just to show

    // Store these two
    public $dateOfBirthBs;
    public $dateOfBirthAd;
    
    public function render()
    {
        return view('livewire.date');
    }
}

dateconvert.js

$("#dateOfBirthBs").nepaliDatePicker({
            dateFormat: "%y-%m-%d",
            closeOnDateSelect: true
        });
$("#dateOfBirthBs").on("dateSelect", event => {
            const {
                bsYear,
                bsMonth,
                bsDate
            } = event.datePickerData;
            const formattedDateBs =
                `${bsYear}-${bsMonth.toString().padStart(2, '0')}-${bsDate.toString().padStart(2, '0')}`;
            const formattedDateAd = new Date(new Date(event.datePickerData.adDate - event.datePickerData.adDate
                .getTimezoneOffset() * 60000).setDate(new Date(event.datePickerData.adDate - event
                .datePickerData.adDate.getTimezoneOffset() * 60000).getDate())).toISOString().split('T')[0];
            @this.set('dateOfBirthAd', formattedDateAd);
            @this.set('dateOfBirthBs', formattedDateBs);
        });

        $("#dateOfBirthAd").on("change", function() {
            var adDate = new Date(this.value);
            var adYear = adDate.getFullYear();
            var adMonth = adDate.getMonth() + 1;
            var adDate = adDate.getDate();

            var formattedDateBs = calendarFunctions.getBsDateByAdDate(adYear, adMonth, adDate);
            formattedDateBs.bsDate = formattedDateBs.bsDate + 1;
            nepaliFormattedDateBs = calendarFunctions.bsDateFormat("%y-%m-%d", formattedDateBs.bsYear,
                formattedDateBs
                .bsMonth, formattedDateBs.bsDate);
            var formattedDateBs = formattedDateBs.bsYear + '-' + (formattedDateBs.bsMonth < 10 ? '0' : '') +
                formattedDateBs.bsMonth + '-' + (formattedDateBs.bsDate < 10 ? '0' : '') + formattedDateBs
                .bsDate;
            @this.set('dateOfBirthBs', formattedDateBs);
            @this.set('nepaliFormattedDateBs', nepaliFormattedDateBs);
        })