JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">The date is <span class="dateSpoof"></span>

    <input class="myDate" type="text"
    value="foo" />. Thanks for coming.</div>

CSS

.wrapper {
    margin: 15px;
    height: 30px;
    font-size: 12px;
    font-family: arial;
}
.ui-datepicker-trigger {
    vertical-align: top;
    /* prevent adjacent text jump */
    margin-top: -5px;
}
.dateSpoof {
    cursor: pointer;
    display: inline-block;
}
.myDate {
    width: .1px;
    height: .1px;
    opacity: 0;
}

JavaScript

$('.myDate').datepicker({
    showOn: 'button',
    buttonText: 'select...vxvxvsddf',
    onClose: function () {
        var dateText = $(this).val();
        $('.dateSpoof').html(dateText);
        $('.ui-datepicker-trigger').hide();
    },
    dateFormat: 'd M yy'
});

$('.dateSpoof').click(function () {
    $('.myDate').datepicker('show');
});