JSFiddle - React, Tailwind, and code Playground

by Issaki1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<form id="dataForm" role="form" class="form-horizontal">
    <div class="form-group col-md-12">
        <label class="control-label col-md-4" for="startDateInput">Start Date</label>
        <div class="col-md-7">
            <div class="input-group date" style="max-width: 280px" data-provide="datepicker">
                <input type="text" class="form-control" id="startDateInput" name="startDateInput">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group col-md-12">
        <label class="control-label col-md-4" for="endDateInput">End Date</label>
        <div class="col-md-7">
            <div class="input-group date" style="max-width: 280px" data-provide="datepicker">
                <input type="text" class="form-control" id="endDateInput" name="endDateInput">

                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group col-md-12">
        <label class="control-label col-md-1"></label>
        <div class="col-md-10">
            <div class="pull-right">
                <input type="button" class="btn btn-primary" value="Save"...

JavaScript

$('.date').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true,
        todayHighlight: true
    });

    $.validator.addMethod("endDate", function (value, element, params) {
        var startDate = $('#startDateInput').val();
        var endDate = value;
        return startDate < endDate || value == "";
    }, '*End date must be after start date');

    $('#dataForm').validate({
        rules: {
            startDateInput: {
                required: true
            },
            endDateInput: {
                endDate: true
            }
        }
    });

    $('#saveButton').on('click', function () {

        if ($('#dataForm').valid() == true)
            alert('hi');
    });