"Interface: Dates"
Bootstrap 4.1.1 Snippet by Shobhan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <div class="navbar-brand navbar-brand-centered">Transfer My Claim</div> </div> </div><!-- /.container-fluid --> </nav> <div class="query-container"> <div class="stepwizard"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" type="button" class="btn btn-success btn-circle"></a> <p>Dates</p> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"></a> <p>Status</p> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"></a> <p>Position</p> </div> <div class="stepwizard-step"> <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled"></a> <p>Consent</p> </div> </div> </div> <form role="form"> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12"> <h4>Please provide the claim dates</h4> <label>Loss/Incident Date?</label> <div class="row"> <div class="col-xs-4"> <div class="form-group"> <label for="incidentdateday">Day</label> <input type="text" name="incidentdateday" id="incidentdateday" required="required" class="form-control"/> </div> </div> <div class="col-xs-4"> <div class="form-group"> <label for="incidentdatemonth">Month</label> <input type="text" name="incidentdatemonth" id="incidentdatemonth" required="required" class="form-control"/> </div> </div> <div class="col-xs-4"> <div class="form-group"> <label for="incidentdateyear">Year</label> <input type="text" name="incidentdateyear" id="incidentdateyear" required="required" class="form-control"/> </div> </div> </div> <label>Limitation Date?</label> <div class="row"> <div class="col-xs-4"> <div class="form-group"> <label for="limitationdateday">Day</label> <input type="text" name="limitationdateday" id="limitationdateday" required="required" class="form-control"/> </div> </div> <div class="col-xs-4"> <div class="form-group"> <label for="limitationdatemonth">Month</label> <input type="text" name="limitationdatemonth" id="limitationdatemonth" required="required" class="form-control"/> </div> </div> <div class="col-xs-4"> <div class="form-group"> <label for="limitationdateyear">Year</label> <input type="text" name="limitationdateyear" id="limitationdateyear" required="required" class="form-control"/> </div> </div> </div> <label>Next Court Date?</label> <div class="row"> <div class="col-xs-4"> <div class="form-group"> <label for="nextcourtdateday">Day</label> <input type="text" name="nextcourtdateday" id="nextcourtdateday" required="required" class="form-control"/> </div> </div> <div class="col-xs-4"> <div class="form-group"> <label for="nextcourtdatemonth">Month</label> <input type="text" name="nextcourtdatemonth" id="nextcourtdatemonth" required="required" class="form-control"/> </div> </div> <div class="col-xs-4"> <div class="form-group"> <label for="nextcourtdateyear">Year</label> <input type="text" name="nextcourtdateyear" id="nextcourtdateyear" required="required" class="form-control"/> </div> </div> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h4>Why is the status of your claim?</h4> <div class="form-group"> <label for="name">Current Solicitors</label> <input type="text" required="required" class="form-control"/> </div> <label>Funding Arrangement?</label> <div class="funkyradio"> <div class="funkyradio-primary"> <input type="radio" name="type" id="radio1" required="required" /> <label for="radio1">CFA</label> </div> <div class="funkyradio-primary"> <input type="radio" name="type" id="radio2" required="required" /> <label for="radio2">DBA</label> </div> <div class="funkyradio-primary"> <input type="radio" name="type" id="radio3" required="required" /> <label for="radio3">PRIVATE</label> </div> <div class="funkyradio-primary"> <input type="radio" name="type" id="radio4" required="required" /> <label for="radio4">LEI</label> </div> <div class="funkyradio-primary"> <input type="radio" name="type" id="radio5" required="required" /> <label for="radio5">Other</label> </div> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12"> <h4>What is the current position?</h4> <div class="funkyradio"> <div class="funkyradio-primary"> <input type="radio" name="reason" id="radio6" required="required" /> <label for="radio6">Pre-Action</label> </div> <div class="funkyradio-primary"> <input type="radio" name="reason" id="radio7" required="required" /> <label for="radio7">Pproceedings</label> </div> <div class="funkyradio-primary"> <input type="radio" name="reason" id="radio8" required="required" /> <label for="radio8">Allocated To A Track</label> </div> <div class="funkyradio-primary"> <input type="radio" name="reason" id="radio9" required="required" /> <label for="radio9">Dismissed - Appeal</label> </div> <div class="funkyradio-primary"> <input type="radio" name="reason" id="radio10" required="required" /> <label for="radio10">I Do Not Know</label> </div> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" id="gotoConsent">Next</button> </div> </div> </div> <div class="row setup-content" id="step-4"> <div class="col-xs-12"> <div class="col-md-12"> <h4 class="claim-heading">Consent</h4> <table class="table table-striped table-bordered table-condensed"> <tr> <td colspan="2">Claim Transfer Details Summary</td> </tr> <tr> <td>Loss / Incident Date</td> <td>-</td> </tr> <tr> <td>Limitation Date</td> <td>-</td> </tr> <tr> <td>Next Court Date</td> <td>-</td> </tr> <tr> <td>Current Solicitors</td> <td>-</td> </tr> <tr> <td>Funding Arrangement</td> <td>-</td> </tr> <tr> <td>Telephone Number</td> <td>-</td> </tr> <tr> <td>Current Position</td> <td>-</td> </tr> </table> <button class="btn btn-primary nextBtn btn-lg btn-block" type="submit" >Consent & Submit</button> </div> </div> </div> </form> </div>
body{ margin-top:0px; } .navbar-brand-centered { display: block; width: auto; text-align: center; margin-top:0; padding: 0px !important; } .navbar>.container .navbar-brand-centered, .navbar>.container-fluid .navbar-brand-centered { margin-left: -80px; } .stepwizard-step p { margin-top: 3px; font-size: 12px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .funkyradio div { clear: both; overflow: hidden; } .funkyradio label { width: 100%; border-radius: 3px; border: 1px solid #D1D3D4; font-weight: normal; } .funkyradio input[type="radio"]:empty, .funkyradio input[type="checkbox"]:empty { display: none; } .funkyradio input[type="radio"]:empty ~ label, .funkyradio input[type="checkbox"]:empty ~ label { position: relative; line-height: 2.5em; text-indent: 1em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .funkyradio input[type="radio"]:empty ~ label:before, .funkyradio input[type="checkbox"]:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ''; /*width: 2.5em;*/ /*background: #D1D3D4;*/ border-radius: 3px 0 0 3px; } .funkyradio input[type="radio"]:hover:not(:checked) ~ label, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label { color: #888; } .funkyradio input[type="radio"]:hover:not(:checked) ~ label:before, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before { content: ' '; text-indent: .9em; color: #C2C2C2; } .funkyradio input[type="radio"]:checked ~ label, .funkyradio input[type="checkbox"]:checked ~ label { color: #000; } .funkyradio input[type="radio"]:checked ~ label, .funkyradio input[type="checkbox"]:checked ~ label { content: ' '; text-indent: .9em; color: #fff; background-color: #ccc; } .funkyradio input[type="radio"]:focus ~ label, .funkyradio input[type="checkbox"]:focus ~ label { box-shadow: 0 0 0 3px #999; } .funkyradio-default input[type="radio"]:checked ~ label, .funkyradio-default input[type="checkbox"]:checked ~ label { color: #333; background-color: #ccc; } .funkyradio-primary input[type="radio"]:checked ~ label, .funkyradio-primary input[type="checkbox"]:checked ~ label { color: #fff; background-color: rgba(126, 148, 69,.5); } .funkyradio-success input[type="radio"]:checked ~ label, .funkyradio-success input[type="checkbox"]:checked ~ label { color: #fff; background-color: #5cb85c; } .funkyradio-danger input[type="radio"]:checked ~ label, .funkyradio-danger input[type="checkbox"]:checked ~ label { color: #fff; background-color: #d9534f; } .funkyradio-warning input[type="radio"]:checked ~ label, .funkyradio-warning input[type="checkbox"]:checked ~ label { color: #fff; background-color: #f0ad4e; } .funkyradio-info input[type="radio"]:checked ~ label, .funkyradio-info input[type="checkbox"]:checked ~ label { color: #fff; background-color: #5bc0de; } .stepwizard-row .btn { padding: 5px; } .btn { box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28); } .btn-success { background-color: #7e9445 !important; border-color: #7e9445 !important; } .nextBtn { background-color: #548235 !important; border-color: #444 !important; padding: 5px 30px !important; font-size: 14px !important; letter-spacing: 1px; } .nextBtn:focus, .btn-success.focus, .btn-success:focus { box-shadow: 0 0 0 0.2rem rgba(126,148,69,.5); } .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(126,148,69,.5); } .form-control:focus { border-color: #7e9445 !important; box-shadow: none !important; } h4 { font-size: 15px !important; } .query-container { width: 500px; margin: 0 auto; border: 1px solid #D1D3D4; padding: 35px; } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: 1 !important; } td { width: 1%; padding: 3px 5px !important; font-size: 14px; border: 1px solid #fff; } tr:nth-child(odd) {background: #f2f2f2} tr:nth-child(even) {background: #e9ebf5} @media only screen and (max-width: 550px) { .query-container { width: 80%; margin: 0 auto; border: 1px solid #D1D3D4; padding: 35px; } }
$(document).ready(function () { var navListItems = $('div.setup-panel div a'), allWells = $('.setup-content'), allNextBtn = $('.nextBtn'); allWells.hide(); navListItems.click(function (e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasClass('disabled')) { navListItems.removeClass('btn-success').addClass('btn-default'); $item.addClass('btn-success'); allWells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); allNextBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), curInputs = curStep.find("input[type='text'],input[type='radio'],input[type='email'],input[type='number'],input[type='url']"), isValid = true; $(".form-group").removeClass("has-error"); for(var i=0; i<curInputs.length; i++){ if (!curInputs[i].validity.valid){ isValid = false; $(curInputs[i]).closest(".form-group").addClass("has-error"); } } if (isValid) nextStepWizard.removeAttr('disabled').trigger('click'); }); $('div.setup-panel div a.btn-success').trigger('click'); $('#gotoConsent').click(function(){ $('#step-4').show(); }) });

Related: See More


Questions / Comments: