From 081beb4d732d0daa1a39caee391ae2fc6fe81c59 Mon Sep 17 00:00:00 2001
From: Jasper Van Proeyen <trianglejuice@mac.com>
Date: Thu, 30 Jun 2022 14:42:02 +0200
Subject: [PATCH] Added placeholder option for datepicker

---
 CHANGELOG.md                               | 3 ++-
 packages/form/Readme.md                    | 1 +
 packages/form/src/Datepicker/Datepicker.js | 4 ++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78e464d5..6ff86fb1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,10 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
-## v6.3.1 - 2022-01-24
+## v6.4.0 - 2022-xx-xx
 
 ### Added
 - Added support for React 18
+- `Form` - Added placeholder option for datepicker
 
 ### Fixed
 - Made sure no extra space is created when flyout is closed
diff --git a/packages/form/Readme.md b/packages/form/Readme.md
index 16fc457b..bc868f41 100644
--- a/packages/form/Readme.md
+++ b/packages/form/Readme.md
@@ -561,6 +561,7 @@ const Datepicker = require('./src').Datepicker;
     name={"datepicker-name"}
     label={"Datepicker with input mask"}
     format={"DD/MM/YYYY"}
+    placeholder={"dd/mm/yyyy"}
     mask={"99/99/9999"}
     required={true}
     onChange={(date, isValid) => console.log('date is ' + date + ', and is valid ' + isValid)}
diff --git a/packages/form/src/Datepicker/Datepicker.js b/packages/form/src/Datepicker/Datepicker.js
index 0423b7dc..62455018 100644
--- a/packages/form/src/Datepicker/Datepicker.js
+++ b/packages/form/src/Datepicker/Datepicker.js
@@ -44,6 +44,8 @@ type
   disabled?: boolean,
   /** If it should be free text input or click only */
   readOnly?: boolean,
+  /** Set a placeholder. */
+  placeholder?: string,
   /** enable/disable the days during the weekend. */
   noWeekends?: boolean,
   /** Every date less than this date will be disabled. */
@@ -191,6 +193,7 @@ class Datepicker extends Component<Props> {
       required,
       disabled,
       readOnly,
+      placeholder,
       name,
       format,
       locale = 'nl',
@@ -235,6 +238,7 @@ class Datepicker extends Component<Props> {
           name={name}
           id={id || this.defaultId}
           value={input}
+          placeholder={placeholder}
           required={required}
           readOnly={readOnly}
           disabled={disabled}