JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<form id="contactForm" runat="server" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">File Name</label>
<div class="col-md-6 bs-example">
<input type="file" class="form-control" name="uploadfile" />
<asp:Label ID="Label3" runat="server" Text="Navigate to the file you wish to upload" CssClass="label_under_text"></asp:Label>
</div>
</div>
<div class="date-form">
<label class="col-md-3 control-label">Pay Date</label>
<div class="col-md-6 bs-example">
<div class="input-group">
<label for="PayDate" class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span></label>
<input type="text" id="PayDate" name="PayDate" class="form-control date-picker" />
</div>
</div>
</div>
<br />
<br />
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
JavaScript
$(document).ready(function() {
$(".date-picker").datepicker();
$('#contactForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uploadfile: {
validators: {
notEmpty: {
message: 'You must select a valid payroll file to upload'
},
file: {
extension: 'txt,xls,csv',
type: 'text/plain,application/vnd.ms-excel,text/csv'
}
}
},
PayDate: {
validators: {
notEmpty: {
message: 'The Pay Date is required and cannot be empty'
},
date: {
format: 'MM/DD/YYYY',
message: 'The format is dd/mm/yyyy'
}
}
}
}
});
$('.date-picker').on('changeDate show', function(e) {
$('#contactForm').bootstrapValidator('revalidateField', 'PayDate');
});
});