JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v3.1.1/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://rawgit.com/dangrossman/bootstrap-daterangepicker/v1.3.6/daterangepicker-bs3.css">
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://rawgit.com/dangrossman/bootstrap-daterangepicker/v1.3.4/daterangepicker.js"></script>
<input  value="#{period.startDate}" label="Start" styleClass="form-control" id="startDate">
<input  value="#{period.endDate}" label="End" styleClass="form-control" id="endDate">

CSS

input {
    width: 100%;
}

JavaScript

//valid only for fields with initial value
        var startDate = $("#inputStartDate").val();
        var endDate = $("#inputEndDate").val();

        $(function() { 

            $('#inputStartDate').on('hide.daterangepicker', function(ev, picker) {
                updateTextDate(picker.startDate.format('DD/MM/YYYY HH:mm:ss'), picker.endDate.format('DD/MM/YYYY HH:mm:ss'));
            });

            $('#inputStartDate').on('cancel.daterangepicker', function(ev, picker) {
                updateTextDate("", "");
            });                         

            $('#inputStartDate').daterangepicker({
                "timePicker24Hour" : true,
                    "timePicker": true,
                "autoApply" : true,
                "autoUpdateInput": false,
                "startDate": $("#inputStartDate").val() != '' ? $("#inputStartDate").val() : moment().format('DD/MM/YYYY HH:mm:00'),
                "endDate": $("#inputEndDate").val() != '' ? $("#inputEndDate").val() : moment().format('DD/MM/YYYY HH:mm:00'),
            });

            if ($('#inputStartDate').val() != '') {
                updateTextDate($('#inputStartDate').val(), $('#inputEndDate').val());
            } else {
                updateTextDate("", "");
            }
        });

        function updateTextDate(inicio, fim) {
            $('#inputStartDate').val(inicio);
            $('#inputEndDate').val(fim);

        }

        $('#inputEndDate').on('focus', function() {
            $('#inputStartDate').focus();
        });