Datepicker

Basic Date Picker
Show Code
                    
        <input class="form-control singledatepicker w-100" name="singledatepicker" value="">
                    
                    
        <!-- Script -->
        <script>
        $('input[class~=singledatepicker]').daterangepicker({
        singleDatePicker: true
        });
        </script>
                    
                  
Date Range Picker
Show Code
                    
        <input class="form-control rangedatepicker w-100" value="">
                    
                    
        <!-- Script -->
        <script>
        $('input[class~=rangedatepicker]').daterangepicker();
        </script>
                    
                  
Input Group
Show Code
                    
        <div class="input-group mb-3 w-100">
        <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1"><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
        <input type="text" class="form-control singledatepicker" placeholder="">
        </div>
                    
                    
        <!-- Script -->
        <script>
        $('input[class~=singledatepicker]').daterangepicker({
        singleDatePicker: true
        });
        </script>
                    
                  
Time Picker
Show Code
                    
        <input class="form-control timepicker" name="timepicker" value="">
                    
                    
        <!-- Script -->
        <script>
        $('input[class~=timepicker]').daterangepicker({
        singleDatePicker: true,
        timePicker: true,
        timePicker24Hour: true
        });

        $('input[class~=timepicker]').on('apply.daterangepicker', function(ev, picker) {
        const date = picker.startDate.format('MM/DD/YYYY HH:mm');
        $(this).val(date);
        });
        // Set Default
        $('input[class~=timepicker]').val('01/01/2020 12:00');
        </script>