Merge pull request #1020 from NativeScript/date-time-picker-css-color

DatePicker and TimePicker stylers added

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

@@ -2,6 +2,8 @@
 import helper = require("../helper");
 import viewModule = require("ui/core/view");
 import datePickerTestsNative = require("./date-picker-tests-native");
+import color = require("color");
+import platform = require("platform");
 
 // <snippet module="ui/date-picker" title="DatePicker">
 // # DatePicker
@@ -51,6 +53,18 @@ export function test_DummyForCodeSnippet() {
     });
 }
 
+// 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];

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

@@ -2,6 +2,8 @@
 import helper = require("../helper");
 import viewModule = require("ui/core/view");
 import timePickerTestsNative = require("./time-picker-tests-native");
+import color = require("color");
+import platform = require("platform");
 
 // <snippet module="ui/time-picker" title="TimePicker">
 // # TimePicker
@@ -44,6 +46,18 @@ export function test_DummyForCodeSnippet() {
     });
 }
 
+// Supported in iOS only.
+if (platform.device.os === platform.platformNames.ios) {
+    exports.test_set_color = function () {
+        helper.buildUIAndRunTest(_createTimePicker(), function (views: Array<viewModule.View>) {
+            var timePicker = <timePickerModule.TimePicker>views[0];
+            timePicker.color = new color.Color("red");
+            TKUnit.assertEqual(timePicker.color.ios.CGColor, timePicker.ios.valueForKey("textColor").CGColor, "timePicker.color");
+        });
+
+    }
+}
+
 export function test_WhenCreated_HourIsUndefined() {
     helper.buildUIAndRunTest(_createTimePicker(), function (views: Array<viewModule.View>) {
         var timePicker = <timePickerModule.TimePicker>views[0];

ui/styling/stylers.ios.ts

@@ -814,6 +814,56 @@ export class TabViewStyler implements definition.stylers.Styler {
     }
 }
 
+export class DatePickerStyler implements definition.stylers.Styler {
+    // color
+    private static setColorProperty(view: view.View, newValue: any) {
+        var picker = <UIDatePicker>view._nativeView;
+        picker.setValueForKey(newValue, "textColor");
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var picker = <UIDatePicker>view._nativeView;
+        picker.setValueForKey(nativeValue, "textColor");
+    }
+
+    private static getColorProperty(view: view.View): any {
+        var picker = <UIDatePicker>view._nativeView;
+        return picker.valueForKey("textColor");
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            DatePickerStyler.setColorProperty,
+            DatePickerStyler.resetColorProperty,
+            DatePickerStyler.getColorProperty), "DatePicker");
+    }
+}
+
+export class TimePickerStyler implements definition.stylers.Styler {
+    // color
+    private static setColorProperty(view: view.View, newValue: any) {
+        var picker = <UIDatePicker>view._nativeView;
+        picker.setValueForKey(newValue, "textColor");
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var picker = <UIDatePicker>view._nativeView;
+        picker.setValueForKey(nativeValue, "textColor");
+    }
+
+    private static getColorProperty(view: view.View): any {
+        var picker = <UIDatePicker>view._nativeView;
+        return picker.valueForKey("textColor");
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            TimePickerStyler.setColorProperty,
+            TimePickerStyler.resetColorProperty,
+            TimePickerStyler.getColorProperty), "TimePicker");
+    }
+}
+
 function setTextAlignment(view: TextUIView, value: string) {
     switch (value) {
         case enums.TextAlignment.left:
@@ -846,4 +896,6 @@ export function _registerDefaultStylers() {
     TextFieldStyler.registerHandlers();
     ActivityIndicatorStyler.registerHandlers();
     SliderStyler.registerHandlers();
+    DatePickerStyler.registerHandlers();
+    TimePickerStyler.registerHandlers();
 }