JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div class="wrapper">
    <p>Display values</p>
    <input id="hotel_display_checkin_date">
    <input id="hotel_display_checkout_date">
    <hr>
    <p>Real values (normally hidden)</p>
    <input id="hotel_checkin_date" value="">
    <input id="hotel_checkout_date" value="">
</div>

CSS

.wrapper {
    padding: 10px;
}

JavaScript

var opts = {
    dateFormat : 'dd/mm/yy',
    altFormat: "yy-mm-dd"
};

$('#hotel_display_checkin_date').datepicker(
    $.extend({
        defaultDate: new Date(1985, 00, 01),        
        altField: '#hotel_checkin_date'
    }, opts)
).datepicker("setDate", new Date(1985,01,01));

$('#hotel_display_checkout_date').datepicker(
    $.extend({
        altField: '#hotel_checkout_date'
    }, opts)
);