<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 ----------> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.js"></script> <div class="container"> <div class="row"> <!-- this-snippet is a re-work of another one from Bootsnipp but I added the time elements -a very important addon --> <div class="text-center" style="max-width:540px;"> <div class="panel panel-default mypanel"> <div class="panel-header"> <form class="form-horizontal well" id="zip-form" action="" method="POST" onsubmit='return display()';> <label class="control-label"><h5>Date and Time of Event Please.</h5></label> </div> <div class="panel-body"> <div class="date-picker" data-date="2016-04-22" style="text-align:center;"> <div class="date-container"> Date<br> <h3 class="date"> <span data-toggle="datepicker" data-method="subtract" data-type="d" class="fa fa-angle-left lefty"></span> <span class="text">17th</span> <span data-toggle="datepicker" data-method="add" data-type="d" class="fa fa-angle-right righty"></span> </h3> <h2 class="month" style="min-width:148px;"> <span data-toggle="datepicker" data-method="subtract" data-type="M" class="fa fa-angle-left lefty"></span> <span class="text">December</span> <span data-toggle="datepicker" data-method="add" data-type="M" class="fa fa-angle-right righty"></span> </h2> <h3 class="year"> <span data-toggle="datepicker" data-method="subtract" data-type="y" class="fa fa-angle-left lefty"></span> <span class="text">2014</span> <span data-toggle="datepicker" data-method="add" data-type="y" class="fa fa-angle-right righty"></span> </h3> <hr>Time<br> <h3 class="hour"> <span data-toggle="datepicker" data-method="subtract" data-type="H" class="fa fa-angle-down lefty"></span> <span class="text">12</span> <span data-toggle="datepicker" data-method="add" data-type="H" class="fa fa-angle-up righty"></span> </h3> <h3 class="minute"> <span data-toggle="datepicker" data-method="subtract" data-type="m" class="fa fa-angle-down lefty"></span> <span class="text">00</span> <span data-toggle="datepicker" data-method="add" data-type="m" class="fa fa-angle-up righty"></span> </h3> <input type="hidden" id="dateinput" name="dateof"></input> </div> </div> </div> <div class="panel-footer"> <div class="form-group"> <input class="btn btn-default" type="button" value="Submit" onclick="updateTxt()"> </div> </form> </div> </div><!-- ends panel--> </div> </div> </div>

.date-picker,.date-container { position: relative; display: inline-block;color: rgb(75, 77, 78); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .date-container {margin-top: 0; padding-top: 0; padding: 10px;} .date-container .text{margin-left:12px;margin-right:12px; display: inline;} .date-picker span.fa { position: absolute; cursor: pointer;}.date-picker span.fa[data-method="subtract"] { left: 0px;} .date-picker span.fa[data-method="add"] { right: 0px;} .fa.lefty{color:maroon;}.fa.righty{color:green;} @media (min-width: 768px) and (max-width: 1010px) {.date-picker h2{font-size: 1.5em; font-weight: 400; } .date-picker h4 { font-size: 1.1em;}.date-picker span.fa {font-size: 3em; }} .panel.panel-default.mypanel{box-shadow: 0 1px 2px #888;} /* no idea of why Bootstrap does not honor the below to remove border radius - could be bootstrap js */ .panel.mypanel .panel-header{border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important;}

$(document).ready(function() { $('.date-picker').each(function () { var $datepicker = $(this), cur_date = ($datepicker.data('date') ? moment($datepicker.data('date'), "YYYY/MM/dd") : moment()); function updateDisplay(cur_date) { $('#dateinput').val(cur_date); $datepicker.find('.date-container > .date > .text').text(cur_date.format('Do')); $datepicker.find('.date-container > .month > .text').text(cur_date.format('MMMM')); $datepicker.find('.date-container > .year > .text').text(cur_date.format('YYYY')); $datepicker.find('.date-container > .hour > .text').text(cur_date.format('HH')); $datepicker.find('.date-container > .minute > .text').text(cur_date.format('mm')); $datepicker.data('date', cur_date.format('YYYY/MM/DD HH:mm')); } updateDisplay(moment()); $datepicker.on('click', '[data-toggle="datepicker"]', function(event) { event.preventDefault(); var cur_date = moment($(this).closest('.date-picker').data('date'), "YYYY/MM/DD HH:mm"), type = ($(this).data('type') ? $(this).data('type') : "date"), method = ($(this).data('method') ? $(this).data('method') : "add"), amt = ($(this).data('amt') ? $(this).data('amt') : 1); if (method == "add") { var duration = moment.duration(1,type); cur_date = cur_date.add(duration); }else if (method == "subtract") { cur_date = cur_date.subtract(1,type); } updateDisplay(cur_date); }); }); }); function updateTxt() { var field1 = document.getElementById('dateinput').value; alert(field1); }