{"id":2326,"date":"2017-04-17T18:58:02","date_gmt":"2017-04-17T18:58:02","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2326"},"modified":"2018-11-16T06:59:23","modified_gmt":"2018-11-16T06:59:23","slug":"bootstrap-datetimepicker-add-date-time-picker-input-field","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/","title":{"rendered":"Bootstrap Datetimepicker – Add DateTime Picker to Input Field using jQuery"},"content":{"rendered":"

DateTime picker<\/b> is very useful to enable input field for date and time entry. DateTime picker provides a user-friendly way to select date and time. The user can select date and time from the DateTime picker dialog without typing manually in the input field. If your web application uses Bootstrap framework, you can easily add DateTime picker to input field using Bootstrap DateTime Picker<\/b> jQuery plugin.<\/p>\n

The bootstrap DateTimePicker plugin<\/b> helps to add DateTime picker in the input element of the form using jQuery. It provides an instant solution to add datetimepicker popup in a form field for selecting date and time in the website. You can allow the user to select day, month, year, hour, and minute with one click from DateTime picker dropdown. In this tutorial, we will show you how to add a datetimepicker in the form field to select date and time in Bootstrap.<\/p>\n

Bootstrap Library<\/h2>\n

To use the Bootstrap framework in the website, include the Bootstrap and jQuery library files.<\/p>\n

<!-- jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"js\/jquery.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- Bootstrap library --><\/span>\r\n<link<\/span> href<\/span>=\"bootstrap\/css\/bootstrap.min.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"bootstrap\/js\/bootstrap.min.js\"<\/span>><\/span><\/script<\/span>><\/span><\/pre>\n
Bootstrap DateTime Picker<\/h2>\n
Include the CSS and JS library of the Bootstrap Datetimepicker plugin.<\/p>\n
<link<\/span> href<\/span>=\"css\/bootstrap-datetimepicker.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"js\/bootstrap-datetimepicker.min.js\"<\/span>><\/span><\/script<\/span>><\/span><\/pre>\n
Datetime Picker<\/h2>\n
The following code snippet adds datetimepicker to pick the date & time.<\/p>\n
Define an HTML element to add DateTime picker.<\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"datetime\"<\/span> readonly<\/span>><\/span><\/pre>\n
Call datetimepicker()<\/code> method to initialize DateTime Picker plugin.<\/p>\n
<script<\/span>><\/span>\r\n    $(\"#datetime\"<\/span>).datetimepicker({\r\n        format: 'yyyy-mm-dd hh:ii'<\/span>\r\n    });\r\n<\/script<\/span>><\/span><\/pre>\n
<\/span>Add Date-Time Picker to Input Field using jQuery<\/a><\/span><\/p>\n
The DateTime picker provides various options to customize the DateTimePicker box. The following examples are some of the advanced configurations for DateTime Picker dialog box. <\/p>\n
Inline Datetime Picker<\/h2>\n
The following code snippet adds datetimepicker to an inline DIV element.<\/p>\n
<div<\/span> id<\/span>=\"datetime\"<\/span>><\/span><\/div<\/span>><\/span><\/pre>\n
<script<\/span>><\/span>\r\n    $(\"#datetime\"<\/span>).datetimepicker();\r\n<\/script<\/span>><\/span><\/pre>\n
Datetime Picker with Auto Close<\/h2>\n
Once the user selects a date & time, the datetimepicker will be closed automatically. <\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"datetime\"<\/span> readonly<\/span>><\/span><\/pre>\n
<script<\/span>><\/span>\r\n    $(\"#datetime\"<\/span>).datetimepicker({\r\n        format: 'yyyy-mm-dd hh:ii'<\/span>,\r\n        autoclose: true<\/span>\r\n    });\r\n<\/script<\/span>><\/span><\/pre>\n
Datetime Picker with Today Link<\/h2>\n
The Today link will appear under the datetimepicker to select current date and time.<\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"datetime\"<\/span> readonly<\/span>><\/span><\/pre>\n
<script<\/span>><\/span>\r\n    $(\"#datetime\"<\/span>).datetimepicker({\r\n        format: 'yyyy-mm-dd hh:ii'<\/span>,\r\n        autoclose: true<\/span>,\r\n        todayBtn: true<\/span>\r\n    });\r\n<\/script<\/span>><\/span><\/pre>\n
Disable Previous Dates from Datetime Picker<\/h2>\n
Use the startDate<\/code> option and specify a current date to disable past dates.<\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"datetime\"<\/span> readonly<\/span>><\/span><\/pre>\n
<script<\/span>><\/span>\r\n    var<\/span> today = new<\/span> Date<\/span>();\r\n    $(\"#datetime\"<\/span>).datetimepicker({\r\n        format: 'yyyy-mm-dd hh:ii'<\/span>,\r\n        autoclose: true<\/span>,\r\n        todayBtn: true<\/span>,\r\n        startDate : today\r\n    });\r\n<\/script<\/span>><\/span><\/pre>\n
Datetime Picker with Date Range<\/h2>\n
Use the setStartDate<\/code> and setEndDate<\/code> method to select a date range (start date and end date).<\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"from\"<\/span> readonly<\/span>><\/span>\r\n<label<\/span>><\/span>TO<\/label<\/span>><\/span>\r\n<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"to\"<\/span> readonly<\/span>><\/span><\/pre>\n
<script<\/span>><\/span>\r\n    var<\/span> today = new<\/span> Date<\/span>();\r\n    $('#from'<\/span>).datetimepicker({\r\n        format: 'yyyy-mm-dd hh:ii'<\/span>,\r\n        autoclose: true<\/span>,\r\n        todayBtn: true<\/span>,\r\n        startDate : today\r\n    }).on('changeDate'<\/span>, function<\/span>(ev<\/span>)<\/span>{\r\n        $('#to'<\/span>).datetimepicker('setStartDate'<\/span>, ev.date);\r\n    });\r\n    \r\n    $('#to'<\/span>).datetimepicker({\r\n        format: 'yyyy-mm-dd hh:ii'<\/span>,\r\n        autoclose: true<\/span>,\r\n        todayBtn: true<\/span>,\r\n        startDate : today\r\n    }).on('changeDate'<\/span>, function<\/span>(ev<\/span>)<\/span>{\r\n        $('#from'<\/span>).datetimepicker('setEndDate'<\/span>, ev.date);\r\n    });\r\n<\/script<\/span>><\/span><\/pre>\n
DateTimePicker with Date Picker Only<\/h2>\n
The following code snippet displays only date picker to select date only.<\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"date\"<\/span> readonly<\/span>><\/span><\/pre>\n
<script<\/span>><\/span>\r\n    $('#date'<\/span>).datetimepicker({\r\n        format: 'yyyy-mm-dd'<\/span>,\r\n        weekStart: 1<\/span>,\r\n        todayBtn:  true<\/span>,\r\n        autoclose: true<\/span>,\r\n        todayHighlight: true<\/span>,\r\n        startView: 2<\/span>,\r\n        minView: 2<\/span>,\r\n        forceParse: 0<\/span>\r\n    });\r\n<\/script<\/span>><\/span><\/pre>\n
DateTimePicker with Time Picker Only<\/h2>\n
The following code snippet displays only time picker to select time only.<\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"time\"<\/span> readonly<\/span>><\/span><\/pre>\n
<script<\/span>><\/span>\r\n    $('#time'<\/span>).datetimepicker({\r\n        format: 'hh:ii'<\/span>,\r\n        weekStart: 1<\/span>,\r\n        todayBtn:  true<\/span>,\r\n        autoclose: true<\/span>,\r\n        todayHighlight: true<\/span>,\r\n        startView: 1<\/span>,\r\n        minView: 0<\/span>,\r\n        maxView: 1<\/span>,\r\n        forceParse: 0<\/span>\r\n    });\r\n<\/script<\/span>><\/span><\/pre>\n
Submit and Insert DateTime Field Value into the Database<\/h2>\n
Now, we will show you how to submit the datetime form field and insert as DATETIME format into the database using PHP and MySQL. For the better understanding, we’ll build an example PHP script that submits the event name and date & time into the MySQL database.<\/p>\n
Create Database Table:<\/b>
\nA table needs to be created in the database to store the event name and datetime. The following SQL creates a events<\/code> table in the MySQL database.<\/p>\n
CREATE<\/span> TABLE<\/span> `events`<\/span> (\r\n `id`<\/span> int<\/span>(22<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `name`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `datetime`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n
HTML Code:<\/b>
\nThe following HTML contains two form fields, one for text input (event name) and another for datetime input (event date & time).<\/p>\n
<form<\/span> method<\/span>=\"post\"<\/span>><\/span>\r\n    Event: <input<\/span> type<\/span>=\"text\"<\/span> name<\/span>=\"name\"<\/span> class<\/span>=\"form-control\"<\/span>><\/span>\r\n    Date & Time: <input<\/span> type<\/span>=\"text\"<\/span> name<\/span>=\"datetime\"<\/span> id<\/span>=\"datetime\"<\/span> class<\/span>=\"form-control\"<\/span> readonly<\/span>><\/span>\r\n    <input<\/span> type<\/span>=\"submit\"<\/span> name<\/span>=\"submit\"<\/span> class<\/span>=\"btn button btn-success\"<\/span> value<\/span>=\"SUBMIT\"<\/span> \/><\/span>\r\n<\/form<\/span>><\/span><\/pre>\n
JavaScript Code:<\/b>
\nSpecify the element selector (#datetime<\/code>) to attach datetime picker to the datetime input field. The previous dates will be disabled for preventing user select a past date.<\/p>\n
<script<\/span>><\/span>\r\n    $(function<\/span> (<\/span>) <\/span>{\r\n        var<\/span> today = new<\/span> Date<\/span>();\r\n        var<\/span> date = today.getFullYear()+'-'<\/span>+(today.getMonth()+1<\/span>)+'-'<\/span>+today.getDate();\r\n        var<\/span> time = today.getHours() + \":\"<\/span> + today.getMinutes();\r\n        var<\/span> dateTime = date+' '<\/span>+time;\r\n        $(\"#datetime\"<\/span>).datetimepicker({\r\n            format: 'yyyy-mm-dd hh:ii'<\/span>,\r\n            autoclose: true<\/span>,\r\n            todayBtn: true<\/span>,\r\n            startDate: dateTime\r\n        });\r\n    });\r\n<\/script<\/span>><\/span><\/pre>\n
PHP Code:<\/b>
\nSpecify the database host ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your MySQL database credentials. Once the form is submitted, the event name and event date & time will be inserted into the database using PHP and MySQL.<\/p>\n
<?php
<\/span>if(isset(<\/span>$_POST<\/span>[<\/span>'submit'<\/span>]) && !empty(<\/span>$_POST<\/span>[<\/span>'name'<\/span>]) && !empty(<\/span>$_POST<\/span>[<\/span>'datetime'<\/span>])){
    <\/span>\/\/ Database configuration
    <\/span>$dbHost        <\/span>= <\/span>'localhost'<\/span>;
    <\/span>$dbUsername    <\/span>= <\/span>'root'<\/span>;
    <\/span>$dbPassword    <\/span>= <\/span>'root'<\/span>;
    <\/span>$dbName        <\/span>= <\/span>'codexworld'<\/span>;
    
    <\/span>\/\/ Connect and select the database
    <\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
    
    <\/span>\/\/ Check connection
    <\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
        die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
    }
    
    <\/span>\/\/ Get fields value
    <\/span>$name <\/span>= <\/span>$db<\/span>-><\/span>real_escape_string<\/span>(<\/span>$_POST<\/span>[<\/span>'name'<\/span>]);
    <\/span>$datetime <\/span>= <\/span>$db<\/span>-><\/span>real_escape_string<\/span>(<\/span>$_POST<\/span>[<\/span>'datetime'<\/span>]);
    
    <\/span>\/\/ Insert datetime into the database
    <\/span>$insert <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"INSERT INTO events (name, datetime) VALUES ('\"<\/span>.<\/span>$name<\/span>.<\/span>\"', '\"<\/span>.<\/span>$datetime<\/span>.<\/span>\"')\"<\/span>);
    
    <\/span>\/\/ If insert successful
    <\/span>if(<\/span>$insert<\/span>){
        <\/span>$status <\/span>= <\/span>'Event data inserted successfully. Event ID: '<\/span>.<\/span>$db<\/span>-><\/span>insert_id<\/span>;
    }else{
        <\/span>$status <\/span>= <\/span>'Failed to insert event data.'<\/span>;
    }
}
<\/span>?><\/span><\/pre>\n
Conclusion<\/h2>\n
DateTimePicker helps to make datetime input field user-friendly. You can convert an input field to a DateTime picker using jQuery. Our example code allows you to add DateTime picker to input text field using Bootstrap DateTimePicker plugin. Also, you can customize the DateTimePicker with various configuration options as per your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
DateTime picker is very useful to enable input field for date and time entry. DateTime picker provides a user-friendly way to select date and time. The user can select date and time from the DateTime <\/p>\n","protected":false},"author":1,"featured_media":2327,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[274],"tags":[275,173,19,14],"class_list":["post-2326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-datetimepicker","tag-mysql","tag-php","cat-274-id","has_thumb"],"yoast_head":"\nBootstrap Datetimepicker - Add DateTime Picker to Input Field using jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"Bootstrap Datetimepicker - Convert input field to DateTime picker using jQuery DateTimePicker in Bootstrap. Add datetimepicker to the input field and insert date and time into the database using PHP and MySQL.\" \/>\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.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Datetimepicker - Add DateTime Picker to Input Field using jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Bootstrap Datetimepicker - Convert input field to DateTime picker using jQuery DateTimePicker in Bootstrap. Add datetimepicker to the input field and insert date and time into the database using PHP and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-17T18:58:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-16T06:59:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Bootstrap Datetimepicker – Add DateTime Picker to Input Field using jQuery\",\"datePublished\":\"2017-04-17T18:58:02+00:00\",\"dateModified\":\"2018-11-16T06:59:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/\"},\"wordCount\":599,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png\",\"keywords\":[\"Bootstrap\",\"DateTimePicker\",\"MySQL\",\"PHP\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/\",\"name\":\"Bootstrap Datetimepicker - Add DateTime Picker to Input Field using jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png\",\"datePublished\":\"2017-04-17T18:58:02+00:00\",\"dateModified\":\"2018-11-16T06:59:23+00:00\",\"description\":\"Bootstrap Datetimepicker - Convert input field to DateTime picker using jQuery DateTimePicker in Bootstrap. Add datetimepicker to the input field and insert date and time into the database using PHP and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"bootstrap-datetimepicker-date-time-database-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-datetimepicker-add-date-time-picker-input-field\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Datetimepicker – Add DateTime Picker to Input Field using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Datetimepicker - Add DateTime Picker to Input Field using jQuery - CodexWorld","description":"Bootstrap Datetimepicker - Convert input field to DateTime picker using jQuery DateTimePicker in Bootstrap. Add datetimepicker to the input field and insert date and time into the database using PHP and MySQL.","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.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Datetimepicker - Add DateTime Picker to Input Field using jQuery - CodexWorld","og_description":"Bootstrap Datetimepicker - Convert input field to DateTime picker using jQuery DateTimePicker in Bootstrap. Add datetimepicker to the input field and insert date and time into the database using PHP and MySQL.","og_url":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-04-17T18:58:02+00:00","article_modified_time":"2018-11-16T06:59:23+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Bootstrap Datetimepicker – Add DateTime Picker to Input Field using jQuery","datePublished":"2017-04-17T18:58:02+00:00","dateModified":"2018-11-16T06:59:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/"},"wordCount":599,"commentCount":8,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png","keywords":["Bootstrap","DateTimePicker","MySQL","PHP"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/","url":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/","name":"Bootstrap Datetimepicker - Add DateTime Picker to Input Field using jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png","datePublished":"2017-04-17T18:58:02+00:00","dateModified":"2018-11-16T06:59:23+00:00","description":"Bootstrap Datetimepicker - Convert input field to DateTime picker using jQuery DateTimePicker in Bootstrap. Add datetimepicker to the input field and insert date and time into the database using PHP and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png","width":1366,"height":768,"caption":"bootstrap-datetimepicker-date-time-database-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/bootstrap-datetimepicker-add-date-time-picker-input-field\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Datetimepicker – Add DateTime Picker to Input Field using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-datetimepicker-date-time-database-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-Bw","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2326"}],"version-history":[{"count":8,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2326\/revisions"}],"predecessor-version":[{"id":3607,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2326\/revisions\/3607"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2327"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}