Jquery – DateRangePicker Calendar rendering wrong

I’m using daterangepicker to select a range of dates. While everything works fine, the calendar ui which renders to choose dates does not display the dates in the right order.

Here is an image for the calendar for the month of July rendered by daterangepicker.

1st of July starts from Saturday but in the calendar it’s wrong and the rest of the dates are shifted down weirdly.

Below is my daterangepicker settings.

Edit added js/css based on the comments

$(function() {

  var start = moment().subtract(29, 'days');
  var end = moment();

  function cb(start, end) {
    $('#reportrange input').html(start + ' - ' + end);
  }

  $('#reportrange').daterangepicker({
    locale: {
      "format": "DD/MM/YYYY",
    },
    startDate: start,
    endDate: end,
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  }, cb);

  cb(start, end);
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input type="text" id="reportrange" value="01/01/2018 - 01/15/2018" />

below is the order of files as included in my project.

<script src="~/js/jquery-3.6.0.js"></script>
<script src="~/js/1.13.1-jquery-ui.js"></script>
<script src="~/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="~/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="~/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<!-- Page level custom scripts -->

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="~/js/Common.js"></script>
<script src="~/js/alertify.min.js"></script>  

HTML element to which dateRangePicker is attached

<div class="row">
            <div class="col-sm-10 mt-2">
                <div class="input-group  ml-4 mb-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                    <input class="form-control col-md-3" id="reportrange" placeholder="Updated On" />
                </div>
            </div>
 </div>