Browse Source

Add a demo for date validator

nghuuphuoc 11 years ago
parent
commit
00ec335d70
4 changed files with 320 additions and 63 deletions
  1. 159 0
      demo/date.html
  2. 80 31
      dist/js/bootstrapValidator.js
  3. 1 1
      dist/js/bootstrapValidator.min.js
  4. 80 31
      src/js/validator/date.js

+ 159 - 0
demo/date.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>BootstrapValidator demo</title>
+
+    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
+    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
+
+    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
+    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
+
+    <!-- Support datetime picker plugin: http://eonasdan.github.io/bootstrap-datetimepicker/ -->
+    <link rel="stylesheet" href="http://eonasdan.github.io/bootstrap-datetimepicker/styles/bootstrap-datetimepicker.min.css"/>
+    <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment-2.4.0.js"></script>
+    <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
+
+    <style type="text/css">
+    /* Override to make the feedback icons shown properly */
+    .bootstrap-validator-datetime .form-control-feedback {
+        right: -30px !important;
+    }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="row">
+            <!-- form: -->
+            <section>
+                <div class="col-lg-8 col-lg-offset-2">
+                    <div class="page-header">
+                        <h2>Date validator</h2>
+                    </div>
+
+                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
+                        <div class="form-group">
+                            <label class="col-lg-3 control-label">MM/DD/YYYY</label>
+                            <div class="col-lg-5">
+                                <input type="text" class="form-control" name="monthDayYear" />
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="col-lg-3 control-label">YYYY-DD-MM</label>
+                            <div class="col-lg-5">
+                                <input type="text" class="form-control" name="yearDayMonth" />
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="col-lg-3 control-label">MM/DD/YYYY h:m A</label>
+                            <div class="col-lg-5">
+                                <input type="text" class="form-control" name="monthDayYearTime" />
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="col-lg-3 control-label">YYYY-DD-MM h:m A</label>
+                            <div class="col-lg-5">
+                                <input type="text" class="form-control" name="yearDayMonthTime" />
+                            </div>
+                        </div>
+
+                        <!-- datetime picker -->
+                        <div class="form-group bootstrap-validator-datetime">
+                            <label class="col-lg-3 control-label"><a href="http://eonasdan.github.io/bootstrap-datetimepicker/">DateTime Picker</a> (MM/DD/YYYY h:m A)</label>
+                            <div class="col-lg-5">
+                                <div class="input-group date" id="datetimePicker">
+                                    <input type="text" class="form-control" name="datetimePicker" />
+                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
+                                </div>
+                                <span class="help-block">Choose a leap year</span>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <div class="col-lg-9 col-lg-offset-3">
+                                <button type="submit" class="btn btn-primary">Submit</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </section>
+            <!-- :form -->
+        </div>
+    </div>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    $('#datetimePicker').datetimepicker();
+
+    $('#defaultForm').bootstrapValidator({
+        message: 'This value is not valid',
+        feedbackIcons: {
+            valid: 'glyphicon glyphicon-ok',
+            invalid: 'glyphicon glyphicon-remove',
+            validating: 'glyphicon glyphicon-refresh'
+        },
+        fields: {
+            monthDayYear: {
+                validators: {
+                    date: {
+                        format: 'MM/DD/YYYY'
+                    }
+                }
+            },
+            yearDayMonth: {
+                validators: {
+                    date: {
+                        format: 'YYYY-DD-MM'
+                    }
+                }
+            },
+            monthDayYearTime: {
+                validators: {
+                    date: {
+                        format: 'MM/DD/YYYY h:m A'
+                    }
+                }
+            },
+            yearDayMonthTime: {
+                validators: {
+                    date: {
+                        format: 'YYYY-DD-MM h:m A'
+                    }
+                }
+            },
+            datetimePicker: {
+                validators: {
+//                    date: {
+//                        format: 'MM/DD/YYYY h:m A'
+//                    },
+                    callback: {
+                        callback: function(value, validator) {
+                            // m is moment object
+                            var m = new moment(value, 'MM/DD/YYYY h:m A', true);
+                            console.log(value, m.isValid());
+                            if (!m.isValid()) {
+                                return false;
+                            }
+                            var year = m.years();
+                            console.log(year);
+                            return (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0));
+                        },
+                        message: 'Chosen year is not a leap one'
+                    }
+                }
+            }
+        }
+    });
+
+    $('#datetimePicker').on('change.dp', function(e) {
+        // Validate the date when user change it
+        $('#defaultForm').data('bootstrapValidator').validateField('datetimePicker');
+    });
+});
+</script>
+</body>
+</html>

+ 80 - 31
dist/js/bootstrapValidator.js

@@ -689,9 +689,27 @@
          * @param {BootstrapValidator} validator The validator plugin instance
          * @param {jQuery} $field Field element
          * @param {Object} options Can consist of the following keys:
-         * - format: The date format.
-         * It is a combination of YYYY, MM, DD, and separators (which can be / or -)
-         * Default is MM/DD/YYYY
+         * - format: The date format. Default is MM/DD/YYYY
+         * Support the following formats:
+         *      YYYY/DD/MM
+         *      YYYY/DD/MM h:m A
+         *      YYYY/MM/DD
+         *      YYYY/MM/DD h:m A
+         *
+         *      YYYY-DD-MM
+         *      YYYY-DD-MM h:m A
+         *      YYYY-MM-DD
+         *      YYYY-MM-DD h:m A
+         *
+         *      MM/DD/YYYY
+         *      MM/DD/YYYY 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
          * - message: The invalid message
          * @returns {Boolean}
          */
@@ -700,56 +718,87 @@
             if (value == '') {
                 return true;
             }
+            // Determine the separator
             options.format = options.format || 'MM/DD/YYYY';
-
-            var separator = (options.format.indexOf('/') == -1) ? '-' : '/',
-                parts     = value.split(separator);
-            if (parts.length != 3) {
+            var separator = (options.format.indexOf('/') != -1)
+                            ? '/'
+                            : ((options.format.indexOf('-') != -1) ? '-' : null);
+            if (separator == null) {
                 return false;
             }
 
-            var d, m, y;
-            switch (options.format.toUpperCase().replace(/-/g, '/')) {
-                case 'YYYY/MM/DD':
-                    d = parts[2];
-                    m = parts[1];
-                    y = parts[0];
+            var month, day, year, minutes = null, hours = null, matches;
+            switch (true) {
+                case (separator == '/' && (matches = value.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/i)) && options.format == 'YYYY/DD/MM'):
+                case (separator == '-' && (matches = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i)) && options.format == 'YYYY-DD-MM'):
+                    year = matches[1]; day = matches[2]; month = matches[3];
+                    break;
+
+                case (separator == '/' && (matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/i)) && options.format == 'DD/MM/YYYY'):
+                case (separator == '-' && (matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/i)) && options.format == 'DD-MM-YYYY'):
+                    day = matches[1]; month = matches[2]; year = matches[3];
+                    break;
+
+                case (separator == '/' && (matches = value.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/i)) && options.format == 'YYYY/MM/DD'):
+                case (separator == '-' && (matches = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i)) && options.format == 'YYYY-MM-DD'):
+                    year = matches[1]; month = matches[2]; day = matches[3];
+                    break;
+
+                case (separator == '/' && (matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/i)) && options.format == 'MM/DD/YYYY'):
+                case (separator == '-' && (matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/i)) && options.format == 'MM-DD-YYYY'):
+                    month = matches[1]; day = matches[2]; year = matches[3];
                     break;
-                case 'YYYY/DD/MM':
-                    d = parts[1];
-                    m = parts[2];
-                    y = parts[0];
+
+                case (separator == '/' && (matches = value.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'YYYY/DD/MM h:m A'):
+                case (separator == '-' && (matches = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'YYYY-DD-MM h:m A'):
+                    year = matches[1]; day = matches[2]; month = matches[3]; hours = matches[4]; minutes = matches[5];
                     break;
-                case 'DD/MM/YYYY':
-                    d = parts[0];
-                    m = parts[1];
-                    y = parts[2];
+
+                case (separator == '/' && (matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'DD/MM/YYYY h:m A'):
+                case (separator == '-' && (matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'DD-MM-YYYY h:m A'):
+                    day = matches[1]; month = matches[2]; year = matches[3]; hours = matches[4]; minutes = matches[5];
                     break;
-                case 'MM/DD/YYYY':
-                    d = parts[1];
-                    m = parts[0];
-                    y = parts[2];
+
+                case (separator == '/' && (matches = value.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'YYYY/MM/DD h:m A'):
+                case (separator == '-' && (matches = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'YYYY-MM-DD h:m A'):
+                    year = matches[1]; month = matches[2]; day = matches[3]; hours = matches[4]; minutes = matches[5];
+                    break;
+
+                case (separator == '/' && (matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'MM/DD/YYYY h:m A'):
+                case (separator == '-' && (matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'MM-DD-YYYY h:m A'):
+                    month = matches[1]; day = matches[2]; year = matches[3]; hours = matches[4]; minutes = matches[5];
                     break;
+
                 default:
                     return false;
             }
 
-            d = parseInt(d, 10);
-            m = parseInt(m, 10);
-            y = parseInt(y, 10);
+            // Validate hours and minutes
+            if (hours && minutes) {
+                hours   = parseInt(hours, 10);
+                minutes = parseInt(minutes, 10);
+                if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) {
+                    return false;
+                }
+            }
+
+            // Validate day, month, and year
+            day   = parseInt(day, 10);
+            month = parseInt(month, 10);
+            year  = parseInt(year, 10);
 
-            if (y < 1000 || y > 9999 || m == 0 || m > 12) {
+            if (year < 1000 || year > 9999 || month == 0 || month > 12) {
                 return false;
             }
 
             var numDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
             // Update the number of days in Feb of leap year
-            if (y % 400 == 0 || (y % 100 != 0 && y % 4 == 0)) {
+            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
                 numDays[1] = 29;
             }
 
             // Check the day
-            return (d > 0 && d <= numDays[m - 1]);
+            return (day > 0 && day <= numDays[month - 1]);
         }
     };
 }(window.jQuery));

File diff suppressed because it is too large
+ 1 - 1
dist/js/bootstrapValidator.min.js


+ 80 - 31
src/js/validator/date.js

@@ -6,9 +6,27 @@
          * @param {BootstrapValidator} validator The validator plugin instance
          * @param {jQuery} $field Field element
          * @param {Object} options Can consist of the following keys:
-         * - format: The date format.
-         * It is a combination of YYYY, MM, DD, and separators (which can be / or -)
-         * Default is MM/DD/YYYY
+         * - format: The date format. Default is MM/DD/YYYY
+         * Support the following formats:
+         *      YYYY/DD/MM
+         *      YYYY/DD/MM h:m A
+         *      YYYY/MM/DD
+         *      YYYY/MM/DD h:m A
+         *
+         *      YYYY-DD-MM
+         *      YYYY-DD-MM h:m A
+         *      YYYY-MM-DD
+         *      YYYY-MM-DD h:m A
+         *
+         *      MM/DD/YYYY
+         *      MM/DD/YYYY 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
          * - message: The invalid message
          * @returns {Boolean}
          */
@@ -17,56 +35,87 @@
             if (value == '') {
                 return true;
             }
+            // Determine the separator
             options.format = options.format || 'MM/DD/YYYY';
-
-            var separator = (options.format.indexOf('/') == -1) ? '-' : '/',
-                parts     = value.split(separator);
-            if (parts.length != 3) {
+            var separator = (options.format.indexOf('/') != -1)
+                            ? '/'
+                            : ((options.format.indexOf('-') != -1) ? '-' : null);
+            if (separator == null) {
                 return false;
             }
 
-            var d, m, y;
-            switch (options.format.toUpperCase().replace(/-/g, '/')) {
-                case 'YYYY/MM/DD':
-                    d = parts[2];
-                    m = parts[1];
-                    y = parts[0];
+            var month, day, year, minutes = null, hours = null, matches;
+            switch (true) {
+                case (separator == '/' && (matches = value.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/i)) && options.format == 'YYYY/DD/MM'):
+                case (separator == '-' && (matches = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i)) && options.format == 'YYYY-DD-MM'):
+                    year = matches[1]; day = matches[2]; month = matches[3];
+                    break;
+
+                case (separator == '/' && (matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/i)) && options.format == 'DD/MM/YYYY'):
+                case (separator == '-' && (matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/i)) && options.format == 'DD-MM-YYYY'):
+                    day = matches[1]; month = matches[2]; year = matches[3];
                     break;
-                case 'YYYY/DD/MM':
-                    d = parts[1];
-                    m = parts[2];
-                    y = parts[0];
+
+                case (separator == '/' && (matches = value.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/i)) && options.format == 'YYYY/MM/DD'):
+                case (separator == '-' && (matches = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i)) && options.format == 'YYYY-MM-DD'):
+                    year = matches[1]; month = matches[2]; day = matches[3];
                     break;
-                case 'DD/MM/YYYY':
-                    d = parts[0];
-                    m = parts[1];
-                    y = parts[2];
+
+                case (separator == '/' && (matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/i)) && options.format == 'MM/DD/YYYY'):
+                case (separator == '-' && (matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/i)) && options.format == 'MM-DD-YYYY'):
+                    month = matches[1]; day = matches[2]; year = matches[3];
                     break;
-                case 'MM/DD/YYYY':
-                    d = parts[1];
-                    m = parts[0];
-                    y = parts[2];
+
+                case (separator == '/' && (matches = value.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'YYYY/DD/MM h:m A'):
+                case (separator == '-' && (matches = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'YYYY-DD-MM h:m A'):
+                    year = matches[1]; day = matches[2]; month = matches[3]; hours = matches[4]; minutes = matches[5];
                     break;
+
+                case (separator == '/' && (matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'DD/MM/YYYY h:m A'):
+                case (separator == '-' && (matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'DD-MM-YYYY h:m A'):
+                    day = matches[1]; month = matches[2]; year = matches[3]; hours = matches[4]; minutes = matches[5];
+                    break;
+
+                case (separator == '/' && (matches = value.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'YYYY/MM/DD h:m A'):
+                case (separator == '-' && (matches = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'YYYY-MM-DD h:m A'):
+                    year = matches[1]; month = matches[2]; day = matches[3]; hours = matches[4]; minutes = matches[5];
+                    break;
+
+                case (separator == '/' && (matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'MM/DD/YYYY h:m A'):
+                case (separator == '-' && (matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})\s+(\d{1,2}):(\d{1,2})\s+(AM|PM)$/i)) && options.format == 'MM-DD-YYYY h:m A'):
+                    month = matches[1]; day = matches[2]; year = matches[3]; hours = matches[4]; minutes = matches[5];
+                    break;
+
                 default:
                     return false;
             }
 
-            d = parseInt(d, 10);
-            m = parseInt(m, 10);
-            y = parseInt(y, 10);
+            // Validate hours and minutes
+            if (hours && minutes) {
+                hours   = parseInt(hours, 10);
+                minutes = parseInt(minutes, 10);
+                if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) {
+                    return false;
+                }
+            }
+
+            // Validate day, month, and year
+            day   = parseInt(day, 10);
+            month = parseInt(month, 10);
+            year  = parseInt(year, 10);
 
-            if (y < 1000 || y > 9999 || m == 0 || m > 12) {
+            if (year < 1000 || year > 9999 || month == 0 || month > 12) {
                 return false;
             }
 
             var numDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
             // Update the number of days in Feb of leap year
-            if (y % 400 == 0 || (y % 100 != 0 && y % 4 == 0)) {
+            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
                 numDays[1] = 29;
             }
 
             // Check the day
-            return (d > 0 && d <= numDays[m - 1]);
+            return (day > 0 && day <= numDays[month - 1]);
         }
     };
 }(window.jQuery));