Merge pull request #1682 from NativeScript/nnikolov/DatePickerDateProperty

Introducing DatePicker date property.

.gitignore

@@ -5,6 +5,7 @@
 .sublime-grunt.cache
 tscommand*.tmp.txt
 .tscache
+.vscode
 
 node_modules/
 dist/

apps/tests/ui/date-picker/date-picker-tests.ts

@@ -1,6 +1,5 @@
 import TKUnit = require("../../TKUnit");
-import helper = require("../helper");
+import testModule = require("../../ui-test");
-import viewModule = require("ui/core/view");
 import datePickerTestsNative = require("./date-picker-tests-native");
 import color = require("color");
 import platform = require("platform");
@@ -13,212 +12,6 @@ import datePickerModule = require("ui/date-picker");
 // ```
 // </snippet>
 
-function _createDatePicker(year?: number, month?: number, day?: number): datePickerModule.DatePicker {
-    // <snippet module="ui/date-picker" title="DatePicker">
-    // ## Creating a DatePicker
-    // ``` JavaScript
-    var datePicker = new datePickerModule.DatePicker();
-    // ```
-    // </snippet>
-    datePicker.id = "DatePicker";
-
-    if (year) {
-        datePicker.year = year;
-    }
-
-    if (month) {
-        datePicker.month = month;
-    }
-
-    if (day) {
-        datePicker.day = day;
-    }
-
-    return datePicker;
-}
-
-export function test_DummyForCodeSnippet() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        // <snippet module="ui/date-picker" title="DatePicker">
-        // ## Configuring a DatePicker
-        // ``` JavaScript
-        datePicker.year = 1980;
-        datePicker.month = 2;
-        datePicker.day = 9;
-        datePicker.minDate = new Date(1975, 0, 29);
-        datePicker.maxDate = new Date(2045, 4, 12);
-        // ```
-        // </snippet>
-    });
-}
-
-// Supported in iOS only.
-if (platform.device.os === platform.platformNames.ios) {
-    exports.test_set_color = function () {
-        helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-            var datePicker = <datePickerModule.DatePicker>views[0];
-            datePicker.color = new color.Color("red");
-            TKUnit.assertEqual(datePicker.color.ios.CGColor, datePicker.ios.valueForKey("textColor").CGColor, "datePicker.color");
-        });
-
-    }
-}
-
-export function test_WhenCreated_YearIsUndefined() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var actualValue = datePicker.year;
-        var expectedValue = undefined;
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function test_WhenCreated_MonthIsUndefined() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var actualValue = datePicker.month;
-        var expectedValue = undefined;
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function test_WhenCreated_DayIsUndefined() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var actualValue = datePicker.day;
-        var expectedValue = undefined;
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testYearFromLocalToNative() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var expectedValue = 1980;
-        datePicker.year = expectedValue;
-        var actualValue = datePickerTestsNative.getNativeYear(datePicker);
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testMonthFromLocalToNative() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var expectedValue = 5;
-        datePicker.month = expectedValue;
-        var actualValue = datePickerTestsNative.getNativeMonth(datePicker);
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testDayFromLocalToNative() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var expectedValue = 19;
-        datePicker.day = expectedValue;
-        var actualValue = datePickerTestsNative.getNativeDay(datePicker);
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testMaxDateFromLocalToNative() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var expectedValue = new Date(1980, 1, 9);
-        datePicker.maxDate = expectedValue;
-        var actualValue = datePickerTestsNative.getNativeMaxDate(datePicker);
-        TKUnit.assert(actualValue.getTime() === expectedValue.getTime(), "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testMinDateFromLocalToNative() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var expectedValue = new Date(1980, 1, 9);
-        datePicker.minDate = expectedValue;
-        var actualValue = datePickerTestsNative.getNativeMinDate(datePicker);
-        TKUnit.assert(actualValue.getTime() === expectedValue.getTime(), "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testYearFromNativeToLocal() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var expectedValue = 1981;
-        datePickerTestsNative.setNativeYear(datePicker, expectedValue);
-        var actualValue = datePicker.year;
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testMonthFromNativeToLocal() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-
-        //Use July as it has 31 days
-        var expectedValue = 7; 
-        datePickerTestsNative.setNativeMonth(datePicker, expectedValue);
-        var actualValue = datePicker.month;
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testYearMonthDayFromNativeToLocal() {
-    var testYear = 2000;
-    var testMonth = 3;
-    var testDay = 24;
-
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        datePickerTestsNative.setNativeDate(datePicker, testYear, testMonth, testDay);
-        assertDate(datePicker, testYear, testMonth, testDay);
-    });
-}
-
-export function testDayFromNativeToLocal() {
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        var expectedValue = 20;
-        datePickerTestsNative.setNativeDay(datePicker, expectedValue);
-        var actualValue = datePicker.day;
-        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
-    });
-}
-
-export function testSetYearMonthDay_BeforeLoaded() {
-    var testYear = 2000;
-    var testMonth = 3;
-    var testDay = 24;
-
-    helper.buildUIAndRunTest(_createDatePicker(testYear, testMonth, testDay), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-
-        TKUnit.assertEqual(datePicker.year, testYear, "datePicker.year");
-        TKUnit.assertEqual(datePicker.month, testMonth, "datePicker.month");
-        TKUnit.assertEqual(datePicker.day, testDay, "datePicker.day");
-
-        TKUnit.assertEqual(datePickerTestsNative.getNativeYear(datePicker), testYear, "Native datePicker.year");
-        TKUnit.assertEqual(datePickerTestsNative.getNativeMonth(datePicker), testMonth, "Native datePicker.month");
-        TKUnit.assertEqual(datePickerTestsNative.getNativeDay(datePicker), testDay, "Native datePicker.day");
-    });
-}
-
-export function testSetYearMonthDay_AfterLoaded() {
-    var testYear = 2000;
-    var testMonth = 3;
-    var testDay = 24;
-
-    helper.buildUIAndRunTest(_createDatePicker(), function (views: Array<viewModule.View>) {
-        var datePicker = <datePickerModule.DatePicker>views[0];
-        datePicker.year = testYear;
-        datePicker.month = testMonth;
-        datePicker.day = testDay;        
-
-        assertDate(datePicker, testYear, testMonth, testDay);
-    });
-}
-
 function assertDate(datePicker: datePickerModule.DatePicker, expectedYear: number, expectedMonth: number, expectedDay: number) {
     TKUnit.assertEqual(datePicker.year, expectedYear, "datePicker.year");
     TKUnit.assertEqual(datePicker.month, expectedMonth, "datePicker.month");
@@ -244,4 +37,259 @@ function assertDate(datePicker: datePickerModule.DatePicker, expectedYear: numbe
 //    console.log("nsDate.timeIntervalSince1970: " + nsDate.timeIntervalSince1970);
 //    console.log("picker.ios.maximumDate: " + picker.maximumDate);
 //    console.log("picker.ios.maximumDate.timeIntervalSince1970: " + picker.maximumDate.timeIntervalSince1970);
-//}
+//}
+
+export class DatePickerTest extends testModule.UITest<datePickerModule.DatePicker> {
+    public create() {
+        let datePicker = new datePickerModule.DatePicker();
+        datePicker.id = "DatePicker";
+        return datePicker;
+    }
+    
+    private setUpDatePicker(year?: number, month?: number, day?: number) {
+        if (year) {
+            this.testView.year = year;
+        }
+        
+        if (month) {
+            this.testView.month = month;
+        }
+        
+        if (day) {
+            this.testView.day = day;
+        }
+    }
+    
+    public test_DummyForCodeSnippet() {
+        let datePicker = new datePickerModule.DatePicker();
+        // <snippet module="ui/date-picker" title="DatePicker">
+        // ## Configuring a DatePicker
+        // ``` JavaScript
+        datePicker.year = 1980;
+        datePicker.month = 2;
+        datePicker.day = 9;
+        datePicker.minDate = new Date(1975, 0, 29);
+        datePicker.maxDate = new Date(2045, 4, 12);
+        // ```
+        // </snippet>
+    }
+    
+    public test_set_color() {
+        if (platform.device.os === platform.platformNames.ios) {
+            this.testView.color = new color.Color("red");
+            TKUnit.assertEqual(this.testView.color.ios.CGColor, this.testView.ios.valueForKey("textColor").CGColor, "datePicker.color");
+        }
+    }
+    
+    public test_WhenCreated_YearIsUndefined() {
+        let actualValue = this.testView.year;
+        let expectedValue = undefined;
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+
+    public test_WhenCreated_MonthIsUndefined() {
+        let actualValue = this.testView.month;
+        let expectedValue = undefined;
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+
+    public test_WhenCreated_DayIsUndefined() {
+        let actualValue = this.testView.day;
+        let expectedValue = undefined;
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+
+    public test_WhenCreated_DateIsUndefined() {
+        let actualValue = this.testView.date;
+        let expectedValue = undefined;
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+
+    public testYearFromLocalToNative() {
+        let expectedValue = 1980;
+        this.testView.year = expectedValue;
+        let actualValue = datePickerTestsNative.getNativeYear(this.testView);
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+
+    public testMonthFromLocalToNative() {
+        let expectedValue = 5;
+        this.testView.month = expectedValue;
+        let actualValue = datePickerTestsNative.getNativeMonth(this.testView);
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+
+    public testDayFromLocalToNative() {
+        let expectedValue = 19;
+        this.testView.day = expectedValue;
+        let actualValue = datePickerTestsNative.getNativeDay(this.testView);
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+    
+    public test_DateIsSetCorrectlyWhenDayIsSet() {
+        let today = new Date();
+        this.testView.year = today.getFullYear();
+        this.testView.month = today.getMonth();
+        let expectedValue = today.getDate() === 19 ? 18 : 19;
+        this.testView.day = expectedValue;
+        
+        let expectedDate = new Date(today.getFullYear(), today.getMonth() - 1, expectedValue);
+        TKUnit.assertEqual(this.testView.date.getDate(), expectedDate.getDate(), "Getting Day from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getMonth(), expectedDate.getMonth(), "Getting Month from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getFullYear(), expectedDate.getFullYear(), "Getting Year from date property failed.");
+    }
+    
+    public test_DateIsSetCorrectlyWhenMonthIsSet() {
+        let today = new Date();
+        this.testView.year = today.getFullYear();
+        this.testView.day = today.getDate();
+        
+        let expectedValue = today.getMonth() === 5 ? 4 : 5;
+        this.testView.month = expectedValue;
+        let expectedDate = new Date(today.getFullYear(), expectedValue - 1, today.getDate());
+        
+        TKUnit.assertEqual(this.testView.date.getDate(), expectedDate.getDate(), "Getting Day from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getMonth(), expectedDate.getMonth(), "Getting Month from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getFullYear(), expectedDate.getFullYear(), "Getting Year from date property failed.");
+    }
+    
+    public test_DateIsSetCorrectlyWhenYearIsSet() {
+        let today = new Date();
+        this.testView.month = today.getMonth();
+        this.testView.day = today.getDate();
+        
+        let expectedValue = 1980;
+        this.testView.year = expectedValue;
+        let expectedDate = new Date(1980, today.getMonth() - 1, today.getDate());
+        
+        TKUnit.assertEqual(this.testView.date.getDate(), expectedDate.getDate(), "Getting Day from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getMonth(), expectedDate.getMonth(), "Getting Month from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getFullYear(), expectedDate.getFullYear(), "Getting Year from date property failed.");
+    }
+    
+    public testMaxDateFromLocalToNative() {
+        let expectedValue = new Date(1980, 1, 9);
+        this.testView.maxDate = expectedValue;
+        let actualValue = datePickerTestsNative.getNativeMaxDate(this.testView);
+        TKUnit.assertEqual(actualValue.getTime(), expectedValue.getTime());
+    }
+    
+    public testMinDateFromLocalToNative() {
+        let expectedValue = new Date(1980, 1, 9);
+        this.testView.minDate = expectedValue;
+        let actualValue = datePickerTestsNative.getNativeMinDate(this.testView);
+        TKUnit.assertEqual(actualValue.getTime(), expectedValue.getTime());
+    }
+    
+    public testYearFromNativeToLocal() {
+        let expectedValue = 1981;
+        datePickerTestsNative.setNativeYear(this.testView, expectedValue);
+        let actualValue = this.testView.year;
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+    
+    public testMonthFromNativeToLocal() {
+        //Use July as it has 31 days
+        var expectedValue = 7;
+        datePickerTestsNative.setNativeMonth(this.testView, expectedValue);
+        var actualValue = this.testView.month;
+        TKUnit.assertEqual(actualValue, expectedValue);
+    }
+    
+    public testYearMonthDayFromNativeToLocal() {
+        var testYear = 2000;
+        var testMonth = 3;
+        var testDay = 24;
+
+        datePickerTestsNative.setNativeDate(this.testView, testYear, testMonth, testDay);
+        assertDate(this.testView, testYear, testMonth, testDay);
+    }
+    
+    public testDayFromNativeToLocal() {
+        let expectedValue = 20;
+        datePickerTestsNative.setNativeDay(this.testView, expectedValue);
+        let actualValue = this.testView.day;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    }
+    
+    public test_DateFromNativeToLocalWithDay() {
+        let today = new Date();
+        let expectedValue = 20;
+        
+        datePickerTestsNative.setNativeDate(this.testView, today.getFullYear(), today.getMonth(), expectedValue);
+        
+        let expectedDate = new Date(today.getFullYear(), today.getMonth() - 1, expectedValue);
+        TKUnit.assertEqual(this.testView.date.getDate(), expectedDate.getDate(), "Getting Day from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getMonth(), expectedDate.getMonth(), "Getting Month from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getFullYear(), expectedDate.getFullYear(), "Getting Year from date property failed.");
+    }
+    
+    public test_DateFromNativeToLocalWithMonth() {
+        let today = new Date();
+        let expectedValue = 7;
+        
+        datePickerTestsNative.setNativeDate(this.testView, today.getFullYear(), expectedValue, today.getDate());
+        
+        let expectedDate = new Date(today.getFullYear(), expectedValue - 1, today.getDate());
+        TKUnit.assertEqual(this.testView.date.getDate(), expectedDate.getDate(), "Getting Day from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getMonth(), expectedDate.getMonth(), "Getting Month from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getFullYear(), expectedDate.getFullYear(), "Getting Year from date property failed.");
+    }
+    
+    public test_DateFromNativeToLocalWithYear() {
+        let today = new Date();
+            
+        var expectedValue = 1981;
+        datePickerTestsNative.setNativeDate(this.testView, expectedValue, today.getMonth(), today.getDate());
+        
+        let expectedDate = new Date(expectedValue, today.getMonth() - 1, today.getDate());
+        TKUnit.assertEqual(this.testView.date.getDate(), expectedDate.getDate(), "Getting Day from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getMonth(), expectedDate.getMonth(), "Getting Month from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getFullYear(), expectedDate.getFullYear(), "Getting Year from date property failed.");
+    }
+    
+    public test_DateFromNativeToLocalWithAll() {
+        var testYear = 2000;
+        var testMonth = 3;
+        var testDay = 24;
+        
+        datePickerTestsNative.setNativeDate(this.testView, testYear, testMonth, testDay);
+        let expectedDate = new Date(testYear, testMonth - 1, testDay);
+        TKUnit.assertEqual(this.testView.date.getDate(), expectedDate.getDate(), "Getting Day from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getMonth(), expectedDate.getMonth(), "Getting Month from date property failed.");
+        TKUnit.assertEqual(this.testView.date.getFullYear(), expectedDate.getFullYear(), "Getting Year from date property failed.");
+    }
+    
+    public testSetYearMonthDay_BeforeLoaded() {
+        var testYear = 2000;
+        var testMonth = 3;
+        var testDay = 24;
+        
+        this.setUpDatePicker(testYear, testMonth, testDay);
+
+        TKUnit.assertEqual(this.testView.year, testYear, "datePicker.year");
+        TKUnit.assertEqual(this.testView.month, testMonth, "datePicker.month");
+        TKUnit.assertEqual(this.testView.day, testDay, "datePicker.day");
+
+        TKUnit.assertEqual(datePickerTestsNative.getNativeYear(this.testView), testYear, "Native datePicker.year");
+        TKUnit.assertEqual(datePickerTestsNative.getNativeMonth(this.testView), testMonth, "Native datePicker.month");
+        TKUnit.assertEqual(datePickerTestsNative.getNativeDay(this.testView), testDay, "Native datePicker.day");
+    }
+    
+    public testSetYearMonthDay_AfterLoaded() {
+        var testYear = 2000;
+        var testMonth = 3;
+        var testDay = 24;
+        
+        this.testView.year = testYear;
+        this.testView.month = testMonth;
+        this.testView.day = testDay;
+        
+        this.waitUntilTestElementIsLoaded();
+        assertDate(this.testView, testYear, testMonth, testDay);
+    }
+}
+
+export function createTestCase(): DatePickerTest {
+    return new DatePickerTest();
+}

ui/date-picker/date-picker-common.ts

@@ -9,6 +9,7 @@ export class DatePicker extends view.View implements definition.DatePicker {
     public static dayProperty = new dependencyObservable.Property("day", "DatePicker", new proxy.PropertyMetadata(undefined));
     public static maxDateProperty = new dependencyObservable.Property("maxDate", "DatePicker", new proxy.PropertyMetadata(undefined));
     public static minDateProperty = new dependencyObservable.Property("minDate", "DatePicker", new proxy.PropertyMetadata(undefined));
+    public static dateProperty = new dependencyObservable.Property("date", "DatePicker", new proxy.PropertyMetadata(undefined));
 
     constructor() {
         super();
@@ -48,4 +49,11 @@ export class DatePicker extends view.View implements definition.DatePicker {
     set minDate(value: Date) {
         this._setValue(DatePicker.minDateProperty, value);
     }
+    
+    get date(): Date {
+        return this._getValue(DatePicker.dateProperty);
+    }
+    set date(value: Date) {
+        this._setValue(DatePicker.dateProperty, value);
+    }
 } 

ui/date-picker/date-picker.android.ts

@@ -39,7 +39,7 @@ function updateNativeDate(picker: DatePicker) {
     var month = types.isNumber(picker.month) ? (picker.month - 1) : picker.android.getMonth();
     var day = types.isNumber(picker.day) ? picker.day : picker.android.getDayOfMonth();
 
-    picker.android.updateDate(year, month, day);
+    picker.date = new Date(year, month, day);
 }
 
 function onMaxDatePropertyChanged(data: dependencyObservable.PropertyChangeData) {
@@ -64,6 +64,19 @@ function onMinDatePropertyChanged(data: dependencyObservable.PropertyChangeData)
 
 (<proxy.PropertyMetadata>common.DatePicker.minDateProperty.metadata).onSetNativeValue = onMinDatePropertyChanged;
 
+function onDatePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var picker = <DatePicker>data.object;
+
+    var newValue = <Date>data.newValue;
+    if (picker.android && (picker.android.getDayOfMonth() !== newValue.getDay() 
+                            || picker.android.getMonth() !== newValue.getMonth() 
+                            || picker.android.getYear() !== newValue.getFullYear())) {
+        picker.android.updateDate(newValue.getFullYear(), newValue.getMonth(), newValue.getDate());
+    }
+}
+
+(<proxy.PropertyMetadata>common.DatePicker.dateProperty.metadata).onSetNativeValue = onDatePropertyChanged;
+
 global.moduleMerge(common, exports);
 
 export class DatePicker extends common.DatePicker {
@@ -90,14 +103,17 @@ export class DatePicker extends common.DatePicker {
 
                     if (year !== this.owner.year) {
                         this.owner._onPropertyChangedFromNative(common.DatePicker.yearProperty, year);
+                        this.owner._onPropertyChangedFromNative(common.DatePicker.dateProperty, new Date(year, this.owner.month - 1, this.owner.day));
                     }
 
                     if ((month + 1) !== this.owner.month) {
                         this.owner._onPropertyChangedFromNative(common.DatePicker.monthProperty, month + 1);
+                        this.owner._onPropertyChangedFromNative(common.DatePicker.dateProperty, new Date(this.owner.year, month, this.owner.day));
                     }
 
                     if (day !== this.owner.day) {
                         this.owner._onPropertyChangedFromNative(common.DatePicker.dayProperty, day);
+                        this.owner._onPropertyChangedFromNative(common.DatePicker.dateProperty, new Date(this.owner.year, this.owner.month - 1, day));
                     }
                 }
             }

ui/date-picker/date-picker.d.ts

@@ -12,6 +12,7 @@ declare module "ui/date-picker" {
         public static yearProperty: dependencyObservable.Property;
         public static monthProperty: dependencyObservable.Property;
         public static dayProperty: dependencyObservable.Property;
+        public static dateProperty: dependencyObservable.Property;
 
         constructor();
 
@@ -39,6 +40,11 @@ declare module "ui/date-picker" {
          * Gets or sets the day. The days start from 1.
          */
         day: number;
+        
+        /**
+         * Gets or sets the entire date.
+         */
+        date: Date;
 
         /**
          * Gets or sets the max date.

ui/date-picker/date-picker.ios.ts

@@ -10,7 +10,7 @@ function onYearPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     if (picker.ios) {
         var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitYear | NSCalendarUnit.NSCalendarUnitMonth | NSCalendarUnit.NSCalendarUnitDay, picker.ios.date);
         comps.year = data.newValue;
-        picker.ios.setDateAnimated(NSCalendar.currentCalendar().dateFromComponents(comps), false);
+        picker.date = new Date(comps.year, comps.month - 1, comps.day);
     }
 }
 
@@ -22,7 +22,7 @@ function onMonthPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     if (picker.ios) {
         var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitYear | NSCalendarUnit.NSCalendarUnitMonth | NSCalendarUnit.NSCalendarUnitDay, picker.ios.date);
         comps.month = data.newValue;
-        picker.ios.setDateAnimated(NSCalendar.currentCalendar().dateFromComponents(comps), false);
+        picker.date = new Date(comps.year, comps.month - 1, comps.day);
     }
 }
 
@@ -34,7 +34,7 @@ function onDayPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     if (picker.ios) {
         var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitYear | NSCalendarUnit.NSCalendarUnitMonth | NSCalendarUnit.NSCalendarUnitDay, picker.ios.date);
         comps.day = data.newValue;
-        picker.ios.setDateAnimated(NSCalendar.currentCalendar().dateFromComponents(comps), false);
+        picker.date = new Date(comps.year, comps.month - 1, comps.day);
     }
 }
 
@@ -61,6 +61,21 @@ function onMinDatePropertyChanged(data: dependencyObservable.PropertyChangeData)
 
 (<proxy.PropertyMetadata>common.DatePicker.minDateProperty.metadata).onSetNativeValue = onMinDatePropertyChanged;
 
+function onDatePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var picker = <DatePicker>data.object;
+
+    if (picker.ios) {
+        var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitYear | NSCalendarUnit.NSCalendarUnitMonth | NSCalendarUnit.NSCalendarUnitDay, picker.ios.date);
+        let newDate = data.newValue;
+        comps.year = newDate.getFullYear();
+        comps.month = newDate.getMonth() + 1;
+        comps.day = newDate.getDate();
+        picker.ios.setDateAnimated(NSCalendar.currentCalendar().dateFromComponents(comps), false);
+    }
+}
+
+(<proxy.PropertyMetadata>common.DatePicker.dateProperty.metadata).onSetNativeValue = onDatePropertyChanged;
+
 global.moduleMerge(common, exports);
 
 export class DatePicker extends common.DatePicker {
@@ -100,16 +115,24 @@ class UIDatePickerChangeHandlerImpl extends NSObject {
             return;
         }
 
+        let dateChanged = false;
         if (comps.year !== owner.year) {
             owner._onPropertyChangedFromNative(common.DatePicker.yearProperty, comps.year);
+            dateChanged = true;
         }
 
         if (comps.month !== owner.month) {
             owner._onPropertyChangedFromNative(common.DatePicker.monthProperty, comps.month);
+            dateChanged = true;
         }
 
         if (comps.day !== owner.day) {
             owner._onPropertyChangedFromNative(common.DatePicker.dayProperty, comps.day);
+            dateChanged = true;
+        }
+        
+        if (dateChanged) {
+            owner._onPropertyChangedFromNative(common.DatePicker.dateProperty, new Date(comps.year, comps.month - 1, comps.day));
         }
     }