JSFiddle - React, Tailwind, and code Playground

HTML

<table class="filter-table">
    <tr>
        <td>
            <label for='startDate'>From</label>
        </td>
        <td>
            <input name='startDate' id='startDate' class='date-picker' />
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <label for='endDate'>To</label>
        </td>
        <td>
            <input name='endDate' id='endDate' class='date-picker' />
        </td>
    </tr>
</table>

JavaScript

function showdatepicker() {
    var $datePickers = $('.date-picker');
    console.log($datePickers.datepicker);
    $datePickers.datepicker({
        changeMonth: true,
        changeYear: true,
        changeDay: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm-dd',
        onClose: function (dateText, inst) {
            var day = $("#ui-datepicker-div .ui-datepicker-day :selected").val();
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $('#startDate').datepicker({
                defaultDate: -30
            });
            $('#endDate').datepicker({
                defaultDate: new Date()
            });
        }
    });
}

function populateDefaultValues() {
    var today = new Date();
    var month = today.getMonth() - 1,
        year = today.getFullYear();
    if (month < 0) {
        month = 11;
        year -= 1;
    }
    var oneMonthAgo = new Date(year, month, today.getDate());

    $('#startDate').val($.datepicker.formatDate('yy-mm-dd', today));
    $('#endDate').val($.datepicker.formatDate('yy-mm-dd', oneMonthAgo));
}

$(function() {
    populateDefaultValues();
    showdatepicker();
});