JSFiddle - React, Tailwind, and code Playground

by Kirti Vishwakarma

HTML

<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css">
<script src="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css&quot;"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="bootstrap-iso">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <form class="form-horizontal" method="post">
                    <div class="form-group ">
                        <label class="control-label col-sm-2 col-xs-12 requiredField" for="date">
                            Date
                            <span class="asteriskField">
                                *
                            </span>
                        </label>
                        <div class="col-md-3 col-xs-5">
                            <div class="input-group">
                                <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" />
                                <div class="input-group-addon">
                                <i class="glyphicon glyphicon-calendar">
                                    </i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10 col-sm-offset-2">
                            <button class="btn btn-primary " name="submit" type="submit">
                                Submit
                            </button>
                        </div>
     ...

CSS

.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form {
        font-family: Arial, Helvetica, sans-serif;
        color: black;
    }

        .bootstrap-iso form button, .bootstrap-iso form button:hover {
            color: white !important;
        }

    .asteriskField {
        color: red;
    }

JavaScript

$(document).ready(function(){
		var date_input=$('input[name="date"]' ); //our date input has the name "date"
		var container=$('form').length>0 ? $('.bootstrap-iso form').parent() : "body";
		date_input.datepicker({
			format: 'mm/dd/yyyy',
			container: container,
			todayHighlight: true,
			autoclose: true,
		})
	})