{"id":84,"date":"2025-11-04T20:52:09","date_gmt":"2025-11-04T20:52:09","guid":{"rendered":"https:\/\/jaedpro.com\/wp-react-panel\/?post_type=docs&#038;p=84"},"modified":"2025-11-04T21:08:22","modified_gmt":"2025-11-04T21:08:22","password":"","slug":"field-type-datetime","status":"publish","type":"docs","link":"https:\/\/jaedpro.com\/wp-react-panel\/docs\/field-type-datetime\/","title":{"rendered":"Field Type: Datetime"},"content":{"rendered":"\n<p>A date and time picker for scheduling and time-based settings with optional time selection.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example Usage<\/h3>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-a86297f9\"\n     id=\"betterdocs-code-snippet-a86297f9\"\n     data-language=\"php\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                \n                                    <div class=\"betterdocs-file-name\">\n                        <span class=\"file-name-text\">sample-plugin.php<\/span>\n                    <\/div>\n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-a86297f9 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-php\"><code>\/\/ With time picker\narray(\n\t&#039;id&#039;          =&gt; &#039;maintenance_end&#039;,\n\t&#039;title&#039;       =&gt; &#039;Maintenance End Time&#039;,\n\t&#039;desc&#039;        =&gt; &#039;Select the date and time when maintenance should end&#039;,\n\t&#039;type&#039;        =&gt; &#039;datetime&#039;,\n\t&#039;settings&#039;    =&gt; array(\n\t\t&#039;timePicker&#039; =&gt; true,\n\t),\n\t&#039;placeholder&#039; =&gt; &#039;Select end date and time&#039;,\n\t&#039;value&#039;       =&gt; get_option( &#039;maintenance_end&#039; ),\n),\n\n\n\/\/ Date picker only\narray(\n\t&#039;id&#039;          =&gt; &#039;launch_date&#039;,\n\t&#039;title&#039;       =&gt; &#039;Launch Date&#039;,\n\t&#039;desc&#039;        =&gt; &#039;Select the product launch date&#039;,\n\t&#039;type&#039;        =&gt; &#039;datetime&#039;,\n\t&#039;settings&#039;    =&gt; array(\n\t\t&#039;timePicker&#039; =&gt; false,\n\t),\n\t&#039;placeholder&#039; =&gt; &#039;Select launch date&#039;,\n\t&#039;value&#039;       =&gt; get_option( &#039;launch_date&#039; ),\n),<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-a86297f9');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Properties<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>id<\/strong> (required) &#8211; Unique identifier for the field<\/li>\n\n\n\n<li><strong>title<\/strong> (required) &#8211; Label displayed above the field<\/li>\n\n\n\n<li><strong>desc<\/strong> (optional) &#8211; Help text shown below the field<\/li>\n\n\n\n<li><strong>type<\/strong> (required) &#8211; Must be <code>'datetime'<\/code><\/li>\n\n\n\n<li><strong>settings<\/strong> (optional) &#8211; Configuration object with <code>timePicker<\/code> boolean<\/li>\n\n\n\n<li><strong>placeholder<\/strong> (optional) &#8211; Placeholder text shown when no date is selected<\/li>\n\n\n\n<li><strong>value<\/strong> (optional) &#8211; Current date\/time value in ISO format string<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Notes<\/h3>\n\n\n\n<p>By default, <code>timePicker<\/code> is <code>true<\/code>. The field returns dates in ISO 8601 format (e.g., <code>2024-12-25T14:30:00<\/code>). For date-only fields, set <code>timePicker<\/code> to <code>false<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A date and time picker for scheduling and time-based settings with optional time selection. Example Usage Properties Notes By default, timePicker is true. The field returns dates in ISO 8601 format (e.g., 2024-12-25T14:30:00). For date-only fields, set timePicker to false.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[4],"doc_tag":[],"class_list":["post-84","docs","type-docs","status-publish","hentry","doc_category-field-types"],"blocksy_meta":[],"year_month":"2026-05","word_count":103,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Jaed Mosharraf","author_nicename":"jaedm97","author_url":"https:\/\/jaedpro.com\/wp-react-panel\/author\/jaedm97\/"},"doc_category_info":[{"term_name":"Field Types","term_url":"https:\/\/jaedpro.com\/wp-react-panel\/docs-category\/field-types\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/docs\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":2,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/docs\/84\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/docs\/84\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/doc_category?post=84"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/doc_tag?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}