"DateTimePicker "
Bootstrap 3.3.0 Snippet by jeevan123456

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="content"> <h1>DateTimePicker Styles</h1> <label>Date & Time</label> <div class="input-group date-time" id="datetimepicker"> <input class="form-control"/><span class="input-group-addon"><span class="fa fa-calendar"></span></span> </div> <label>Date</label> <div class="input-group date" id="datepicker"> <input class="form-control"/><span class="input-group-addon"><span class="fa fa-calendar"></span></span> </div> <label>Time</label> <div class="input-group time" id="timepicker"> <input class="form-control"/><span class="input-group-addon"><span class="fa fa-clock-o"></span></span> </div> </div> </div> </div> </div>
.input-group { margin-bottom: 15px; .input-group-addon { background: #f8f8f8; &:last-child { border-radius: 0 3px 3px 0; } } } .form-control { border: 1px solid #ccc; border-radius: 3px; box-shadow: none; &:hover, &:focus, &:active { box-shadow: none; } &:focus { border: 1px solid #34495e; } } /*! * Datetimepicker for Bootstrap 3 * version : 4.17.37 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */ .bootstrap-datetimepicker-widget { list-style: none; } .bootstrap-datetimepicker-widget.dropdown-menu { margin: 2px 0; padding: 4px; width: 19em; } @media (min-width: 768px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 992px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 1200px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } .bootstrap-datetimepicker-widget.dropdown-menu:before, .bootstrap-datetimepicker-widget.dropdown-menu:after { content: ''; display: inline-block; position: absolute; } .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #cccccc; border-bottom-color: rgba(0, 0, 0, 0.2); top: -7px; left: 7px; } .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid white; top: -6px; left: 8px; } .bootstrap-datetimepicker-widget.dropdown-menu.top:before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #cccccc; border-top-color: rgba(0, 0, 0, 0.2); bottom: -7px; left: 6px; } .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid white; bottom: -6px; left: 7px; } .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before { left: auto; right: 6px; } .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after { left: auto; right: 7px; } .bootstrap-datetimepicker-widget .list-unstyled { margin: 0; } .bootstrap-datetimepicker-widget a[data-action] { padding: 6px 0; } .bootstrap-datetimepicker-widget a[data-action]:active { box-shadow: none; } .bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second { width: 54px; font-weight: bold; font-size: 1.2em; margin: 0; } .bootstrap-datetimepicker-widget button[data-action] { padding: 6px; } .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Increment Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Increment Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Decrement Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Decrement Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Show Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Show Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Toggle AM/PM"; } .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Clear the picker"; } .bootstrap-datetimepicker-widget .btn[data-action="today"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Set the date to today"; } .bootstrap-datetimepicker-widget .picker-switch { text-align: center; } .bootstrap-datetimepicker-widget .picker-switch::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Toggle Date and Time Screens"; } .bootstrap-datetimepicker-widget .picker-switch td { padding: 0; margin: 0; height: auto; width: auto; line-height: inherit; } .bootstrap-datetimepicker-widget .picker-switch td span { line-height: 2.5; height: 2.5em; width: 100%; } .bootstrap-datetimepicker-widget table { width: 100%; margin: 0; } .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { text-align: center; border-radius: 4px; } .bootstrap-datetimepicker-widget table th { height: 20px; line-height: 20px; width: 20px; } .bootstrap-datetimepicker-widget table th.picker-switch { width: 145px; } .bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover { background: none; color: #777777; cursor: not-allowed; } .bootstrap-datetimepicker-widget table th.prev::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Previous Month"; } .bootstrap-datetimepicker-widget table th.next::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Next Month"; } .bootstrap-datetimepicker-widget table thead tr:first-child th { cursor: pointer; } .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #eeeeee; } .bootstrap-datetimepicker-widget table td { height: 54px; line-height: 54px; width: 54px; } .bootstrap-datetimepicker-widget table td.cw { font-size: .8em; height: 20px; line-height: 20px; color: #777777; } .bootstrap-datetimepicker-widget table td.day { height: 20px; line-height: 20px; width: 20px; } .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover { background: #eeeeee; cursor: pointer; } .bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new { color: #777777; } .bootstrap-datetimepicker-widget table td.today { position: relative; } .bootstrap-datetimepicker-widget table td.today:before { content: ''; display: inline-block; border: solid transparent; border-width: 0 0 7px 7px; border-bottom-color: #337ab7; border-top-color: rgba(0, 0, 0, 0.2); position: absolute; bottom: 4px; right: 4px; } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover { background-color: #337ab7; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .bootstrap-datetimepicker-widget table td.active.today:before { border-bottom-color: #fff; } .bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover { background: none; color: #777777; cursor: not-allowed; } .bootstrap-datetimepicker-widget table td span { display: inline-block; width: 54px; height: 54px; line-height: 54px; margin: 2px 1.5px; cursor: pointer; border-radius: 4px; } .bootstrap-datetimepicker-widget table td span:hover { background: #eeeeee; } .bootstrap-datetimepicker-widget table td span.active { background-color: #337ab7; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .bootstrap-datetimepicker-widget table td span.old { color: #777777; } .bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover { background: none; color: #777777; cursor: not-allowed; } .bootstrap-datetimepicker-widget.usetwentyfour td.hour { height: 27px; line-height: 27px; } .bootstrap-datetimepicker-widget.wider { width: 21em; } .bootstrap-datetimepicker-widget .datepicker-decades .decade { line-height: 1.8em !important; } .input-group.date .input-group-addon { cursor: pointer; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /*! Datetimepicker End */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); @import url('https://fonts.googleapis.com/css?family=Pacifico'); body { background: #e0e0e0; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px; padding: 15px 0; } h1 { color: #333; font-family: 'Pacifico', cursive; font-size: 28px; line-height: 42px; margin: 0 0 15px; text-align: center; } .content { background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075), 0 2px 4px rgba(0, 0, 0, 0.0375); padding: 30px 30px 20px; } .bootstrap-datetimepicker-widget.dropdown-menu { border: 1px solid #34495e; border-radius: 0; box-shadow: none; margin: 10px 0 0 0; padding: 0; &.bottom:before, &.bottom:after { display: none; } table td, table th { border-radius: 0; } table td.active, table td.active:hover, table td span.active { background-color: #3498db; text-shadow: none; } table th { height: 28px; line-height: 28px; width: 37px; } table tr:first-of-type th { border-bottom: 1px solid #34495e; } table td.day { height: 24px; line-height: 24px; width: auto; } table td span { width: 25%; margin: 0; border-radius: 0; } .datepicker-months tbody tr td, .datepicker-years tbody tr td, .datepicker-decades tbody tr td { padding: 0; } .datepicker-decades tbody tr td { height: 27px; line-height: 27px; span { display: block; float: left; width: 50%; height: 27px; line-height: 27px; } } .timepicker-picker table td { padding: 0; width: 30%; height: 20px; line-height: 20px; &:nth-child(2) { width: 10%; } a, span, button { border: none; border-radius: 0; height: 40px; line-height: 40px; padding: 0; width: 100%; } span { color: #333; margin-top: -1px; } button { background-color: #fff; color: #333; font-weight: bold; font-size: 1.2em; &:hover { background-color: #eee; } } } .collapse + .picker-switch { border-bottom: 1px solid #34495e; } .in + .picker-switch { border: none; border-top: 1px solid #34495e; } .picker-switch td a { line-height: 38px; height: 38px; padding: 0; display: block; span { background: #496785; color: #fff; margin-top: -1px; line-height: 38px; height: 38px; width: 100%; &:hover { background: #34495e; } } } }
if (/Mobi/.test(navigator.userAgent)) { // if mobile device, use native pickers $(".date-time input").attr("type", "datetime-local"); $(".date input").attr("type", "date"); $(".time input").attr("type", "time"); } else { // if desktop device, use DateTimePicker $("#datetimepicker").datetimepicker({ icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", next: "fa fa-chevron-right", previous: "fa fa-chevron-left" } }); $("#datepicker").datetimepicker({ format: "L", icons: { next: "fa fa-chevron-right", previous: "fa fa-chevron-left" } }); $("#timepicker").datetimepicker({ format: "LT", icons: { up: "fa fa-chevron-up", down: "fa fa-chevron-down" } }); }

Related: See More


Questions / Comments: