JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<div class="input-daterange input-group" id="datepicker">
    <input type="text" id="weaned_start_date" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" id="weaned_end_date" class="input-sm form-control" name="end" />
</div>

JavaScript

function getSaturdayFriday(date) {
            const dayOfWeek = date.getDay();
            const diffToSaturday = dayOfWeek === 0 ? -6 : - (dayOfWeek + 1);;
            console.log(dayOfWeek);
            const saturday = new Date(date);
            if(dayOfWeek != 6) {
                saturday.setDate(date.getDate() + diffToSaturday);
            }
            //saturday.setHours(0, 0, 0, 0); // Set to midnight

            const friday = new Date(saturday);
            friday.setDate(saturday.getDate() + 6);
            //friday.setHours(23, 59, 59, 999); // Set to end of the day
            return { saturday, friday };
        }
$('#datepicker').datepicker({
            todayHighlight: true,
            format: 'yyyy-mm-dd'
        }).on('changeDate', function (e) {
            const selectedDate = e.date;
            const { saturday, friday } = getSaturdayFriday(selectedDate);
            const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
            const formattedDate = saturday.toLocaleDateString('en-CA', options).replace(/\//g, '-');
            const formattedEndDate = friday.toLocaleDateString('en-CA', options).replace(/\//g, '-');
            // $('#weaned_start_date').datepicker('clearDates');
            // $('#weaned_end_date').datepicker('clearDates');
            $('#weaned_start_date').datepicker('update', formattedDate);
            $('#weaned_end_date').datepicker('update',formattedEndDate);
            //$('#weaned_end_date').datepicker('update', formattedEndDate);

        });