{"id":47135,"date":"2023-11-15T10:58:55","date_gmt":"2023-11-15T10:58:55","guid":{"rendered":"https:\/\/www.123formbuilder.com\/docs\/?p=47135"},"modified":"2024-11-14T09:39:48","modified_gmt":"2024-11-14T09:39:48","slug":"date-picker-field","status":"publish","type":"post","link":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/","title":{"rendered":"Date Picker field"},"content":{"rendered":"\n

The new Date picker<\/b> field can be found under the Essentials<\/b> category. Its role is to help you gather date information from your respondents.<\/p>\n\n\n

\n
\"Date<\/figure>\n<\/div>\n\n\n
\n\n\n\n

Setup<\/h2>\n\n\n\n

Once you’ve added the Date picker field to your form, you will notice a sidebar menu with 3 options: Settings<\/b>, Duplicate<\/b>, and Delete<\/b>. Click on Settings<\/b> to open up the right-side panel with all the settings available for the Date picker field.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Date<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Let’s take them one by one. <\/p>\n\n\n\n

You can provide a label and instructions, as for any other field. Using the toggles, you can mark the Date picker field as required, hidden, or readonly, depending on your needs.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\n
\n As of November 11th, 2024, we’ve introduced inline editing for form fields. Forms created on this date or later allow you to edit field labels and instructions inline by clicking directly on the text in the form editor.<\/span>\n <\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n

\n
\"Settings<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

By default, the date format is set to mm\/dd\/yyyy, which means respondents need to provide their input in this order: month, day, and year. You can choose to change this to either dd\/mm\/yyyy or yyyy\/mm\/dd.<\/p>\n\n\n

\n
\"Date<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can also choose the separator used to display the date. By default, we have set it up to \/, but you can change it to . or –<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Separator<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Another aspect that can be customized is the Default date<\/b>. By default, it is set to None<\/em>, but you can change it to Current <\/em>or Custom<\/em>. When current is selected, the date picker will automatically display the current date your respondent accessed the form.<\/p>\n\n\n\n

By choosing custom, you can select which date should be displayed on the form instead.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Default<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can bring some customization to the calendar itself by choosing on which day of the week the calendar should start – Sunday or Monday. <\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Week<\/a><\/figure>\n<\/div>\n\n\n
\n\n\n\n

Validation<\/h2>\n\n\n\n

Under the Validation section, you can find three options for validation: Age verification, Disable days, and Start & End date.<\/p>\n\n\n

\n
\"Validation<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Age verification<\/b> – let’s say you are interested in receiving submissions only from respondents who are over 13 years old. In this case, all you have to do is to enable Age verification<\/em> and write down the minimum age threshold. <\/p>\n\n\n\n

Note<\/b>: When Age verification is enabled, you can not use Disable days and Start & End date options as they are not compatible. <\/span><\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Age<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Disable days<\/b> – if you want to prevent respondents from selecting a certain day of the week, then all you have to do is to enable Disable days<\/em> and select the days you are interested in disabling. <\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Disable<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Start & End date<\/b> – if you are interested in allowing your respondents to select dates between a certain timeframe, then you have to enable Start & End<\/em> date and select the dates.<\/p>\n\n\n

\n
\"Start<\/a><\/figure>\n<\/div>\n\n\n
\n\n\n\n

Rules<\/h2>\n\n\n\n

You can set up field rules with the new Date picker<\/b> field. After selecting the field, you have to check the logic operators (you can see them all in the below screenshot). <\/p>\n\n\n\n

Then, by clicking on the calendar icon, you can select the exact date you are interested in. <\/p>\n\n\n\n

Note<\/b>: if you go with manually typing the date in Rules, then please follow the ISO format to collect data: YYYY-MM-DD. If you go with any other format, the rule will not work. <\/span><\/p>\n\n\n\n

\"rules<\/a><\/figure>\n\n\n\n
\"date<\/a><\/figure>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

The new Date picker field can be found under the Essentials category. Its role is to help you gather date information from your respondents. Setup Once you’ve added the Date picker field to your form, you will notice a sidebar menu with 3 options: Settings, Duplicate, and Delete. Click on Settings to open up the […]<\/p>\n","protected":false},"author":96,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[35],"tags":[1563,1564],"class_list":["post-47135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-formeditor","tag-date-picker","tag-how-to-set-date-picker"],"yoast_head":"\nDate Picker field - 123FormBuilder Knowledge Base<\/title>\n<meta name=\"description\" content=\"Allow your respondents to select a date by using our new and improved Date Picker field on your 123FormBuilder form.\" \/>\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.123formbuilder.com\/docs\/date-picker-field\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Date Picker field\" \/>\n<meta property=\"og:description\" content=\"Allow your respondents to select a date by using our new and improved Date Picker field on your 123FormBuilder form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-15T10:58:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-14T09:39:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/10\/Screenshot-2023-10-26-at-12.47.08-591x1024.png\" \/>\n<meta name=\"author\" content=\"Adriana Muntean\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adriana Muntean\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Date Picker field - 123FormBuilder Knowledge Base","description":"Allow your respondents to select a date by using our new and improved Date Picker field on your 123FormBuilder form.","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.123formbuilder.com\/docs\/date-picker-field\/","og_locale":"en_US","og_type":"article","og_title":"Date Picker field","og_description":"Allow your respondents to select a date by using our new and improved Date Picker field on your 123FormBuilder form.","og_url":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2023-11-15T10:58:55+00:00","article_modified_time":"2024-11-14T09:39:48+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/10\/Screenshot-2023-10-26-at-12.47.08-591x1024.png","type":"","width":"","height":""}],"author":"Adriana Muntean","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Adriana Muntean","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/#article","isPartOf":{"@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/"},"author":{"name":"Adriana Muntean","@id":"https:\/\/www.123formbuilder.com\/docs\/#\/schema\/person\/4dcefcf132999728e04a78e4b0482294"},"headline":"Date Picker field","datePublished":"2023-11-15T10:58:55+00:00","dateModified":"2024-11-14T09:39:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/"},"wordCount":535,"commentCount":0,"image":{"@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/10\/Screenshot-2023-10-26-at-12.47.08-591x1024.png","keywords":["date picker","how to set date picker"],"articleSection":["Form Editor"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/","url":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/","name":"Date Picker field - 123FormBuilder Knowledge Base","isPartOf":{"@id":"https:\/\/www.123formbuilder.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/#primaryimage"},"image":{"@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/10\/Screenshot-2023-10-26-at-12.47.08-591x1024.png","datePublished":"2023-11-15T10:58:55+00:00","dateModified":"2024-11-14T09:39:48+00:00","author":{"@id":"https:\/\/www.123formbuilder.com\/docs\/#\/schema\/person\/4dcefcf132999728e04a78e4b0482294"},"description":"Allow your respondents to select a date by using our new and improved Date Picker field on your 123FormBuilder form.","breadcrumb":{"@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/10\/Screenshot-2023-10-26-at-12.47.08-591x1024.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/10\/Screenshot-2023-10-26-at-12.47.08-591x1024.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.123formbuilder.com\/docs\/date-picker-field\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.123formbuilder.com\/docs\/"},{"@type":"ListItem","position":2,"name":"Date Picker field"}]},{"@type":"WebSite","@id":"https:\/\/www.123formbuilder.com\/docs\/#website","url":"https:\/\/www.123formbuilder.com\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.123formbuilder.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.123formbuilder.com\/docs\/#\/schema\/person\/4dcefcf132999728e04a78e4b0482294","name":"Adriana Muntean","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/577d902d5caa75f14ef569e8ffc87b97c2c7ddcbcca368be19af03f3ae48840b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAdriana%2BMuntean%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/577d902d5caa75f14ef569e8ffc87b97c2c7ddcbcca368be19af03f3ae48840b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAdriana%2BMuntean%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/577d902d5caa75f14ef569e8ffc87b97c2c7ddcbcca368be19af03f3ae48840b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAdriana%2BMuntean%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"Adriana Muntean"},"url":"https:\/\/www.123formbuilder.com\/docs\/author\/adrianamuntean\/"}]}},"_links":{"self":[{"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/posts\/47135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/users\/96"}],"replies":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/comments?post=47135"}],"version-history":[{"count":7,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/posts\/47135\/revisions"}],"predecessor-version":[{"id":49485,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/posts\/47135\/revisions\/49485"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/media?parent=47135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/categories?post=47135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/tags?post=47135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}