Validators / date

Validate a date.

Options

Option	HTML attribute	Type	Description
`format`^*	`data-bv-date-format`	String	The date format. It is `MM/DD/YYYY`, by default
`message`	`data-bv-date-message`	String	The error message
`separator`	`data-bv-date-separator`	String	Used to separate the day, month, and year. It is `/`, by default

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

Section	Token	Separator
Date	DD, MM, YYYY	Defined by the `separator` option. Most popular examples are a slash (/), hyphen (-), or dot (.)
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	Required
MM	Month number	Yes
DD	Day of month	Yes
YYYY	4 digit year	Yes
h	12 hour time	No
m	Minutes	No
s	Seconds	No
A	AM/PM	No

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.

Leap year

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

Basic

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>

$(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'
                    }
                }
            }
        }
    });
});

Datetime picker

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

<!-- Required CSS and JS -->
<link href="/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script src="/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

<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>

$(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').bootstrapValidator('revalidateField', 'meeting');
        });
});

Custom format

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

<!-- Include the momentjs library to use later -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>

<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>

$(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);
                        }
                    }
                }
            }
        }
    });
});

Date range

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.

<!-- Include the momentjs library to use later -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>

<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>

$(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');
                        }
                    }
                }
            }
        }
    });
});