{"id":1312,"date":"2016-04-10T18:18:08","date_gmt":"2016-04-10T18:18:08","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1312"},"modified":"2023-09-25T09:56:04","modified_gmt":"2023-09-25T09:56:04","slug":"bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/","title":{"rendered":"Bootstrap datetimepicker: Managing Date and Time in Bootstrap"},"content":{"rendered":"<h3><strong>The datetimepicker plug-in<\/strong><\/h3>\n<p>In the <a href=\"\/bootstrap-datepicker-set-up-guide-with-8-online-demos-and-code\/\">datepicker tutorial<\/a> for managing dates in Bootstrap-based projects, I showed how you can use the bootstrap-datepicker plug-in with text fields. I also showed demos for customizing the look and feel by using the custom CSS for the calendars by overriding the default classes.<\/p>\n<p>However, that plug-in is used to manage with dates only. In certain scenarios, you may need to allow the visitors to not only select dates but time as well. Fortunately, many awesome developers are working on it to add useful features for Bootstrap framework.<\/p>\n<p>In this tutorial, I will show you examples of setting up the datetime picker by using the <em>Bootstrap 3 Datepicker<\/em> plug-in. After that, you can also see the simple steps of setting up the plug-in to use for your projects. So let me start with examples first.<\/p>\n<h3><strong>A demo of simply displaying date and time in textbox<\/strong><\/h3>\n<p>In this example, the date and time can be selected as you click the icon ahead of a text box. By default, the calendar appears first for selecting the date. At the bottom, you can see a clock for selecting the time.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1313\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_1-Bootstrap-datetime-picker.jpg\" alt=\"Bootstrap datetime picker\" width=\"422\" height=\"351\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_1-Bootstrap-datetime-picker.jpg 422w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_1-Bootstrap-datetime-picker-300x249.jpg 300w\" sizes=\"(max-width: 422px) 100vw, 422px\" \/><\/p>\n<h6><a href=\"\/boots\/demo.php?ex=20.0_1\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See online demo and code<\/strong><\/a><\/h6>\n<p>The following markup is used for creating the textbox with the icon:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class='col-lg-9'&gt;\r\n\r\n&lt;div class=\"form-group\"&gt;\r\n\r\n&lt;label for=\"dtpickerdemo\" class=\"col-sm-2 control-label\"&gt;Select date\/time:&lt;\/label&gt;\r\n\r\n&lt;div class='col-sm-4 input-group date' id='dtpickerdemo'&gt;\r\n\r\n&lt;input type='text' class=\"form-control\" \/&gt;\r\n\r\n&lt;span class=\"input-group-addon\"&gt;\r\n\r\n&lt;span class=\"glyphicon glyphicon-calendar\"&gt;&lt;\/span&gt;\r\n\r\n&lt;\/span&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;<\/pre>\n<p>In the script section, the id of the div is called with datetimepicker():<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script type=\"text\/javascript\"&gt;\r\n\r\n$(function () {\r\n\r\n$('#dtpickerdemo').datetimepicker();\r\n\r\n});\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>You can see the complete code in the demo page.<\/p>\n<h3><strong>An example of date time picker without icon<\/strong><\/h3>\n<p>In above example, the datetime picker component opens as you click on the icon ahead of the text field. You may also open it as a user clicks inside the textbox.<\/p>\n<p>See this example, where only a textbox is given (no icon ahead):<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1314\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_2-Bootstrap-datetime-picker-without-icon.jpg\" alt=\"Bootstrap datetime picker without icon\" width=\"426\" height=\"345\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_2-Bootstrap-datetime-picker-without-icon.jpg 426w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_2-Bootstrap-datetime-picker-without-icon-300x242.jpg 300w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><\/p>\n<h6><strong>See online demo and code<\/strong><\/h6>\n<p>The following is the markup used:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\u00a0&lt;div class=\"form-group\"&gt;\r\n\r\n&lt;label for=\"dtpickerdemo\" class=\"col-sm-2 control-label\"&gt;Select date\/time:&lt;\/label&gt;\r\n\r\n&lt;div class='col-sm-4 input-group date'&gt;\r\n\r\n&lt;input type='text' class=\"form-control\" id='dtpickerdemo' \/&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;<\/pre>\n<h3><strong>An example of using in a Bootstrap form<\/strong><\/h3>\n<p>The following example shows using the datetime picker in a Bootstrap form. The demo sign-up form contains a few other fields along with <em>date\/time of birth<\/em> field (for example purpose only). For that, I used the plug-in as in the above examples.<\/p>\n<p><strong>Complete code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.1\/css\/bootstrap.min.css\"&gt;\r\n    &lt;link href=\"\/\/cdn.rawgit.com\/Eonasdan\/bootstrap-datetimepicker\/e8bddc60e73c1ec2475f827be36e1957af72e2ea\/build\/css\/bootstrap-datetimepicker.css\" rel=\"stylesheet\"&gt;\r\n\r\n\r\n\t\t&lt;script type=\"text\/javascript\" src=\"\/\/code.jquery.com\/jquery-2.1.1.min.js\"&gt;&lt;\/script&gt;\r\n\t\t&lt;script type=\"text\/javascript\" src=\"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.1\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n    \t&lt;script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.9.0\/moment-with-locales.js\"&gt;&lt;\/script&gt;\r\n\t\t&lt;script src=\"\/\/cdn.rawgit.com\/Eonasdan\/bootstrap-datetimepicker\/e8bddc60e73c1ec2475f827be36e1957af72e2ea\/src\/js\/bootstrap-datetimepicker.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;style&gt;\r\n.inputstl { \r\n    padding: 9px; \r\n    border: solid 1px #B3FFB3; \r\n    outline: 0; \r\n    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #A4FFA4), to(#FFFFFF)); \r\n    background: -moz-linear-gradient(top, #FFFFFF, #A4FFA4 1px, #FFFFFF 25px); \r\n    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n\r\n    } \r\n   \r\n&lt;\/style&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n&lt;div class=\"container\"&gt;\r\n&lt;h1&gt;Bootstrap date\/time demo&lt;\/h1&gt;\r\n    &lt;form class=\"form-horizontal\" role=\"form\"&gt;\r\n      &lt;div class=\"form-group\"&gt;\r\n        &lt;label for=\"name1\" class=\"col-sm-2 control-label\"&gt;Name:&lt;\/label&gt;\r\n        &lt;div class=\"col-sm-5 input-group\"&gt;\r\n          &lt;input type=\"email\" class=\"form-control inputstl\" id=\"name1\" placeholder=\"Enter Your Full Name\"&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"form-group\"&gt;\r\n        &lt;label for=\"gender1\" class=\"col-sm-2 control-label\"&gt;Gender:&lt;\/label&gt;\r\n        &lt;div class=\"col-sm-2 input-group\"&gt;\r\n        &lt;select class=\"form-control inputstl\" id=\"gender1\"&gt;\r\n          &lt;option&gt;Male&lt;\/option&gt;\r\n          &lt;option&gt;Female&lt;\/option&gt;\r\n        &lt;\/select&gt;          \r\n          \r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;      \r\n      &lt;div class=\"form-group\"&gt;\r\n        &lt;label for=\"email1\" class=\"col-sm-2 control-label\"&gt;Email:&lt;\/label&gt;\r\n        &lt;div class=\"col-sm-5 input-group\"&gt;\r\n          &lt;input type=\"email\" class=\"form-control inputstl\" id=\"email1\" placeholder=\"Enter Email\"&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div class=\"form-group\"&gt;\r\n            &lt;label for=\"dtpickerdemo\" class=\"col-sm-2 control-label\"&gt;Date\/time of birth:&lt;\/label&gt;\r\n                &lt;div class='col-sm-4 input-group date ' id='dtpickerdemo'&gt;\r\n                    &lt;input type='text' class=\"form-control inputstl\" \/&gt;\r\n                    &lt;span class=\"input-group-addon\"&gt;\r\n                        &lt;span class=\"glyphicon glyphicon-calendar\"&gt;&lt;\/span&gt;\r\n                    &lt;\/span&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;         \r\n\r\n\r\n      &lt;div class=\"form-group\"&gt;\r\n        &lt;label for=\"password1\" class=\"col-sm-2 control-label\"&gt;Password:&lt;\/label&gt;\r\n        &lt;div class=\"col-sm-3 input-group\"&gt;\r\n          &lt;input type=\"password\" class=\"form-control inputstl\" id=\"password1\" placeholder=\"Password here\"&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n\r\n\r\n      &lt;div class=\"form-group\"&gt;\r\n        &lt;label for=\"address1\" class=\"col-sm-2 control-label\"&gt;Address:&lt;\/label&gt;\r\n        &lt;div class=\"col-sm-5 input-group\"&gt;\r\n          &lt;input type=\"email\" class=\"form-control inputstl\" id=\"address1\" placeholder=\"Full Address\"&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;            \r\n\r\n\r\n      \r\n      &lt;div class=\"form-group\"&gt;\r\n        &lt;div class=\"col-sm-offset-2 col-sm-10\"&gt;\r\n          &lt;div class=\"checkbox\"&gt;\r\n            &lt;label&gt;\r\n              &lt;input type=\"checkbox\" class=\"inputstl\"&gt; Remember me\r\n            &lt;\/label&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"form-group \"&gt;\r\n        &lt;div class=\"col-sm-offset-2 col-sm-4\"&gt;\r\n          &lt;button type=\"submit\" class=\"btn btn-lg btn-block btn-success\"&gt;Create Account&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/form&gt;\r\n   &lt;\/div&gt; \r\n   \r\n        &lt;script type=\"text\/javascript\"&gt;\r\n            $(function () {\r\n                $('#dtpickerdemo').datetimepicker();\r\n            });\r\n        &lt;\/script&gt;   \r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1315\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_3-Bootstrap-datetime-picker-form.jpg\" alt=\"Bootstrap datetime picker form\" width=\"678\" height=\"516\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_3-Bootstrap-datetime-picker-form.jpg 678w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_3-Bootstrap-datetime-picker-form-300x228.jpg 300w\" sizes=\"(max-width: 678px) 100vw, 678px\" \/><\/p>\n<p>In the &lt;head&gt; section, you can see a few libraries required for datetimepicker, whereas, just above the &lt;\/body&gt; tag, the datetime picker is initiated in the &lt;script&gt; section.<\/p>\n<h3><strong>Changing the look and feel of datetimepicker widget<\/strong><\/h3>\n<p>The datetimepicker Bootstrap plug-in also includes a CSS file that specifies the default look and feel of the calendar \/ time picker. By picking the specific classes and modifying the default properties as per need, you may override the default classes.<\/p>\n<p>For that, after including the CSS file of datetime picker, place the modified code either in the &lt;style&gt; section under the &lt;head&gt; tag or you may place it in your own external CSS file. Just make sure, the modified style must be after including the plug-in&#8217;s CSS file that contains all styling.<\/p>\n<p>See the following example, where I simply changed the background color and text color of the plugin by overriding these classes:<\/p>\n<blockquote><p>bootstrap-datetimepicker-widget table td<\/p>\n<p>bootstrap-datetimepicker-widget table th<\/p><\/blockquote>\n<p>See the output after modifying these classes:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1316\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_4-Bootstrap-datetime-picker-custom-CSS.jpg\" alt=\"Bootstrap datetime picker custom CSS\" width=\"427\" height=\"334\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_4-Bootstrap-datetime-picker-custom-CSS.jpg 427w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_4-Bootstrap-datetime-picker-custom-CSS-300x234.jpg 300w\" sizes=\"(max-width: 427px) 100vw, 427px\" \/><\/p>\n<p>Just use this code under the &lt;style&gt; tag:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">&lt;style&gt;\r\n\r\n.bootstrap-datetimepicker-widget table td,\r\n\r\n.bootstrap-datetimepicker-widget table th {\r\n\r\ntext-align: center;\r\n\r\nborder-radius: 0px;\r\n\r\nbackground-color:\u00a0 #2B6D8D;\r\n\r\ncolor:#fff;\r\n\r\n}\r\n\r\n&lt;\/style&gt;<\/pre>\n<p>I have just shown this for demonstration purposes. For your need to match the datetime picker with the rest of your website, you have to pick other related classes like for the current day, selected day, different header, disabled days, etc.<\/p>\n<h3><strong>Another style demo with overriding more display properties<\/strong><\/h3>\n<p>In this demo, I have changed a few more properties including separate main background and color as compared to days\/time section. The current day is also changed. See the demo which is followed by classes used to modify these properties:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1317\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_5-Bootstrap-datetimepi.jpg\" alt=\"Bootstrap datetimepicker CSS\" width=\"433\" height=\"339\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_5-Bootstrap-datetimepi.jpg 433w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_5-Bootstrap-datetimepi-300x234.jpg 300w\" sizes=\"(max-width: 433px) 100vw, 433px\" \/><\/p>\n<h6><a href=\"\/boots\/demo.php?ex=20.0_5\" target=\"_blank\" rel=\"noopener nofollow\">Online demo and code<\/a><\/h6>\n<p>The following classes are overridden (use all these under the &lt;style&gt; section:<\/p>\n<p><strong>For main calendar and clock:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.bootstrap-datetimepicker-widget table td,\r\n\r\n.bootstrap-datetimepicker-widget table th {\r\n\r\ntext-align: center;\r\n\r\nborder-radius: 0px;\r\n\r\nbackground-color:\u00a0 #8E4F35;\r\n\r\ncolor:#fff;\r\n\r\n}<\/pre>\n<p><strong>For the days section:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.bootstrap-datetimepicker-widget table td.day {\r\n\r\nheight: 20px;\r\n\r\nline-height: 20px;\r\n\r\nwidth: 20px;\r\n\r\nbackground-color:\u00a0 #CFA95F;\r\n\r\nborder-radius: 50%;\r\n\r\n}<\/pre>\n<p><strong>Hovering different elements:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.bootstrap-datetimepicker-widget table td.day:hover,\r\n\r\n.bootstrap-datetimepicker-widget table td.hour:hover,\r\n\r\n.bootstrap-datetimepicker-widget table td.minute:hover,\r\n\r\n.bootstrap-datetimepicker-widget table td.second:hover {\r\n\r\nbackground: #FF7F32;\r\n\r\ncursor: pointer;\r\n\r\ncolor:#fff;\r\n\r\n}<\/pre>\n<p><strong>Today\u2019s class:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.bootstrap-datetimepicker-widget table td.today {\r\n\r\nposition: relative;\r\n\r\nbackground: #FF7F32;\r\n\r\n}<\/pre>\n<h3><strong>Steps for setting up datetimepicker Bootstrap plug-in<\/strong><\/h3>\n<p>In order to use this plug-in in your projects, you have to include a few libraries in your web pages. Either use the CDN links or download the required files from <a href=\"https:\/\/eonasdan.github.io\/bootstrap-datetimepicker\/Installing\/\" target=\"_blank\" rel=\"nofollow\">GitHub site<\/a>.<\/p>\n<p>These are the CDN links that I used for demonstration:<\/p>\n<p>The CSS:<\/p>\n<blockquote><p>\u00a0&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.1\/css\/bootstrap.min.css&#8221;&gt;<\/p>\n<p>&lt;link href=&#8221;\/\/cdn.rawgit.com\/Eonasdan\/bootstrap-datetimepicker\/e8bddc60e73c1ec2475f827be36e1957af72e2ea\/build\/css\/bootstrap-datetimepicker.css&#8221; rel=&#8221;stylesheet&#8221;&gt;<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p>The JS libraries<\/p>\n<blockquote><p>\u00a0&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;\/\/code.jquery.com\/jquery-2.1.1.min.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.1\/js\/bootstrap.min.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script src=&#8221;\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.9.0\/moment-with-locales.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script src=&#8221;\/\/cdn.rawgit.com\/Eonasdan\/bootstrap-datetimepicker\/e8bddc60e73c1ec2475f827be36e1957af72e2ea\/src\/js\/bootstrap-datetimepicker.js&#8221;&gt;&lt;\/script&gt;<\/p><\/blockquote>\n<p>These also include jQuery, Bootstrap JavaScript libraries. You may also see the link of Bootstrap CSS.<\/p>\n<p>The required files for datetimepicker plug-in are:<\/p>\n<ul>\n<li>bootstrap-datetimepicker.js or its minified version.<\/li>\n<li>moment-with-locales.js<\/li>\n<li>bootstrap-datetimepicker.css<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The datetimepicker plug-in In the datepicker tutorial for managing dates in Bootstrap-based projects, I showed how you can use the bootstrap-datepicker plug-in with text fields. I also showed demos for customizing the look and feel by using the custom CSS for the calendars by overriding the default classes. However, that plug-in is used to manage &#8230; <a title=\"Bootstrap datetimepicker: Managing Date and Time in Bootstrap\" class=\"read-more\" href=\"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/\" aria-label=\"More on Bootstrap datetimepicker: Managing Date and Time in Bootstrap\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1316,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[35],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap datetimepicker: Managing Date and Time in Bootstrap<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap datetimepicker: Managing Date and Time in Bootstrap\" \/>\n<meta property=\"og:description\" content=\"The datetimepicker plug-in In the datepicker tutorial for managing dates in Bootstrap-based projects, I showed how you can use the bootstrap-datepicker plug-in with text fields. I also showed demos for customizing the look and feel by using the custom CSS for the calendars by overriding the default classes. However, that plug-in is used to manage ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-10T18:18:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-25T09:56:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_4-Bootstrap-datetime-picker-custom-CSS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"427\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/\",\"url\":\"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/\",\"name\":\"Bootstrap datetimepicker: Managing Date and Time in Bootstrap\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-04-10T18:18:08+00:00\",\"dateModified\":\"2023-09-25T09:56:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap datetimepicker: Managing Date and Time in Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap datetimepicker: Managing Date and Time in Bootstrap","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap datetimepicker: Managing Date and Time in Bootstrap","og_description":"The datetimepicker plug-in In the datepicker tutorial for managing dates in Bootstrap-based projects, I showed how you can use the bootstrap-datepicker plug-in with text fields. I also showed demos for customizing the look and feel by using the custom CSS for the calendars by overriding the default classes. However, that plug-in is used to manage ... Read more","og_url":"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/","article_published_time":"2016-04-10T18:18:08+00:00","article_modified_time":"2023-09-25T09:56:04+00:00","og_image":[{"width":427,"height":334,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/25.0_4-Bootstrap-datetime-picker-custom-CSS.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/","url":"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/","name":"Bootstrap datetimepicker: Managing Date and Time in Bootstrap","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-04-10T18:18:08+00:00","dateModified":"2023-09-25T09:56:04+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/bootstrap-datetimepicker-managing-with-date-and-time-in-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap datetimepicker: Managing Date and Time in Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1312"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1312"}],"version-history":[{"count":8,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1312\/revisions"}],"predecessor-version":[{"id":8394,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1312\/revisions\/8394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/1316"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}