[Timepicker] UX1.1: popup spinner text color is changed in light theme and spinner...
[platform/core/uifw/efl-theme-tizen.git] / themes / widgets / datetime.edc
index 5095804..185d159 100644 (file)
 // datetime
 ///////////////////////////////////////////////////////////////////////////////
 
-#define DATETIME_FIELD(_pos, _after) \
+#define DATETIME_PADDING(_pos, prev_part) \
    part {\
-      name: "field"#_pos; \
-      type: SWALLOW; \
+      name: "picker.padding"#_pos; \
+      type: RECT; \
       scale: 1;\
       clip_to: "clipper";\
-      repeat_events: 1;\
       description { state: "default" 0.0; \
+         color: 0 0 0 0;\
+         min: 0 0;\
+         align: 0.0 0.5;\
+         fixed: 1 0;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: prev_part;\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: prev_part;\
+         }\
+      }\
+      description { state: "enable" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_FIELD_PICKER_PADDING_SIZE_INC;\
+      }\
+   }\
+   part {\
+      name: "left.padding"#_pos; \
+      type: RECT; \
+      scale: 1;\
+      clip_to: "clipper";\
+      mouse_events: 0;\
+      description { state: "default" 0.0; \
+         color: 0 0 0 0;\
+         min: 0 0;\
+         visible: 0;\
+         align: 0.0 0.5;\
+         fixed: 1 0;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "picker.padding"#_pos;\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "picker.padding"#_pos;\
+         }\
+      }\
+      description { state: "enable" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_FIELD_LEFT_PADDING_SIZE_INC;\
+      }\
+   }\
+   part {\
+      name: "right.padding"#_pos; \
+      type: RECT;\
+      scale: 1;\
+      clip_to: "clipper";\
+      mouse_events: 0;\
+      description {\
+         state: "default" 0.0;\
+         color: 0 0 0 0;\
          visible: 0;\
          min: 0 0;\
          align: 0.0 0.5;\
-         fixed: 1 1;\
+         fixed: 1 0;\
          rel1 {\
             relative: 1.0 0.0;\
-            to: "separator"#_after;\
+            to: "field"#_pos;\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "separator"#_after;\
+            to: "field"#_pos;\
          }\
       }\
       description { state: "enable" 0.0;\
          inherit: "default" 0.0;\
-         visible: 1;\
-         min: DATETIME_FIELD_MIN_SIZE_INC;\
+         min: DATETIME_FIELD_RIGHT_PADDING_SIZE_INC;\
       }\
    }\
    programs{\
          signal: "field"#_pos",enable";\
          source: "elm";\
          action: STATE_SET "enable" 0.0;\
+         target: "left.padding"#_pos;\
+         target: "right.padding"#_pos;\
          target: "field"#_pos;\
       }\
       program {\
          signal: "field"#_pos",disable";\
          source: "elm";\
          action: STATE_SET "default" 0.0;\
+         target: "left.padding"#_pos;\
+         target: "right.padding"#_pos;\
          target: "field"#_pos;\
       }\
-    }
+   }
 
-#define DATETIME_SEPARATOR(_pos) \
+#define DATETIME_FIELD(_pos) \
+   part {\
+      name: "field"#_pos; \
+      type: SWALLOW; \
+      scale: 1;\
+      clip_to: "clipper";\
+      repeat_events: 1;\
+      description { state: "default" 0.0; \
+         visible: 0;\
+         min: 0 0;\
+         align: 0.0 0.5;\
+         fixed: 1 0;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "left.padding"#_pos;\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "left.padding"#_pos;\
+         }\
+      }\
+      description { state: "enable" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+         min: DATETIME_FIELD_MIN_SIZE_INC;\
+      }\
+   }\
    part {\
       name: "separator"#_pos; \
       type: TEXT;\
       scale: 1;\
       clip_to: "clipper";\
-      repeat_events: 1;\
+      mouse_events: 0;\
       description {\
          state: "default" 0.0;\
          visible: 0;\
-         min: DATETIME_SEPARATOR_MIN_SIZE_INC;\
-         max: DATETIME_SEPARATOR_MIN_SIZE_INC;\
+         min: 0 0;\
          align: 0.0 0.5;\
-         fixed: 1 1;\
+         fixed: 1 0;\
          rel1 {\
             relative: 1.0 0.0;\
-            to: "field"#_pos;\
+            to: "right.padding"#_pos;\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "field"#_pos;\
+            to: "right.padding"#_pos;\
          }\
          color: DATETIME_SEPARATOR_TEXT_COLOR_INC;\
          text {\
       description { state: "enable" 0.0;\
          inherit: "default" 0.0;\
          visible: 1;\
-      }\
-      description { state: "hide" 0.0;\
-         inherit: "default" 0.0;\
-         min: 0 0;\
-         max: 0 0;\
+         min: DATETIME_SEPARATOR_MIN_SIZE_INC;\
       }\
    }\
-   programs {\
+   programs{\
       program {\
          name: "separator"#_pos",enabled";\
          signal: "field"#_pos",separator,enable";\
          name: "separator"#_pos",disabled";\
          signal: "field"#_pos",separator,disable";\
          source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "separator"#_pos;\
+      }\
+   }
+
+#define DATETIME_PICKER_PADDING_PROGRAMS \
+      program {\
+         name: "datepicker_starting_field2_padding";\
+         signal: "datepicker,starting,field2";\
+         source: "elm";\
          script {\
-            new st[31];\
-            new Float:vl;\
-            get_state(PART:"separator"#_pos, st, 30, vl);\
-            if (strcmp(st, "hide")) \
-            {\
-               set_state(PART:"separator"#_pos, "default", 0.0);\
-            }\
+            set_state(PART:"picker.padding2", "enable", 0.0);\
+            set_state(PART:"picker.padding3", "default", 0.0);\
          }\
       }\
       program {\
-         name: "separator"#_pos",hide";\
-         signal: "field"#_pos",disable";\
+         name: "datepicker_starting_field3_padding";\
+         signal: "datepicker,starting,field3";\
          source: "elm";\
-         action: STATE_SET "hide" 0.0;\
-         target: "separator"#_pos;\
+         script {\
+            set_state(PART:"picker.padding3", "enable", 0.0);\
+            set_state(PART:"picker.padding2", "default", 0.0);\
+         }\
       }\
-   }
+      program {\
+         name: "timepicker_starting_field3_padding";\
+         signal: "timepicker,starting,field3";\
+         source: "elm";\
+         script {\
+            set_state(PART:"picker.padding2", "default", 0.0);\
+            set_state(PART:"picker.padding3", "enable", 0.0);\
+         }\
+      }\
+      program {\
+         name: "timepicker_starting_field0_padding";\
+         signal: "timepicker,starting,field0";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "picker.padding0";\
+      }\
+      program {\
+         name: "datepicker_starting_field1_padding";\
+         signal: "datepicker,starting,field1";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "picker.padding0";\
+         target: "picker.padding2";\
+         target: "picker.padding3";\
+      }\
+      program {\
+         name: "datepicker_starting_field4_padding";\
+         signal: "datepicker,starting,field4";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "picker.padding0";\
+         target: "picker.padding2";\
+         target: "picker.padding3";\
+      }
 
 
-group { name: "elm/datetime/base/default";
-   parts {
-      part {
-         name: "bg";
-         type: RECT;
-         scale: 1;
-         description {
-            state: "default" 0.0;
-            color: 0 0 0 0;
-         }
-      }
-      part {
-         name: "left.padding";
-         type: RECT;
-         scale: 1;
-         clip_to: "clipper";
-         mouse_events: 0;
-         description {
-            state: "default" 0.0;
-            visible: 0;
-            min: DATETIME_LEFT_PADDING_SIZE_INC;
-            max: DATETIME_LEFT_PADDING_SIZE_INC;
-            align: 0.0 0.5;
-            fixed: 1 1;
-            rel1.to: "bg";
-            rel2 {
-               relative: 0.0 1.0;
-               to: "bg";
-            }
-         }
-      }
-      part {
-         name: "field0";
-         type: SWALLOW;
-         scale: 1;
-         clip_to: "clipper";
-         repeat_events: 1;
-         description {
-            state: "default" 0.0;
-            visible: 0;
-            min: 0 0;
-            align: 0.0 0.5;
-            fixed: 1 0;
-            rel1 {
-               relative: 0.5 0.0;
-               to_x: "left.padding";
-            }
-            rel2 {
-               relative: 0.5 1.0;
-               to_x: "left.padding";
-            }
-         }
-         description { state: "enable" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-            min: DATETIME_FIELD_MIN_SIZE_INC;
-         }
-      }
-      DATETIME_SEPARATOR(0)
-      DATETIME_FIELD(1, 0)
-      DATETIME_SEPARATOR(1)
-      DATETIME_FIELD(2, 1)
-      DATETIME_SEPARATOR(2)
-      DATETIME_FIELD(3, 2)
-      DATETIME_SEPARATOR(3)
-      DATETIME_FIELD(4, 3)
-      DATETIME_SEPARATOR(4)
-      DATETIME_FIELD(5, 4)
-      DATETIME_SEPARATOR(5)
-      part {
-         name: "right.padding";
-         type: RECT;
-         scale: 1;
-         clip_to: "clipper";
-         mouse_events: 0;
-         description {
-            state: "default" 0.0;
-            visible: 0;
-            min: DATETIME_LEFT_PADDING_SIZE_INC;
-            max: DATETIME_LEFT_PADDING_SIZE_INC;
-            align: 1.0 0.5;
-            fixed: 1 1;
-            rel2 {
-               relative: 1.0 0.0;
-               to: "bg";
-            }
-            rel2.to: "bg";
-         }
-      }
-      part {
-         name: "clipper";
-         type: RECT;
-         description { state: "default" 0.0;
-            color: 255 255 255 255;
-         }
-         description { state: "visible" 0.0;
-            inherit: "default" 0.0;
-            color: 255 255 255 102;
-         }
-      }
-      part {
-         name: "disabler";
-         type: RECT;
-         description { state: "default" 0.0;
-            color: 0 0 0 0;
-            visible: 0;
-         }
-         description { state: "visible" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-         }
-      }
-   }
-   programs {
-      program {
-         name: "disble_datetime";
-         signal: "elm,state,disabled";
-         source: "elm";
-         action: STATE_SET "visible" 0.0;
-         target: "disabler";
-         target: "clipper";
-      }
-      program {
-         name: "enable_datetime";
-         signal: "elm,state,enabled";
-         source: "elm";
-         action: STATE_SET "default" 0.0;
-         target: "disabler";
-         target: "clipper";
-      }
-      program {
-         name: "field0,enabled";
-         signal: "field0,enable";
-         source: "elm";
-         action: STATE_SET "enable" 0.0;
-         target: "field0";
-      }
-      program {
-         name: "field0,disabled";
-         signal: "field0,disable";
-         source: "elm";
-         action: STATE_SET "default" 0.0;
-         target: "field0";
+#define DATETIME_DATEPICKER_BG \
+   part {\
+      name: "date.picker.left.pad"; \
+      type: RECT;\
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         align: 1.0 0.5; \
+         fixed: 1 0;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding0";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding0";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding3";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding3";\
+         }\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding2";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding2";\
+         }\
+      }\
+   }\
+   part {\
+      name: "date.picker.right.pad"; \
+      type: RECT;\
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         align: 0.0 0.5; \
+         fixed: 1 0;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "separator2";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "separator2";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "separator5";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "separator5";\
+         }\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "separator4";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "separator4";\
+         }\
+      }\
+   }\
+   part {\
+      name: "date.picker.bg"; \
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         fixed: 1 0;\
+         image {\
+            normal: "00_button_01.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "date.picker.left.pad";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "date.picker.right.pad";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "datefirst_press" 0.0;\
+         inherit: "datefirst" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "timefirst_press" 0.0;\
+         inherit: "timefirst" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "timefirst24hr_press" 0.0;\
+         inherit: "timefirst24hr" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+   }\
+   part {\
+      name: "datepicker.focus";\
+      scale: 1;\
+      description {\
+         state: "default" 0.0;\
+         visible: 0;\
+         rel1.to : "date.picker.bg";\
+         rel2.to : "date.picker.bg";\
+         image {\
+            normal: "00_button_01_focus.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "focus" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+   }\
+   programs{\
+      program {\
+         name: "datepicker_starting_field0";\
+         signal: "datepicker,starting,field0";\
+         source: "elm";\
+         action: STATE_SET "datefirst" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_starting_field3";\
+         signal: "datepicker,starting,field3";\
+         source: "elm";\
+         action: STATE_SET "timefirst" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_starting_field2";\
+         signal: "datepicker,starting,field2";\
+         source: "elm";\
+         action: STATE_SET "timefirst24hr" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_starting_field1";\
+         signal: "datepicker,starting,field1";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_starting_field4";\
+         signal: "datepicker,starting,field4";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_starting_field5";\
+         signal: "datepicker,starting,field5";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_mouse_down";\
+         signal: "mouse,down,1";\
+         source: "date.picker.bg";\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"date.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "datefirst")) {\
+              set_state(PART:"date.picker.bg", "datefirst_press", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst")) {\
+              set_state(PART:"date.picker.bg", "timefirst_press", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst24hr")) {\
+              set_state(PART:"date.picker.bg", "timefirst24hr_press", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "datepicker_mouse_up";\
+         signal: "mouse,up,1";\
+         source: "date.picker.bg";\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"date.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "datefirst_press")) {\
+              set_state(PART:"date.picker.bg", "datefirst", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst_press")) {\
+              set_state(PART:"date.picker.bg", "timefirst", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst24hr_press")) {\
+              set_state(PART:"date.picker.bg", "timefirst24hr", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "datepicker_focus";\
+         signal: "elm,action,focus_highlight,show";\
+         source: "elm";\
+         action: STATE_SET "focus" 0.0;\
+         target: "datepicker.focus";\
+      }\
+      program {\
+         name: "datepicker_unfocus";\
+         signal: "elm,action,focus_highlight,hide";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "datepicker.focus";\
+      }\
+      program { name: "datepicker_touch_snd";\
+         signal: "mouse,clicked,1";\
+         source: "date.picker.bg";\
+         action: PLAY_SAMPLE "touch_sound" 1.0;\
+      }\
+   }
+
+#define DATETIME_TIMEPICKER_BG \
+   part {\
+      name: "time.picker.left.pad"; \
+      type: RECT;\
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         align: 1.0 0.5; \
+         fixed: 1 0;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding3";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding3";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding0";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding0";\
+         }\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding0";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding0";\
+         }\
+      }\
+   }\
+   part {\
+      name: "time.picker.right.pad"; \
+      type: RECT;\
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         align: 0.0 0.5; \
+         fixed: 1 0;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "right.padding5";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "right.padding5";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "right.padding2";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "right.padding2";\
+         }\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "right.padding1";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "right.padding1";\
+         }\
+      }\
+   }\
+   part {\
+      name: "time.picker.bg"; \
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         fixed: 1 0;\
+         image {\
+            normal: "00_button_01.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "time.picker.left.pad";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "time.picker.right.pad";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "datefirst_press" 0.0;\
+         inherit: "datefirst" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "timefirst_press" 0.0;\
+         inherit: "timefirst" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "timefirst24hr_press" 0.0;\
+         inherit: "timefirst24hr" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+   }\
+   part {\
+      name: "timepicker.focus";\
+      scale: 1;\
+      description {\
+         state: "default" 0.0;\
+         visible: 0;\
+         rel1.to : "time.picker.bg";\
+         rel2.to : "time.picker.bg";\
+         image {\
+            normal: "00_button_01_focus.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "focus" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+   }\
+   programs{\
+      program {\
+         name: "timepicker_starting_field3";\
+         signal: "timepicker,starting,field3";\
+         source: "elm";\
+         in: 0.001 0.0;\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"field3", st, 30, vl);\
+            if (!strcmp(st, "enable")) {\
+              set_state(PART:"time.picker.bg", "datefirst", 0.0);\
+              set_state(PART:"time.picker.left.pad", "datefirst", 0.0);\
+              set_state(PART:"time.picker.right.pad", "datefirst", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "timepicker_starting_field0";\
+         signal: "timepicker,starting,field0";\
+         source: "elm";\
+         in: 0.001 0.0;\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"date.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "timefirst24hr")) {\
+              set_state(PART:"time.picker.bg", "timefirst24hr", 0.0);\
+              set_state(PART:"time.picker.left.pad", "timefirst24hr", 0.0);\
+              set_state(PART:"time.picker.right.pad", "timefirst24hr", 0.0);\
+            }\
+            else {\
+              set_state(PART:"time.picker.bg", "timefirst", 0.0);\
+              set_state(PART:"time.picker.left.pad", "timefirst", 0.0);\
+              set_state(PART:"time.picker.right.pad", "timefirst", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "timepicker_starting_field1";\
+         signal: "timepicker,starting,field1";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "time.picker.bg";\
+         target: "time.picker.left.pad";\
+         target: "time.picker.right.pad";\
+      }\
+      program {\
+         name: "timepicker_starting_field2";\
+         signal: "timepicker,starting,field2";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "time.picker.bg";\
+         target: "time.picker.left.pad";\
+         target: "time.picker.right.pad";\
+      }\
+      program {\
+         name: "timepicker_starting_field4";\
+         signal: "timepicker,starting,field4";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "time.picker.bg";\
+         target: "time.picker.left.pad";\
+         target: "time.picker.right.pad";\
+      }\
+      program {\
+         name: "timepicker_starting_field5";\
+         signal: "timepicker,starting,field5";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "time.picker.bg";\
+         target: "time.picker.left.pad";\
+         target: "time.picker.right.pad";\
+      }\
+      program {\
+         name: "timepicker_mouse_down";\
+         signal: "mouse,down,1";\
+         source: "time.picker.bg";\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"time.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "datefirst")) {\
+              set_state(PART:"time.picker.bg", "datefirst_press", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst")) {\
+              set_state(PART:"time.picker.bg", "timefirst_press", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst24hr")) {\
+              set_state(PART:"time.picker.bg", "timefirst24hr_press", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "timepicker_mouse_up";\
+         signal: "mouse,up,1";\
+         source: "time.picker.bg";\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"time.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "datefirst_press")) {\
+              set_state(PART:"time.picker.bg", "datefirst", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst_press")) {\
+              set_state(PART:"time.picker.bg", "timefirst", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst24hr_press")) {\
+              set_state(PART:"time.picker.bg", "timefirst24hr", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "timepicker_focus";\
+         signal: "elm,action,focus_highlight,show";\
+         source: "elm";\
+         action: STATE_SET "focus" 0.0;\
+         target: "timepicker.focus";\
+      }\
+      program {\
+         name: "timepicker_unfocus";\
+         signal: "elm,action,focus_highlight,hide";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "timepicker.focus";\
+      }\
+      program { name: "timepicker_touch_snd";\
+         signal: "mouse,clicked,1";\
+         source: "time.picker.bg";\
+         action: PLAY_SAMPLE "touch_sound" 1.0;\
+      }\
+   }
+
+group { name: "elm/datetime/base/default";
+   images {
+      image: "00_button_01.png" COMP;
+      image: "00_button_01_press.png" COMP;
+      image: "00_button_01_focus.png" COMP;
+   }
+   parts {
+      part {
+         name: "bg";
+         type: RECT;
+         scale: 1;
+         description {
+            state: "default" 0.0;
+            color: 0 0 0 0;
+            min: 0 DATETIME_WIDGET_HEIGHT;
+            max: -1 DATETIME_WIDGET_HEIGHT;
+         }
+      }
+      part {
+         name: "left.padding";
+         type: RECT;
+         scale: 1;
+         clip_to: "clipper";
+         mouse_events: 0;
+         description {
+            state: "default" 0.0;
+            visible: 0;
+            min: DATETIME_WIDGET_PADDING_SIZE_INC;
+            align: 0.0 0.5;
+            fixed: 1 0;
+            rel1.to: "bg";
+            rel2 {
+               relative: 0.0 1.0;
+               to: "bg";
+            }
+         }
+      }
+      part {
+         name: "right.padding";
+         type: RECT;
+         scale: 1;
+         clip_to: "clipper";
+         mouse_events: 0;
+         description {
+            state: "default" 0.0;
+            visible: 0;
+            min: DATETIME_WIDGET_PADDING_SIZE_INC;
+            align: 1.0 0.5;
+            fixed: 1 0;
+            rel1 {
+               relative: 1.0 0.0;
+               to: "bg";
+            }
+            rel2.to: "bg";
+         }
+      }
+
+      DATETIME_PADDING(0, "left.padding")
+      DATETIME_PADDING(1, "separator0")
+      DATETIME_PADDING(2, "separator1")
+      DATETIME_PADDING(3, "separator2")
+      DATETIME_PADDING(4, "separator3")
+      DATETIME_PADDING(5, "separator4")
+
+      DATETIME_DATEPICKER_BG
+      DATETIME_TIMEPICKER_BG
+
+      DATETIME_FIELD(0)
+      DATETIME_FIELD(1)
+      DATETIME_FIELD(2)
+      DATETIME_FIELD(3)
+      DATETIME_FIELD(4)
+      DATETIME_FIELD(5)
+
+      part {
+         name: "clipper";
+         type: RECT;
+         description { state: "default" 0.0;
+            color: 255 255 255 255;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            color: 255 255 255 102;
+         }
+      }
+      part {
+         name: "disabler";
+         type: RECT;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            visible: 0;
+            rel1.to: "bg";
+            rel2.to: "bg";
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+   programs {
+      program {
+         name: "disble_datetime";
+         signal: "elm,state,disabled";
+         source: "elm";
+         action: STATE_SET "visible" 0.0;
+         target: "disabler";
+         target: "clipper";
+      }
+      program {
+         name: "enable_datetime";
+         signal: "elm,state,enabled";
+         source: "elm";
+         action: STATE_SET "default" 0.0;
+         target: "disabler";
+         target: "clipper";
+      }
+      DATETIME_PICKER_PADDING_PROGRAMS
+   }
+}
+
+#define DATETIME_FIELD_STYLE1(_pos, _after) \
+   part {\
+      name: "field"#_pos; \
+      type: SWALLOW; \
+      scale: 1;\
+      clip_to: "clipper";\
+      repeat_events: 1;\
+      description { state: "default" 0.0; \
+         visible: 0;\
+         min: 0 0;\
+         align: 0.0 0.5;\
+         fixed: 1 1;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "separator"#_after;\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "separator"#_after;\
+         }\
+      }\
+      description { state: "enable" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+         min: DATETIME_FIELD_MIN_SIZE_INC;\
+      }\
+   }\
+   programs{\
+      program {\
+         name: "field_"#_pos"enabled";\
+         signal: "field"#_pos",enable";\
+         source: "elm";\
+         action: STATE_SET "enable" 0.0;\
+         target: "field"#_pos;\
+      }\
+      program {\
+         name: "field_"#_pos"disabled";\
+         signal: "field"#_pos",disable";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "field"#_pos;\
+      }\
+    }
+
+#define DATETIME_SEPARATOR_STYLE1(_pos) \
+   part {\
+      name: "separator"#_pos; \
+      type: TEXT;\
+      scale: 1;\
+      clip_to: "clipper";\
+      repeat_events: 1;\
+      description {\
+         state: "default" 0.0;\
+         visible: 0;\
+         min: DATETIME_SEPARATOR_MIN_SIZE_INC;\
+         max: DATETIME_SEPARATOR_MIN_SIZE_INC;\
+         align: 0.0 0.5;\
+         fixed: 1 1;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "field"#_pos;\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "field"#_pos;\
+         }\
+         color: DATETIME_SEPARATOR_TEXT_COLOR_INC;\
+         text {\
+            font: "Tizen:style=Regular";\
+            size: DATETIME_SEPARATOR_TEXT_FONT_SIZE_INC;\
+            min: 1 0; \
+            text_class: "tizen";\
+         }\
+      }\
+      description { state: "enable" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "hide" 0.0;\
+         inherit: "default" 0.0;\
+         min: 0 0;\
+         max: 0 0;\
+      }\
+   }\
+   programs {\
+      program {\
+         name: "separator"#_pos",enabled";\
+         signal: "field"#_pos",separator,enable";\
+         source: "elm";\
+         action: STATE_SET "enable" 0.0;\
+         target: "separator"#_pos;\
+      }\
+      program {\
+         name: "separator"#_pos",disabled";\
+         signal: "field"#_pos",separator,disable";\
+         source: "elm";\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"separator"#_pos, st, 30, vl);\
+            if (strcmp(st, "hide")) \
+            {\
+               set_state(PART:"separator"#_pos, "default", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "separator"#_pos",hide";\
+         signal: "field"#_pos",disable";\
+         source: "elm";\
+         action: STATE_SET "hide" 0.0;\
+         target: "separator"#_pos;\
+      }\
+   }
+
+
+group { name: "elm/datetime/base/style1";
+   parts {
+      part {
+         name: "bg";
+         type: RECT;
+         scale: 1;
+         description {
+            state: "default" 0.0;
+            color: 0 0 0 0;
+         }
+      }
+      part {
+         name: "left.padding";
+         type: RECT;
+         scale: 1;
+         clip_to: "clipper";
+         mouse_events: 0;
+         description {
+            state: "default" 0.0;
+            visible: 0;
+            min: DATETIME_LEFT_PADDING_SIZE_INC;
+            max: DATETIME_LEFT_PADDING_SIZE_INC;
+            align: 0.0 0.5;
+            fixed: 1 1;
+            rel1.to: "bg";
+            rel2 {
+               relative: 0.0 1.0;
+               to: "bg";
+            }
+         }
+      }
+      part {
+         name: "field0";
+         type: SWALLOW;
+         scale: 1;
+         clip_to: "clipper";
+         repeat_events: 1;
+         description {
+            state: "default" 0.0;
+            visible: 0;
+            min: 0 0;
+            align: 0.0 0.5;
+            fixed: 1 0;
+            rel1 {
+               relative: 0.5 0.0;
+               to_x: "left.padding";
+            }
+            rel2 {
+               relative: 0.5 1.0;
+               to_x: "left.padding";
+            }
+         }
+         description { state: "enable" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+            min: DATETIME_FIELD_MIN_SIZE_INC;
+         }
+      }
+      DATETIME_SEPARATOR_STYLE1(0)
+      DATETIME_FIELD_STYLE1(1, 0)
+      DATETIME_SEPARATOR_STYLE1(1)
+      DATETIME_FIELD_STYLE1(2, 1)
+      DATETIME_SEPARATOR_STYLE1(2)
+      DATETIME_FIELD_STYLE1(3, 2)
+      DATETIME_SEPARATOR_STYLE1(3)
+      DATETIME_FIELD_STYLE1(4, 3)
+      DATETIME_SEPARATOR_STYLE1(4)
+      DATETIME_FIELD_STYLE1(5, 4)
+      DATETIME_SEPARATOR_STYLE1(5)
+      part {
+         name: "right.padding";
+         type: RECT;
+         scale: 1;
+         clip_to: "clipper";
+         mouse_events: 0;
+         description {
+            state: "default" 0.0;
+            visible: 0;
+            min: DATETIME_LEFT_PADDING_SIZE_INC;
+            max: DATETIME_LEFT_PADDING_SIZE_INC;
+            align: 1.0 0.5;
+            fixed: 1 1;
+            rel2 {
+               relative: 1.0 0.0;
+               to: "bg";
+            }
+            rel2.to: "bg";
+         }
+      }
+      part {
+         name: "clipper";
+         type: RECT;
+         description { state: "default" 0.0;
+            color: 255 255 255 255;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            color: 255 255 255 102;
+         }
+      }
+      part {
+         name: "disabler";
+         type: RECT;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+   programs {
+      program {
+         name: "disble_datetime";
+         signal: "elm,state,disabled";
+         source: "elm";
+         action: STATE_SET "visible" 0.0;
+         target: "disabler";
+         target: "clipper";
+      }
+      program {
+         name: "enable_datetime";
+         signal: "elm,state,enabled";
+         source: "elm";
+         action: STATE_SET "default" 0.0;
+         target: "disabler";
+         target: "clipper";
+      }
+      program {
+         name: "field0,enabled";
+         signal: "field0,enable";
+         source: "elm";
+         action: STATE_SET "enable" 0.0;
+         target: "field0";
+      }
+      program {
+         name: "field0,disabled";
+         signal: "field0,disable";
+         source: "elm";
+         action: STATE_SET "default" 0.0;
+         target: "field0";
+      }
+   }
+}
+group { name: "elm/spinner/base/default";
+   alias: "elm/spinner/base/datetime_popup";
+   alias: "elm/spinner/base/datetime_popup/year";
+   alias: "elm/spinner/base/datetime_popup/month";
+   alias: "elm/spinner/base/datetime_popup/date";
+   alias: "elm/spinner/base/datetime_popup/hour";
+   alias: "elm/spinner/base/datetime_popup/minute";
+   images {
+      image: "00_picker_arrow_down.png" COMP;
+      image: "00_picker_arrow_up.png" COMP;
+      image: "00_button_01.png" COMP;
+      image: "00_button_01_press.png" COMP;
+   }
+   parts {
+      part { name: "bg";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+         }
+      }
+      part { name: "up.image";
+         scale: 1;
+         description { state: "default" 0.0;
+            align: 0.5 0.0;
+            min: SPINNER_UP_DOWN_IMAGE_SIZE_INC;
+            max: SPINNER_UP_DOWN_IMAGE_SIZE_INC;
+            image {
+               normal: "00_button_01.png";
+               border: SPINNER_UP_DOWN_IMAGE_BORDER_SIZE_INC;
+               border_scale: 1;
+            }
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            image.normal: "00_button_01_press.png";
+         }
+      }
+      part { name: "up.image.arrow";
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "up.image";
+            rel2.to: "up.image";
+            min: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
+            max: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
+            image.normal: "00_picker_arrow_up.png";
+         }
+      }
+      part { name: "up.image.arrow.shadow.proxy";
+         type: PROXY;
+         scale: 1;
+         clip_to: "up.image.arrow.shadow.clipper";
+         description { state: "default" 0.0;
+            source: "up.image.arrow";
+            proxy.source_clip: 0;
+            rel1 {
+               to: "up.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_DEFAULT_TOP_OFFSET_INC;
+            }
+            rel2 {
+               to: "up.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_DEFAULT_BOTTOM_OFFSET_INC;
+            }
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            rel1 {
+               to: "up.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_PRESSED_TOP_OFFSET_INC;
+            }
+            rel2 {
+               to: "up.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_PRESSED_BOTTOM_OFFSET_INC;
+            }
+         }
+      }
+      part { name: "up.image.arrow.proxy";
+         type: PROXY;
+         scale: 1;
+         clip_to: "up.image.arrow.clipper";
+         description { state: "default" 0.0;
+            source: "up.image.arrow";
+            proxy.source_clip: 0;
+            rel1.to: "up.image.arrow";
+            rel2.to: "up.image.arrow";
+         }
+      }
+      part { name: "up.image.arrow.shadow.clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "up.image.arrow";
+            rel2.to: "up.image.arrow";
+            color: SPINNER_UP_DOWN_ARROW_SHADOW_DEFAULT_COLOR_INC;
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            color: SPINNER_UP_DOWN_ARROW_SHADOW_PRESSED_COLOR_INC;
+         }
+      }
+      part { name: "up.image.arrow.clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "up.image.arrow";
+            rel2.to: "up.image.arrow";
+            color: SPINNER_UP_DOWN_ARROW_DEFAULT_COLOR_INC;
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            color: SPINNER_UP_DOWN_ARROW_PRESSED_COLOR_INC;
+         }
+      }
+      part { name: "down.image";
+         scale: 1;
+         description { state: "default" 0.0;
+            align: 0.5 1.0;
+            min: SPINNER_UP_DOWN_IMAGE_SIZE_INC;
+            max: SPINNER_UP_DOWN_IMAGE_SIZE_INC;
+            image {
+               normal: "00_button_01.png";
+               border: SPINNER_UP_DOWN_IMAGE_BORDER_SIZE_INC;
+               border_scale: 1;
+            }
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            image.normal: "00_button_01_press.png";
+         }
+      }
+      part { name: "down.image.arrow";
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "down.image";
+            rel2.to: "down.image";
+            min: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
+            max: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
+            image.normal: "00_picker_arrow_down.png";
+         }
+      }
+      part { name: "down.image.arrow.shadow.proxy";
+         type: PROXY;
+         scale: 1;
+         clip_to: "down.image.arrow.shadow.clipper";
+         description { state: "default" 0.0;
+            source: "down.image.arrow";
+            proxy.source_clip: 0;
+            rel1 {
+               to: "down.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_DEFAULT_TOP_OFFSET_INC;
+            }
+            rel2 {
+               to: "down.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_DEFAULT_BOTTOM_OFFSET_INC;
+            }
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            rel1 {
+               to: "down.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_PRESSED_TOP_OFFSET_INC;
+            }
+            rel2 {
+               to: "down.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_PRESSED_BOTTOM_OFFSET_INC;
+            }
+         }
+      }
+      part { name: "down.image.arrow.proxy";
+         type: PROXY;
+         scale: 1;
+         clip_to: "down.image.arrow.clipper";
+         description { state: "default" 0.0;
+            source: "down.image.arrow";
+            proxy.source_clip: 0;
+            rel1.to: "down.image.arrow";
+            rel2.to: "down.image.arrow";
+         }
+      }
+      part { name: "down.image.arrow.shadow.clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "down.image.arrow";
+            rel2.to: "down.image.arrow";
+            color: SPINNER_UP_DOWN_ARROW_SHADOW_DEFAULT_COLOR_INC;
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            color: SPINNER_UP_DOWN_ARROW_SHADOW_PRESSED_COLOR_INC;
+         }
+      }
+      part { name: "down.image.arrow.clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "down.image.arrow";
+            rel2.to: "down.image.arrow";
+            color: SPINNER_UP_DOWN_ARROW_DEFAULT_COLOR_INC;
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            color: SPINNER_UP_DOWN_ARROW_PRESSED_COLOR_INC;
+         }
+      }
+      part { name: "elm.text";
+         type: TEXT;
+         scale: 1;
+         description { state: "default" 0.0;
+            visible: 1;
+            color: SPINNER_ENTRY_TEXT_COLOR_INC;
+            min: 0 SPINNER_TEXT_HEIGHT_INC;
+            max: -1 SPINNER_TEXT_HEIGHT_INC;
+            text {
+               font: "Tizen:style=Regular";
+               size: SPINNER_ENTRY_TEXT_SIZE_INC;
+               min: 0 0;
+               max: 1 0;
+               text_class: "tizen";
+            }
+         }
+         description { state: "active" 0.0;
+            inherit: "default" 0.0;
+            visible: 0;
+         }
+      }
+      part { name: "button.events";
+         type: RECT;
+         mouse_events: 1;
+         description { state: "default" 0.0;
+            rel1.to: "elm.text";
+            rel2.to: "elm.text";
+            fixed: 1 1;
+            color: 0 0 0 0;
+         }
+      }
+      part { name: "elm.swallow.entry";
+         type: SWALLOW;
+         description { state: "default" 0.0;
+            visible: 0;
+            rel1.to: "elm.text";
+            rel2.to: "elm.text";
+            fixed: 1 1;
+         }
+         description { state: "active" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+      part { name: "up.btn";
+         type: RECT;
+         repeat_events: 1;
+         scale: 1;
+         description { state: "default" 0.0;
+           rel1.to: "up.image";
+           rel2.to: "up.image";
+           color: 0 0 0 0;
+         }
+      }
+      part { name: "down.btn";
+         type: RECT;
+         repeat_events: 1;
+         scale: 1;
+         description { state: "default" 0.0;
+           rel1.to: "down.image";
+           rel2.to: "down.image";
+           color: 0 0 0 0;
+         }
+      }
+      part { name: "disabler";
+         type: RECT;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            visible: 0;
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+   programs {
+      program { name: "text_show";
+         signal: "elm,state,text,visible";
+         source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target: "elm.text";
+      }
+      program { name: "text_hide";
+         signal: "elm,state,text,hidden";
+         source: "elm";
+         action:  STATE_SET "default" 0.0;
+         target: "elm.text";
+      }
+      program { name: "dec_start_signal_emit";
+         action: SIGNAL_EMIT "elm,action,decrement,start" "";
+      }
+      program { name: "dec_stop_signal_emit";
+         action: SIGNAL_EMIT "elm,action,decrement,stop" "";
+      }
+      program { name: "inc_start_signal_emit";
+         action: SIGNAL_EMIT "elm,action,increment,start" "";
+      }
+      program { name: "inc_stop_signal_emit";
+         action: SIGNAL_EMIT "elm,action,increment,stop" "";
+      }
+      program { name: "dec";
+         signal: "mouse,down,1*";
+         source: "down.btn";
+         action:  STATE_SET "pressed" 0.0;
+         target: "down.image";
+         target: "down.image.arrow.shadow.proxy";
+         target: "down.image.arrow.shadow.clipper";
+         target: "down.image.arrow.clipper";
+         after: "dec_start_signal_emit";
+      }
+      program { name: "dec2";
+         signal: "mouse,up,1";
+         source: "down.btn";
+         action:  STATE_SET "default" 0.0;
+         target: "down.image";
+         target: "down.image.arrow.shadow.proxy";
+         target: "down.image.arrow.shadow.clipper";
+         target: "down.image.arrow.clipper";
+         after: "dec_stop_signal_emit";
+      }
+      program { name: "inc";
+         signal: "mouse,down,1*";
+         source: "up.btn";
+         action:  STATE_SET "pressed" 0.0;
+         target: "up.image";
+         target: "up.image.arrow.shadow.proxy";
+         target: "up.image.arrow.shadow.clipper";
+         target: "up.image.arrow.clipper";
+         after: "inc_start_signal_emit";
+      }
+      program { name: "inc2";
+         signal: "mouse,up,1";
+         source: "up.btn";
+         action:  STATE_SET "default" 0.0;
+         target: "up.image";
+         target: "up.image.arrow";
+         target: "up.image.arrow.shadow.proxy";
+         target: "up.image.arrow.shadow.clipper";
+         target: "up.image.arrow.clipper";
+         after: "inc_stop_signal_emit";
+      }
+      program { name: "disable";
+         signal: "elm,state,disabled";
+         source: "elm";
+         action: STATE_SET "disabled" 0.0;
+         target: "disabler";
+      }
+      program { name: "enable";
+         signal: "elm,state,enabled";
+         source: "elm";
+         action: STATE_SET "default" 0.0;
+         target: "disabler";
+      }
+      program { name: "active";
+         signal: "elm,state,active";
+         source: "elm";
+         action: STATE_SET "active" 0.0;
+         target: "elm.text";
+         target: "elm.swallow.entry";
+      }
+      program { name: "inactive";
+         signal: "elm,state,inactive";
+         source: "elm";
+         action: STATE_SET "default" 0.0;
+         target: "elm.text";
+         target: "elm.swallow.entry";
+      }
+      program { name: "toggle_text";
+         signal: "mouse,up,1";
+         source: "button.events";
+         action: SIGNAL_EMIT "elm,action,entry,toggle" "";
+      }
+      program { name: "up_touch_snd";
+         signal: "mouse,clicked,1";
+         source: "up.btn";
+         action: PLAY_SAMPLE "touch_sound" 1.0;
+      }
+      program { name: "down_ouch_snd";
+         signal: "mouse,clicked,1";
+         source: "down.btn";
+         action: PLAY_SAMPLE "touch_sound" 1.0;
+      }
+   }
+}
+
+group { name: "elm/spinner/base/datetime_popup/ampm";
+   inherit: "elm/spinner/base/default";
+
+   parts {
+      part { name: "block.events";
+         type: RECT;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            rel1.to: "elm.text";
+            rel2.to: "elm.text";
+         }
+      }
+   }
+}
+
+group { name: "elm/layout/datetime_popup/date_layout";
+
+   parts {
+      part { name: "bg";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: DATETIME_POPUP_CONTENT_SIZE_INC;
+            max: DATETIME_POPUP_CONTENT_SIZE_INC;
+         }
+      }
+      part { name: "top.padding";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: 0 0;
+            max: -1 0;
+            rel1.to: "bg";
+            rel2 {
+               relative: 1.0 0.0;
+               to: "bg";
+            }
+            align: 0.5 0.0;
+         }
+      }
+      part { name: "bottom.padding";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: 0 0;
+            max: -1 0;
+            rel1 {
+               relative: 0.0 1.0;
+               to: "bg";
+            }
+            rel2.to: "bg";
+            align: 0.5 1.0;
+         }
+      }
+      part { name: "left.padding";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: DATETIME_POPUP_CONTENT_LEFT_PADDING_WIDTH_INC 0;
+            max: DATETIME_POPUP_CONTENT_LEFT_PADDING_WIDTH_INC -1;
+            rel1 {
+               relative: 0.0 1.0;
+               to_x: "bg";
+               to_y: "top.padding";
+            }
+            rel2 {
+               relative: 0.0 0.0;
+               to_x: "bg";
+               to_y: "bottom.padding";
+            }
+            align: 0.0 0.5;
+         }
+      }
+      part { name: "right.padding";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: DATETIME_POPUP_CONTENT_RIGHT_PADDING_WIDTH_INC 0;
+            max: DATETIME_POPUP_CONTENT_RIGHT_PADDING_WIDTH_INC -1;
+            rel2.to: "bg";
+            rel1 {
+               relative: 1.0 1.0;
+               to_x: "bg";
+               to_y: "top.padding";
+            }
+            rel2 {
+               relative: 1.0 0.0;
+               to_x: "bg";
+               to_y: "bottom.padding";
+            }
+            align: 1.0 0.5;
+         }
+      }
+      part { name: "field0";
+         type: SWALLOW;
+         scale: 1;
+         description { state: "default" 0.0;
+            min: DATETIME_POPUP_CONTENT_FIELD_WIDTH_INC 0;
+            rel1 {
+               relative: 1.0 0.0;
+               to: "left.padding";
+            }
+            rel2.to: "left.padding";
+            align: 0.0 0.5;
+         }
+      }
+      part { name: "center.padding1";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: DATETIME_POPUP_CONTENT_CENTER_PADDING_WIDTH_INC 0;
+            max: DATETIME_POPUP_CONTENT_CENTER_PADDING_WIDTH_INC -1;
+            rel1 {
+               relative: 1.0 0.0;
+               to: "field0";
+            }
+            rel2.to: "field0";
+            align: 0.0 0.5;
+         }
+      }
+      part { name: "field1";
+         type: SWALLOW;
+         scale: 1;
+         description { state: "default" 0.0;
+            min: DATETIME_POPUP_CONTENT_FIELD_WIDTH_INC 0;
+            rel1 {
+               relative: 1.0 0.0;
+               to: "center.padding1";
+            }
+            rel2 {
+               relative: 0.0 1.0;
+               to: "center.padding2";
+            }
+         }
+      }
+      part { name: "center.padding2";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: DATETIME_POPUP_CONTENT_CENTER_PADDING_WIDTH_INC 0;
+            max: DATETIME_POPUP_CONTENT_CENTER_PADDING_WIDTH_INC -1;
+            rel1.to: "field2";
+            rel2 {
+               relative: 0.0 1.0;
+               to: "field2";
+            }
+            align: 1.0 0.5;
+         }
+      }
+      part { name: "field2";
+         type: SWALLOW;
+         scale: 1;
+         description { state: "default" 0.0;
+            min: DATETIME_POPUP_CONTENT_FIELD_WIDTH_INC 0;
+            rel1.to: "right.padding";
+            rel2 {
+               relative: 0.0 1.0;
+               to: "right.padding";
+            }
+            align: 1.0 0.5;
+         }
+      }
+      part {
+         name: "event_area";
+         type: RECT;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+}
+
+group { name: "elm/layout/datetime_popup/time_layout";
+   inherit: "elm/layout/datetime_popup/date_layout";
+
+   parts {
+      part { name: "hour.minute.color";
+         type: TEXT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "center.padding1";
+            rel2.to: "center.padding1";
+            color: DATETIME_POPUP_CONTENT_FIELD_TEXT_COLOR_INC;
+            text {
+               font: "Tizen:style=Regular";
+               size: DATETIME_POPUP_CONTENT_FIELD_TEXT_SIZE_INC;
+               min: 0 0;
+               text_class: "tizen";
+               text: ":";
+            }
+         }
       }
    }
 }