CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
pceccon
pceccon

Reputation: 9844

bootstrapValidator datepicker

I have a page with two date pickers, and I have to validate both of them. This is a demo code of index.html:

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
            <!-- ###DatePicker### -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/js/bootstrapValidator.min.js"></script>
            <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/css/bootstrapValidator.min.css" rel="stylesheet"/>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
            <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
            <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
            <!-- ################ -->
            <!-- ####Bootstrap### -->
            <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
            <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
            <!-- ################ -->
            <!-- #####Custom##### -->          
            <script src="Scripts/datepicker.js"></script>            
            <link rel="stylesheet" href="CSS/dashboard.css" />
            <!-- ################ -->
        </head>
        <body>
            <!-- Top bar -->
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">TEST PAGE</a>
                    </div>
                </div>
            </nav>

            <!-- Content -->
            <div class="container-fluid">
                <!-- Right Panel -->
                <div class="row">
                    <div class="col-sm-3 col-md-2 sidebar"> 
                        <!-- Start Date -->
                        <form id="startDate" method="post" class="dateRangeForm form-vertical">
                            <div class="form-group">
                                <label class="control-label">Start Date:</label>
                                <br></br>
                                <div class="date">
                                    <div class="input-group input-append date dateRangePicker">
                                        <input type="text" class="form-control" name="date" />
                                        <span class="input-group-addon add-on">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        <!-- End Date -->

                            <div class="form-group">
                                <label class="control-label">End Date:</label>
                                <br></br>
                                <div class="date">
                                    <div class="input-group input-append date dateRangePicker">
                                        <input type="text" class="form-control" name="date" />
                                        <span class="input-group-addon add-on">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-default">Update Data</button>
                            </div>
                        </form>
                    </div>
                </div>
        </body>
</html>

And this is datepicker.js:

// http://formvalidation.io/examples/bootstrap-datepicker/

$(document).ready(function() 
{
    $('.dateRangePicker').datepicker({ dateFormat: 'mm/dd/yyyy'}).datepicker("setDate", new Date());

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if (dd < 10) 
        dd='0'+dd

    if (mm < 10) 
        mm='0'+mm

    today = mm+'/'+dd+'/'+yyyy;

    $('.dateRangePicker')
        .datepicker({
            format: 'mm/dd/yyyy',
            startDate: '01/01/2010',
            endDate: today
        })
        .on('changeDate', function(e) {
            // Revalidate the date field
            $('.dateRangeForm').bootstrapValidator('revalidateField', 'date');
        });

    $('.dateRangeForm').bootstrapValidator({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            date: {
                validators: {
                    notEmpty: {
                        message: 'Required field'
                    },
                    date: {
                        format: 'MM/DD/YYYY',
                        min: '01/01/2010',
                        max: today,
                        message: 'Invalid date'
                    }
                }
            }
        }
    });
});

When I try to run the page, I have the following error when picking date:

TypeError: undefined is not an object (evaluating 'f[c].apply')
(anonymous function)bootstrapValidator.min.js:11:12426
eachjquery-2.1.0.min.js:1:2881
eachjquery-2.1.0.min.js:1:822
bootstrapValidatorbootstrapValidator.min.js:11:12269
(anonymous function)datepicker.js:28
dispatchjquery-2.1.0.min.js:2:6060
handlejquery-2.1.0.min.js:2:2835
triggerjquery-2.1.0.min.js:2:5168
(anonymous function)jquery-2.1.0.min.js:2:11007
eachjquery-2.1.0.min.js:1:2881
eachjquery-2.1.0.min.js:1:822
triggerjquery-2.1.0.min.js:2:10980
_triggerbootstrap-datepicker.min.js:1:5750
_setDatebootstrap-datepicker.min.js:1:17438
clickbootstrap-datepicker.min.js:1:16930
fjquery-2.1.0.min.js:1:3717
dispatchjquery-2.1.0.min.js:2:6060
handlejquery-2.1.0.min.js:2:2835

How do I solve this?

Thank you.

Upvotes: 1

Views: 2346

Answers (1)

Stefano Castriotta
Stefano Castriotta

Reputation: 2913

Change:

$('.dateRangeForm').bootstrapValidator('revalidateField', 'date');

To:

$('.dateRangeForm').bootstrapValidator('updateStatus', 'date', 'NOT_VALIDATED')
    .bootstrapValidator('validateField', 'date');

JsFiddle: https://jsfiddle.net/n6hgwq5h/1/

Upvotes: 1

Related Questions