diff --git a/app/main-page.js b/app/main-page.js
index c3c2ede..4cfd5fa 100644
--- a/app/main-page.js
+++ b/app/main-page.js
@@ -7,8 +7,8 @@ const navigationLinks = [
     new link("Animations", "ui/animations/animations-page"),
     new link("Button", "ui/button/button-page"),
     new link("Borders", "ui/borders/borders-page"),
+    new link("DatePicker", "ui/date-picker/date-picker-page"),
 
-    new link("DatePicker", "/date-picker"),
     new link("Dialogs", "/dialogs"),
     new link("Layouts", "/layouts"),
     new link("TimePicker", "ui/time-picker/time-picker-page"),
diff --git a/app/ui/date-picker/basics/article.md b/app/ui/date-picker/basics/article.md
new file mode 100644
index 0000000..90021b7
--- /dev/null
+++ b/app/ui/date-picker/basics/article.md
@@ -0,0 +1,7 @@
+The date picker element can accept JavaScript `Date` object for `date`, `minDate`, and `maxDate` properties.
+Emiting the properties `minDate` and `maxDate` will set default year range from 1900 AD to 2100 AD.
+<snippet id='date-picker-basics-date'/>
+<snippet id='date-picker-dates'/>
+
+The control can also accept number values for `day`, `month`, and `year` properties.
+<snippet id='date-picker-basics-props'/>
\ No newline at end of file
diff --git a/app/ui/date-picker/basics/basics-page.js b/app/ui/date-picker/basics/basics-page.js
new file mode 100644
index 0000000..d2a9d9d
--- /dev/null
+++ b/app/ui/date-picker/basics/basics-page.js
@@ -0,0 +1,15 @@
+const Observable = require("tns-core-modules/data/observable").Observable;
+
+function onNavigatingTo(args) {
+    const page = args.object;
+    const vm = new Observable();
+
+    // >> date-picker-dates
+    const TODAY = new Date();
+    vm.set("date", TODAY);
+    vm.set("minDate", new Date(1975, 0, 29));
+    vm.set("maxDate", new Date(2045, 4, 12));
+    // << date-picker-dates
+    page.bindingContext = vm;
+}
+exports.onNavigatingTo = onNavigatingTo;
diff --git a/app/ui/date-picker/basics/basics-page.xml b/app/ui/date-picker/basics/basics-page.xml
new file mode 100644
index 0000000..f8c6d9a
--- /dev/null
+++ b/app/ui/date-picker/basics/basics-page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="Basics"/>
+	</Page.actionBar>
+    <StackLayout verticalAlignment="middle">
+        <!-- >> date-picker-basics-date -->
+        <DatePicker date="{{ date }}" minDate="{{ minDate }}" maxDate="{{ maxDate }}"></DatePicker>
+        <!-- << date-picker-basics-date -->
+        <!-- >> date-picker-basics-props -->
+        <DatePicker day="20" month="04" year="1980"></DatePicker>
+        <!-- << date-picker-basics-props -->
+    </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/app/ui/date-picker/code-behind/article.md b/app/ui/date-picker/code-behind/article.md
new file mode 100644
index 0000000..20f05b8
--- /dev/null
+++ b/app/ui/date-picker/code-behind/article.md
@@ -0,0 +1,5 @@
+Using a `DatePicker` in code-behind files requires the `tns-core-modules/ui/date-picker` module.
+<snippet id='date-picker-require'/>
+
+Creating and controlling `DatePicker` programmatically.
+<snippet id='date-picker-code-behind'/>
\ No newline at end of file
diff --git a/app/ui/date-picker/code-behind/code-behind-page.js b/app/ui/date-picker/code-behind/code-behind-page.js
new file mode 100644
index 0000000..227aa36
--- /dev/null
+++ b/app/ui/date-picker/code-behind/code-behind-page.js
@@ -0,0 +1,20 @@
+// >> date-picker-require
+const DatePicker = require("tns-core-modules/ui/date-picker").DatePicker;
+// << date-picker-require
+
+exports.onStackLoaded = function(args) {
+    const stack = args.object;
+
+    // >> date-picker-code-behind
+    const datePicker = new DatePicker();
+    datePicker.day = 20;
+    datePicker.month = 4;
+    datePicker.year = 1980;
+    // datePicker.date = new Date(1980, 4, 20);
+
+    datePicker.minDate = new Date(1970, 12, 31);
+    datePicker.maxDate = new Date(2040, 4, 20);
+    // << date-picker-code-behind
+
+    stack.addChild(datePicker);
+};
diff --git a/app/ui/date-picker/code-behind/code-behind-page.xml b/app/ui/date-picker/code-behind/code-behind-page.xml
new file mode 100644
index 0000000..1ca9955
--- /dev/null
+++ b/app/ui/date-picker/code-behind/code-behind-page.xml
@@ -0,0 +1,6 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="Code-Behind"/>
+	</Page.actionBar>
+    <StackLayout verticalAlignment="middle" loaded="onStackLoaded" />
+</Page>
\ No newline at end of file
diff --git a/app/ui/date-picker/date-picker-page.js b/app/ui/date-picker/date-picker-page.js
new file mode 100644
index 0000000..77e63ce
--- /dev/null
+++ b/app/ui/date-picker/date-picker-page.js
@@ -0,0 +1,15 @@
+const ListViewLinksModel = require("../../links-view-model");
+const link = require("../../link");
+const navigationLinks = [
+    new link("Basics", "/ui/date-picker/basics/basics-page"),
+    new link("Code-Behind", "/ui/date-picker/code-behind/code-behind-page"),
+    new link("Styling", "/ui/date-picker/styling/styling-page")
+];
+function onNavigatingTo(args) {
+    const page = args.object;
+    page.bindingContext = new ListViewLinksModel({
+        links: navigationLinks,
+        actionBarTitle: args.context.title
+    });
+}
+exports.onNavigatingTo = onNavigatingTo;
diff --git a/app/ui/date-picker/date-picker-page.xml b/app/ui/date-picker/date-picker-page.xml
new file mode 100644
index 0000000..00183ee
--- /dev/null
+++ b/app/ui/date-picker/date-picker-page.xml
@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:myList="components" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="{{ actionBarTitle == null ? '' : actionBarTitle }}" icon="" class="action-bar"/>
+	</Page.actionBar>
+	<myList:list/>
+</Page>
\ No newline at end of file
diff --git a/app/ui/date-picker/end.md b/app/ui/date-picker/end.md
new file mode 100644
index 0000000..8e0b0cc
--- /dev/null
+++ b/app/ui/date-picker/end.md
@@ -0,0 +1,7 @@
+**API Reference for** [DatePicker Class](http://docs.nativescript.org/api-reference/modules/_ui_date_picker_.html)
+
+**Native Component**
+
+| Android                | iOS      |
+|:-----------------------|:---------|
+| [android.widget.DatePicker](http://developer.android.com/reference/android/widget/DatePicker.html) | [UIDatePicker](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIDatePicker_Class/index.html) | 
\ No newline at end of file
diff --git a/app/ui/date-picker/overview.md b/app/ui/date-picker/overview.md
new file mode 100644
index 0000000..ec19b7b
--- /dev/null
+++ b/app/ui/date-picker/overview.md
@@ -0,0 +1,3 @@
+NativeScript provides a `DatePicker` control that enables the user to choose a date as a ready-to-use dialog. 
+Every date part can be picked separately by its corresponding section of the control - for day, month and year.
+
diff --git a/app/ui/date-picker/styling/article.md b/app/ui/date-picker/styling/article.md
new file mode 100644
index 0000000..35abc57
--- /dev/null
+++ b/app/ui/date-picker/styling/article.md
@@ -0,0 +1,21 @@
+There are some limitations when styling `DatePicker` component, casued by the way the different native
+controls works on Android and on iOS. One major difference is that on Android we can control the font color by modifying the `colors.xml` file
+in `App_Resources/Android/values/colors.xml` while on iOS we can directly use the CSS property `color`.
+<snippet id='date-picker-styles'/>
+
+> **Android specifics:** On Android API21+ we can also change our `DatePicker` from the default `spinner` mode to `calendar` mode and also change the
+default background and color using the project's `app/App_Resources/Android/values-v21/colors.xml` color settings.
+To achieve that, go to `app/App_Resources/Android/values-v21/styles.xml` and modify the `DatePicker` default style.
+```XML
+<!-- DatePicker in calendar mode -->
+<style name="AppTheme" parent="AppThemeBase">
+    <item name="android:datePickerStyle">@style/CalendarDatePicker</item>
+</style>
+
+<style name="CalendarDatePicker" parent="android:Widget.Material.Light.DatePicker">
+    <item name="android:datePickerMode">calendar</item>
+    <item name="colorPrimary">@color/ns_blue</item>
+    <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+    <item name="colorAccent">@color/ns_accent</item>
+</style>
+```
\ No newline at end of file
diff --git a/app/ui/date-picker/styling/styling-page.css b/app/ui/date-picker/styling/styling-page.css
new file mode 100644
index 0000000..b78020e
--- /dev/null
+++ b/app/ui/date-picker/styling/styling-page.css
@@ -0,0 +1,8 @@
+/* >> date-picker-styles */
+.date-picker {
+    background-color: lightgray;
+    border-radius: 20;
+    color: orangered; /* iOS only*/
+    width: 80%;
+}
+/* << date-picker-styles */
\ No newline at end of file
diff --git a/app/ui/date-picker/styling/styling-page.xml b/app/ui/date-picker/styling/styling-page.xml
new file mode 100644
index 0000000..abad7d8
--- /dev/null
+++ b/app/ui/date-picker/styling/styling-page.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="Basics"/>
+	</Page.actionBar>
+    <StackLayout verticalAlignment="middle">
+        <!-- >> date-picker-styling -->
+        <DatePicker day="20" month="04" year="1980" class="date-picker"></DatePicker>
+        <!-- << date-picker-styling -->
+    </StackLayout>
+</Page>
\ No newline at end of file