"Datetime Picker"
Bootstrap 4.0.0 Snippet by CreativeTim

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"> <link rel="stylesgeet" href="https://rawgit.com/creativetimofficial/material-kit/master/assets/css/material-kit.css"> </head> <body> <div class="container mt-5"> <div class="title"> <h3>Datetime Picker</h3> </div> <div class="row"> <div class="col-md-3"> <div class="form-group"> <label class="label-control">Datetime Picker</label> <input type="text" class="form-control datetimepicker" value="10/05/2016"> </div> <div class="form-group"> <label class="label-control">Date Picker</label> <input type="text" class="form-control datepicker" value="10/10/2016"> </div> <div class="form-group"> <label class="label-control">Time Picker</label> <input type="text" class="form-control timepicker" value="14:00"> </div> </div> </div> </div> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p> </footer> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> <script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/core/jquery.min.js"></script> <script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/core/bootstrap-material-design.min.js"></script> <script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/plugins/moment.min.js"></script> <script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/plugins/bootstrap-datetimepicker.js"></script> <script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/material-kit.js"></script> </body>
html *{ -webkit-font-smoothing: antialiased; } .title h3{ font-size: 25px !important; margin-top: 20px; margin-bottom: 10px; line-height: 1.4em !important; font-weight: 300; } /* inputs */ .container .bmd-form-group .bmd-label-static { top: .35rem; left: 0; font-size: .875rem; } .container .bmd-form-group .form-control, .bmd-form-group input::placeholder, .bmd-form-group label { line-height: 1.1; } .container .form-control, .is-focused .form-control { background-image: linear-gradient(0deg,#9c27b0 2px, rgba(156,39,176,0) 0),linear-gradient(0deg,#d2d2d2 1px,hsla(0,0%,82%,0) 0) !important; } .is-focused [class*=" bmd-label"], .is-focused [class^=bmd-label] { color: #9c27b0 !important; } .form-control { background: no-repeat bottom,50% calc(100% - 1px); background-size: 0 100%,100% 100%; border: 0; height: 36px; transition: background 0s ease-out; padding-left: 0; padding-right: 0; border-radius: 0; font-size: 14px !important; } /* dropdown */ .dropdown-menu.bootstrap-datetimepicker-widget.open { opacity: 1; transform: scale(1); top: 0; } .bootstrap-datetimepicker-widget.dropdown-menu { padding: 4px; width: 19em; } .bootstrap-datetimepicker-widget .list-unstyled { margin: 0; } .sr-only, .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after, .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after, .bootstrap-datetimepicker-widget .btn[data-action="today"]::after, .bootstrap-datetimepicker-widget .picker-switch::after, .bootstrap-datetimepicker-widget table th.prev::after, .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; } .bootstrap-datetimepicker-widget { list-style: none; } .bootstrap-datetimepicker-widget a:hover { box-shadow: none !important; } .bootstrap-datetimepicker-widget a .btn:hover { background-color: transparent; } .bootstrap-datetimepicker-widget.dropdown-menu { padding: 4px; width: 19em; } @media (min-width: 768px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 991px) { .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.bottom:before, .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { right: auto; left: 12px; } .bootstrap-datetimepicker-widget.dropdown-menu.top { margin-top: auto; margin-bottom: 27px; } .bootstrap-datetimepicker-widget.dropdown-menu.top.open { margin-top: auto; margin-bottom: 27px; } .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: 0; margin: 0; border-width: 0; background-color: transparent; color: #9c27b0; box-shadow: none; } .bootstrap-datetimepicker-widget a[data-action]:hover { background-color: transparent; } .bootstrap-datetimepicker-widget a[data-action]:hover span { background-color: #eee; color: #9c27b0; } .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: 40px; height: 40px; line-height: 40px; font-weight: 300; font-size: 1.125rem; margin: 0; border-radius: 50%; } .bootstrap-datetimepicker-widget button[data-action] { width: 38px; height: 38px; margin-right: 3px; padding: 0; } .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after { content: "Increment Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after { content: "Increment Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after { content: "Decrement Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after { content: "Decrement Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after { content: "Show Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after { content: "Show Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after { content: "Toggle AM/PM"; } .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after { content: "Clear the picker"; } .bootstrap-datetimepicker-widget .btn[data-action="today"]::after { content: "Set the date to today"; } .bootstrap-datetimepicker-widget .picker-switch { text-align: center; border-radius: 3px; font-size: 0.875rem; } .bootstrap-datetimepicker-widget .picker-switch::after { 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%; border-radius: 3px; margin: 2px 0px !important; } .bootstrap-datetimepicker-widget table { width: 100%; margin: 0; } .bootstrap-datetimepicker-widget table.table-condensed tr>td { text-align: center; } .bootstrap-datetimepicker-widget table td>div, .bootstrap-datetimepicker-widget table th>div { text-align: center; } .bootstrap-datetimepicker-widget table th { height: 20px; line-height: 20px; width: 20px; font-weight: 500; } .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: rgba(0, 0, 0, 0.12); cursor: not-allowed; } .bootstrap-datetimepicker-widget table th.prev span, .bootstrap-datetimepicker-widget table th.next span { border-radius: 3px; height: 27px; width: 27px; line-height: 28px; font-size: 12px; border-radius: 50%; text-align: center; } .bootstrap-datetimepicker-widget table th.prev::after { content: "Previous Month"; } .bootstrap-datetimepicker-widget table th.next::after { content: "Next Month"; } .bootstrap-datetimepicker-widget table th.dow { text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: 12px; text-transform: uppercase; color: rgba(0, 0, 0, 0.87); font-weight: 400; padding-bottom: 5px; padding-top: 10px; } .bootstrap-datetimepicker-widget table thead tr:first-child th { cursor: pointer; } .bootstrap-datetimepicker-widget table thead tr:first-child th:hover span, .bootstrap-datetimepicker-widget table thead tr:first-child th.picker-switch:hover { background: #eee; } .bootstrap-datetimepicker-widget table td>div { border-radius: 3px; height: 54px; line-height: 54px; width: 54px; text-align: center; } .bootstrap-datetimepicker-widget table td.cw>div { font-size: .8em; height: 20px; line-height: 20px; color: #999; } .bootstrap-datetimepicker-widget table td.day>div { height: 30px; line-height: 30px; width: 30px; text-align: center; padding: 0px; border-radius: 50%; position: relative; z-index: -1; color: #3C4858; font-size: 0.875rem; } .bootstrap-datetimepicker-widget table td.minute>div, .bootstrap-datetimepicker-widget table td.hour>div { border-radius: 50%; } .bootstrap-datetimepicker-widget table td.day:hover>div, .bootstrap-datetimepicker-widget table td.hour:hover>div, .bootstrap-datetimepicker-widget table td.minute:hover>div, .bootstrap-datetimepicker-widget table td.second:hover>div { background: #eee; cursor: pointer; } .bootstrap-datetimepicker-widget table td.old>div, .bootstrap-datetimepicker-widget table td.new>div { color: #999; } .bootstrap-datetimepicker-widget table td.today>div { position: relative; } .bootstrap-datetimepicker-widget table td.today>div:before { content: ''; display: inline-block; border: 0 0 7px 7px solid transparent; border-bottom-color: #9c27b0; border-top-color: rgba(0, 0, 0, 0.2); position: absolute; bottom: 4px; right: 4px; } .bootstrap-datetimepicker-widget table td.active>div, .bootstrap-datetimepicker-widget table td.active:hover>div { background-color: #9c27b0; color: #fff; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); } .bootstrap-datetimepicker-widget table td.active.today:before>div { border-bottom-color: #fff; } .bootstrap-datetimepicker-widget table td.disabled>div, .bootstrap-datetimepicker-widget table td.disabled:hover>div { background: none; color: rgba(0, 0, 0, 0.12); cursor: not-allowed; } .bootstrap-datetimepicker-widget table td span { display: inline-block; width: 40px; height: 40px; line-height: 40px; margin: 3px 3px; cursor: pointer; border-radius: 50%; text-align: center; } .bootstrap-datetimepicker-widget table td span:hover { background: #eee; } .bootstrap-datetimepicker-widget table td span.active { background-color: #9c27b0; color: #fff; } .bootstrap-datetimepicker-widget table td span.old { color: #999; } .bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover { background: none; color: rgba(0, 0, 0, 0.12); cursor: not-allowed; } .bootstrap-datetimepicker-widget .timepicker-picker span, .bootstrap-datetimepicker-widget .timepicker-hours span, .bootstrap-datetimepicker-widget .timepicker-minutes span { border-radius: 50% !important; } .bootstrap-datetimepicker-widget.usetwentyfour td.hour { height: 27px; line-height: 27px; } .btn.btn-primary { color: #fff !important; background-color: #9c27b0 !important; border-color: #9c27b0; box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12); } .btn.btn-primary:hover { box-shadow: 0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2); } /* footer */ footer{ margin-top:150px; color: #555; background: #fff; padding: 25px; font-weight: 300; } .footer p{ margin-bottom: 0; font-size: 14px; margin: 0 0 10px; font-weight: 300; } footer p a{ color: #555; font-weight: 400; } footer p a:hover { color: #9f26aa; text-decoration: none; } .form-control:focus{ box-shadow: none; }
$(document).ready(function() { $('body').bootstrapMaterialDesign(); $('.datetimepicker').datetimepicker({ icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-screenshot', clear: 'fa fa-trash', close: 'fa fa-remove' } }); $('.datepicker').datetimepicker({ format: 'MM/DD/YYYY', icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-screenshot', clear: 'fa fa-trash', close: 'fa fa-remove' } }); $('.timepicker').datetimepicker({ // format: 'H:mm', // use this format if you want the 24hours timepicker format: 'h:mm A', //use this format if you want the 12hours timpiecker with AM/PM toggle icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-screenshot', clear: 'fa fa-trash', close: 'fa fa-remove' } }); });

Related: See More


Questions / Comments: