JSFiddle - React, Tailwind, and code Playground

by Daniel Gasser

HTML

<script src="https://code.jquery.com/jquery-1.12.4.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">
                        <input type="text" id="reservation_started_at" name="reservation_started_at" class="input-sm form-control"
                               placeholder="main from" readonly value=""/>
                        <span class="input-group-addon">to</span>
                        <input type="text" id="reservation_ended_at" name="reservation_ended_at" class="input-sm form-control"
                               placeholder="main to" readonly value=""/>
                    </div>

JavaScript

var today = new Date(),
    tomorrow = new Date(),
    datePickerSettings = {
            format: "dd.mm.yyyy",
            weekStart: 1,
            todayBtn: "linked",
            clearBtn: true,
            language: 'de',
            calendarWeeks: true,
            autoclose: true,
            todayHighlight: true,
            startDate: new Date(),
            endDate: new Date(),
            defaultViewDate: {
                year: today.getFullYear(),
                month: today.getMonth(),
                day: today.getDate()
            },
            immediateUpdates: true
        };
    tomorrow.setDate(today.getDate() + 7);
$(document).ready(function() {
$('.input-daterange').datepicker(datePickerSettings);
})