Validators / date

Validate a date.

Option	Equivalent HTML attribute	Type	Description
`message`	`data-bv-date-message`	String	The error message
`format` (*)	`data-bv-date-format`	String	The date format. It is `MM/DD/YYYY`, by default

The format can combine date, time, and AM/PM indicator sections:

Section	Token	Separator
Date	DD, MM, YYYY	a slash (/) or hyphen (-)
Time	h, m, s	a colon (:)
AM/PM	A	n/a

The following table describes the token meanings, defined by momentjs, one of most popular Javascript datetime library:

Token	Description
MM	Month number
DD	Day of month
YYYY	4 digit year
h	12 hour time
m	Minutes
s	Seconds
A	AM/PM

Below are some example of possible formats:

YYYY/DD/MM
YYYY/DD/MM h
YYYY/DD/MM h A
YYYY/DD/MM h:m
YYYY/DD/MM h:m A
YYYY/DD/MM h:m:s
YYYY/DD/MM h:m:s A
YYYY-MM-DD
YYYY-MM-DD h:m A
DD/MM/YYYY
DD/MM/YYYY h:m A
MM-DD-YYYY
MM-DD-YYYY h:m A
DD-MM-YYYY
DD-MM-YYYY h:m A

It's possible to support other date format by using callback validator as shown in the Custom format example.

The date validator also checks the number of days in February of leap year. For example, 02/29/2000 is valid date, while 02/29/2001 is invalid one.

Example

The following form might be used in a profile setting page:

<form id="profileForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Birthday</label>
        <div class="col-lg-3">
            <input type="text" class="form-control" name="birthday" />
            <span class="help-block">YYYY/MM/DD</span>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#profileForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            birthday: {
                validators: {
                    date: {
                        format: 'YYYY/MM/DD',
                        message: 'The value is not a valid date'
                    }
                }
            }
        }
    });
});
</script>

Datetime Picker example

The form below is an example of using the date validator with Bootstrap Datetime Picker:

<!-- Required CSS -->
<link href="/bootstrap-validator/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<style type="text/css">
/* Override feedback icon position */
.form-horizontal .has-feedback .input-group .form-control-feedback {
    top: 0;
    right: -30px;
}
</style>

<form id="meetingForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Meeting time</label>
        <div class="col-lg-4">
            <div class="input-group date" id="datetimePicker">
                <input type="text" class="form-control" name="meeting" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <span class="help-block">MM/DD/YYYY h:m A</span>
        </div>
    </div>
</form>

<!-- Required JS -->
<script src="/bootstrap-validator/vendor/momentjs/moment.min.js"></script>
<script src="/bootstrap-validator/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function() {
    $('#datetimePicker').datetimepicker();

    $('#meetingForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            meeting: {
                validators: {
                    date: {
                        format: 'MM/DD/YYYY h:m A',
                        message: 'The value is not a valid date'
                    }
                }
            }
        }
    });

    $('#datetimePicker')
        .on('dp.change dp.show', function(e) {
            // Validate the date when user change it
            $('#meetingForm')
                // Get the bootstrapValidator instance
                .data('bootstrapValidator')
                // Mark the field as not validated, so it'll be re-validated when the user change date
                .updateStatus('meeting', 'NOT_VALIDATED', null)
                // Validate the field
                .validateField('meeting');
        });
});
</script>

Custom format example

This example illustrates the ability of validating date in custom format by using the callback validator and momentjs to parse/validate.

<form id="customFormatForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-5 control-label">What's US independence day?</label>
        <div class="col-lg-3">
            <input type="text" class="form-control" name="independenceDay" />
            <span class="help-block">MMM D (Sep 6, for example)</span>
        </div>
    </div>
</form>

<!-- Include the momentjs library to use later -->
<script src="/bootstrap-validator/vendor/momentjs/moment.min.js"></script>
<script>
$(document).ready(function() {
    $('#customFormatForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            independenceDay: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator) {
                            var m = new moment(value, 'MMMM D', true);
                            // Check if the input value follows the MMMM D format
                            if (!m.isValid()) {
                                return false;
                            }
                            // US independence day is July 4
                            return (m.months() == 6 && m.date() == 4);
                        }
                    }
                }
            }
        }
    });
});
</script>

Date range example

One more example illustrates how to use the callback validator and momentjs to check whether or not a date is in given range.

momentjs provides isBefore() and isAfter() methods which are exactly what we need.

<form id="rangeForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-6 control-label">Enter a date between 2000/01/01 and 2020/12/30</label>
        <div class="col-md-3">
            <input type="text" class="form-control" name="date" />
        </div>
    </div>
</form>

<!-- Include the momentjs library to use later -->
<script src="/bootstrap-validator/vendor/momentjs/moment.min.js"></script>
<script>
$(document).ready(function() {
    $('#rangeForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            date: {
                validators: {
                    date: {
                        message: 'The date is not valid',
                        format: 'YYYY/MM/DD'
                    },
                    callback: {
                        message: 'The date is not in the range',
                        callback: function(value, validator) {
                            var m = new moment(value, 'YYYY/MM/DD', true);
                            if (!m.isValid()) {
                                return false;
                            }
                            // Check if the date in our range
                            return m.isAfter('2000/01/01') && m.isBefore('2020/12/30');
                        }
                    }
                }
            }
        }
    });
});
</script>

Comments

If you want to report a bug, please submit the issue on Github. Do NOT post the issue here.

For a general question or feedback, use the form below.