<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> <form class="col-md-4 offset-md-4 mt-5"> <form class="mr-3 ml-3"> <input type="text" class="form-control custom_field height-30 daterange text-center w-100" value="Jan, 2020 - Dec, 2020"> </form> </div> <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> <script> $(function() { $('.daterange').daterangepicker({ opens: 'left', locale: { format: 'DD MMM, YYYY' } }, function(start, end, label) { console.log("A new date selection was made: " + start.format('DD-MM-YYYY') + ' to ' + end.format('DD-MM-YYYY')); }); }); </script>

.applyBtn { background-color: #630072; border: 1px solid #33013b; } .daterangepicker td.in-range { background-color: #f0cff5; } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #630072; }