JQuery Datepicker UI transparent

Question

I have this problem which the JQuery Datepicker went transparent. Dates are still able to send data into the database and things that are required to add have added in already.

Files that I have imported:

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui.js"></script>

The datepicker just appear in this way

My html codes is over here

                    <div class="form-group">
                        <div class="row">
                            <label for="dateFrom" class="col-md-2 control-label">Date From:</label>
                            <div class="col-md-4">
                                <div class="input-group date">
                                    <input type="text" id="dateFrom" name="dateFrom" class="form-control col-sm-2" required value="<?php echo $defaultFromDate ?>"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <label for="dateTo" class="col-md-2 control-label">Date To:</label>
                            <div class="col-md-4">
                                <div class="input-group date">
                                    <input type="text"  id="dateTo" name="dateTo" class="form-control col-sm-2" required value="<?php echo $defaultToDate ?>"/>
                                </div>
                            </div>
                        </div>
                    </div>

Script is here

<script>
$(function () {
    $("#dateFrom, #dateTo").datepicker({
        minDate: 0,
        onSelect: function (selectedDate) {
            if (this.id == 'dateFrom') {
                var dateMin = $('#dateFrom').datepicker("getDate");
                var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 0);
                var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 120);
                $('#dateTo').datepicker("option", "minDate", rMin);
                $('#dateTo').datepicker("option", "maxDate", rMax);
            }
        }
    });
});
</script>

Hope someone can help me.

Answer 1

Your code is missing a JqueryUI theme. Try to add, for example:

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">

Working sample here