Home » Javascript » How to validate daterange in one field with bootstrap validator

How to validate daterange in one field with bootstrap validator

Posted by: admin November 1, 2017 Leave a comment

Questions:

I imported BootstrapValidator in my simple HTML5 & Bootstrap 3.3.7 website.
Also, I added Date Range Picker for Bootstrap

Now, for example let’s say I have a piece of a HTML code:

<input type="text" name="datefilter" value="" />

<script type="text/javascript">
         $(document).ready(function() {
        AutoNumeric.multiple('.person', {
            minimumValue: '1',
            maximumValue: '100',
            decimalPlaces: '0'
        });

        $('input[name="daterange"]').daterangepicker({
            autoUpdateInput: false,
            autoApply: true,
            locale: {
                cancelLabel: 'Clear'
            }
        });

        $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        });

        $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });


        $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: '',
                invalid: '',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                daterange: {
                    // The hidden input will not be ignored
                    excluded: false,
                    validators: {
                        notEmpty: {
                            message: 'The date is required'
                        },
                        date: {
                            format: 'MM/DD/YYYY',
                            message: 'The date is not a valid'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required and can\'t be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                }
            }
        });
    });
</script>

Initially, the fields is empty, but when I click on it, and add some date, and click save button, it’s set to red.
Is there any other validation date in bootstrap validator?
Basically, I need a good validation (isEmpty()) for date range in only one filed.
Example: 27/10/2017 – 31/11/2017

Answers: