diff --git a/nativescript-bind-elm/src/Native.elm b/nativescript-bind-elm/src/Native.elm
index 5eda392..7880711 100644
--- a/nativescript-bind-elm/src/Native.elm
+++ b/nativescript-bind-elm/src/Native.elm
@@ -1,4 +1,4 @@
-module Native exposing (activityIndicator, button, formattedString, label, span)
+module Native exposing (activityIndicator, button, formattedString, label, span, datePicker)
 
 import Html exposing (Attribute, Html)
 
@@ -31,3 +31,7 @@ formattedString =
 span : List (Attribute msg) -> List (Html msg) -> Html msg
 span =
     buildElement "ns-span"
+
+datePicker : List (Attribute msg) -> List (Html msg) -> Html msg
+datePicker =
+    buildElement "ns-datepicker"
diff --git a/nativescript-bind-elm/src/Native/Attributes.elm b/nativescript-bind-elm/src/Native/Attributes.elm
index 8d55f7c..3d8cd91 100644
--- a/nativescript-bind-elm/src/Native/Attributes.elm
+++ b/nativescript-bind-elm/src/Native/Attributes.elm
@@ -767,3 +767,38 @@ enableSwipeBackNavigation =
 statusBarStyle : String -> Attribute msg
 statusBarStyle =
     attribute "status-bar-style"
+
+
+date : String -> Attribute msg
+date =
+    attribute "date"
+
+
+iosPreferredDatePickerStyle : String -> Attribute msg
+iosPreferredDatePickerStyle =
+    attribute "ios-preferred-date-picker-style"
+
+
+maxDate : String -> Attribute msg
+maxDate =
+    attribute "max-date"
+
+
+minDate : String -> Attribute msg
+minDate =
+    attribute "min-date"
+
+
+day : String -> Attribute msg
+day =
+    attribute "day"
+
+
+month : String -> Attribute msg
+month =
+    attribute "month"
+
+
+year : String -> Attribute msg
+year =
+    attribute "year"
diff --git a/nativescript-bind-res/Native/Constants.res b/nativescript-bind-res/Native/Constants.res
index 3488c07..6033da7 100644
--- a/nativescript-bind-res/Native/Constants.res
+++ b/nativescript-bind-res/Native/Constants.res
@@ -214,15 +214,10 @@ let formattedString =
 
 let span = [formattedString, ["text"]->Belt.Array.map(dashed)]->Belt.Array.concatMany
 
+let datePicker = [view, ["date", "day", "iosPreferredDatePickerStyle", "maxDate", "minDate", "month", "year"]->Belt.Array.map(dashed)]->Belt.Array.concatMany
+
 // Js.log("****************************")
-// [
-//   "accessibilityAnnouncePageEnabled",
-//   "actionBarHidden",
-//   "androidStatusBarBackground",
-//   "backgroundSpanUnderStatusBar",
-//   "enableSwipeBackNavigation",
-//   "statusBarStyle",
-// ]
+// ["date", "day", "iosPreferredDatePickerStyle", "maxDate", "minDate", "month", "year"]
 // ->Belt.Array.map(dashed)
 // ->Belt.Array.forEach(prop =>
 //   Js.log(
diff --git a/nativescript-bind-res/Native/Elements.res b/nativescript-bind-res/Native/Elements.res
index 108fa1a..4bf9287 100644
--- a/nativescript-bind-res/Native/Elements.res
+++ b/nativescript-bind-res/Native/Elements.res
@@ -65,6 +65,15 @@ module Span = {
 
   let handler: Types.handler = buildHandler(new, Constants.span, Helper.addSpan)
 }
+module DatePicker = {
+  %%private(
+    @module("@nativescript/core") @new
+    external new: unit => Types.nativeObject = "DatePicker"
+  )
+  let tagName = "ns-datepicker"
+
+  let handler: Types.handler = buildHandler(new, Constants.datePicker, Helper.addView)
+}
 
 let all: array<Types.customElement> = [
   {
@@ -87,4 +96,8 @@ let all: array<Types.customElement> = [
     tagName: Span.tagName,
     handler: Span.handler,
   },
+  {
+    tagName: DatePicker.tagName,
+    handler: DatePicker.handler,
+  },
 ]
diff --git a/nativescript-bind-res/Native/Helper.res b/nativescript-bind-res/Native/Helper.res
index c99bd1e..2ade7aa 100644
--- a/nativescript-bind-res/Native/Helper.res
+++ b/nativescript-bind-res/Native/Helper.res
@@ -37,9 +37,7 @@ let addView: (. Types.htmlElement, Types.htmlElement) => unit = %raw(`
         if (parentElement.data == null) return
         requestAnimationFrame(() => {
             const children = Array.from(parentElement.children)
-            const hasActionBar = children.some(x =>
-            x.tagName.toLowerCase() === "ns-action-bar"
-            )
+            const hasActionBar = children.some(x => x.tagName.toLowerCase() === "ns-action-bar")
             const index = children.indexOf(thisElement)
             const currentIdx = hasActionBar ? index - 1 : index
             parentElement.data.insertChild(thisElement.data, currentIdx)
diff --git a/src/Main.elm b/src/Main.elm
index e9ac65c..40e8573 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -91,6 +91,35 @@ helloWorld count =
 -- , Native.button [ NA.text "Tap", Event.on "tap" (D.succeed Inc) ] []
 
 
+counter model =
+    Layout.asElement <|
+        Layout.flexboxLayout
+            [ NA.justifyContent "space-between"
+            , NA.height "70%"
+            ]
+            [ Native.button
+                [ NA.text "Increment"
+                , Event.on "tap" (D.succeed Inc)
+                , NA.fontSize "24"
+                ]
+                []
+            , helloWorld model.count
+            , Native.button
+                [ Event.on "tap" (D.succeed Dec)
+                , NA.fontSize "24"
+                ]
+                [ Native.formattedString []
+                    [ Native.span
+                        [ NA.text "Decrement"
+                        , NA.style "color: red"
+                        , NA.fontStyle "italic"
+                        ]
+                        []
+                    ]
+                ]
+            ]
+
+
 detailsPage : Model -> Page.Page Msg
 detailsPage model =
     Page.page []
@@ -110,30 +139,15 @@ detailsPage model =
                 []
             , Layout.asElement <|
                 Layout.flexboxLayout
-                    [ NA.justifyContent "space-between"
-                    , NA.height "70%"
+                    [ NA.flexDirection "column"
                     ]
-                    [ Native.button
-                        [ NA.text "Increment"
-                        , Event.on "tap" (D.succeed Inc)
-                        , NA.fontSize "24"
+                    [ Native.datePicker
+                        [ NA.year "1980"
+                        , NA.month "4"
+                        , NA.day "20"
+                        , NA.minDate "1980-02-01"
                         ]
                         []
-                    , helloWorld model.count
-                    , Native.button
-                        [ Event.on "tap" (D.succeed Dec)
-                        , NA.fontSize "24"
-                        ]
-                        [ Native.formattedString []
-                            [
-                                Native.span
-                                    [ NA.text "Decrement"
-                                    , NA.style "color: red"
-                                    , NA.fontStyle "italic"
-                                    ]
-                                    []
-                            ]
-                        ]
                     ]
             ]
         )