Merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/rewriteDatePickerInternal into lp:ubuntu-ui-toolkit/staging

[Cris Dywan]

Rewrite DatePicker internals

✔️ Allow overriding individual day display for calendar events integr.
✅ show/hide month/year switcher in calendar view depending on mode
✅ week numbers yes/no
✅ minimum month doesn't work (no arrow, but year selector)
⚪ current day needs highlight
✅ time picker shows calendar
⚪ selected 'last month'-day disappears while pressed

[lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/rewriteDatePickerInternal]

2139. By Cris Dywan on 2016-10-25

WIP

Unmerged revisions

2139. By Cris Dywan on 2016-10-25

WIP

2138. By Cris Dywan on 2016-10-17

WIP

2137. By Cris Dywan on 2016-10-06

Rewrite DatePicker internals

=== modified file 'examples/ubuntu-ui-toolkit-gallery/Pickers.qml'
--- examples/ubuntu-ui-toolkit-gallery/Pickers.qml	2015-09-24 20:05:52 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Pickers.qml	2016-10-25 11:37:58 +0000
@@ -23,6 +23,7 @@
     id: root
 
     property var stringListModel: ["starred", "media-record", "like", "language-chooser", "go-home", "email", "contact-group", "notification", "active-call"]
+    /*
     TemplateSection {
         className: "Picker"
         documentation: "qml-ubuntu-components-pickers-picker.html"
@@ -205,6 +206,7 @@
             }
         }
     }
+    */
     TemplateSection {
         className: "DatePicker"
         documentation: "qml-ubuntu-components-pickers-datepicker.html"

=== modified file 'src/imports/Components/Pickers/1.3/DatePicker.qml'
--- src/imports/Components/Pickers/1.3/DatePicker.qml	2016-03-15 18:16:01 +0000
+++ src/imports/Components/Pickers/1.3/DatePicker.qml	2016-10-25 11:37:58 +0000
@@ -16,6 +16,8 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.3
+import Ubuntu.Components.Private 1.3
+import 'dateutils.js' as DU
 
 /*!
     \qmltype DatePicker
@@ -167,7 +169,8 @@
     insensitive. If minimum and maximum are within the same month, the month picker
     will also be insensitive.
   */
-StyledItem {
+Item {
+// StyledItem {
     id: datePicker
 
     /*!
@@ -237,7 +240,8 @@
       The default values are the current date for the minimum, and 50 year distance
       value for maximum.
       */
-    property date minimum: Date.prototype.midnight.call(new Date())
+    //property date minimum: Date.prototype.midnight.call(new Date())
+    property date minimum: DU.clone(null, 'setDate', 1)
     /*!
       \qmlproperty int maximum
 
@@ -246,11 +250,12 @@
 
       See \l minimum for more details.
      */
-    property date maximum: {
+    /*property date maximum: {
         var d = Date.prototype.midnight.call(new Date());
         d.setFullYear(d.getFullYear() + 50);
         return d;
-    }
+    }*/
+    property date maximum: DU.clone(minimum, 'setFullYear', minimum.getFullYear() + 50)
 
     /*!
       For convenience, the \b year value of the \l date property.
@@ -298,11 +303,49 @@
       The property holds whether the component's pickers are moving.
       \sa Picker::moving
       */
-    readonly property alias moving: positioner.moving
-
-    implicitWidth: units.gu(36)
-    implicitHeight: units.gu(20)
-    activeFocusOnPress: true
+    readonly property alias moving: listView.moving
+
+    implicitWidth: parent.width
+    implicitHeight: content.visible ? content.height : timeContent.height
+ // activeFocusOnPress: true
+
+    /*!
+      \qmlproperty Component delegate
+      Individual days are rendered by the delegate, in the case of \l mode
+      containing "Months". This is useful to customize the colors, frame, or
+      add visuals for calendar events.
+      Roles:
+        date: the date of the rendered day
+        text: the day as a string
+        currentMonth: the date lies in the currently selected month
+        pressed: whether this day is being pressed
+     */
+    property Component delegate: Label {
+        id: label
+        anchors.centerIn: parent
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        property color dayColor: {
+            if (DU.sameDay(date, datePicker.date))
+                return theme.palette.normal.activity;
+            if (currentMonth)
+                return theme.palette.normal.backgroundText;
+            // FIXME: Original color is too light for Qt.lighter
+            return Qt.darker(theme.palette.normal.base);
+        }
+        color: pressed ? Qt.lighter(dayColor) : dayColor
+        textSize: Label.Medium
+        text: modelData.text
+
+        Frame {
+            anchors.fill: parent
+            thickness: units.dp(2)
+            radius: units.gu(1.7)
+            color: theme.palette.normal.backgroundText
+            property date today: new Date()
+            visible: date.getFullYear() == today.getFullYear() && date.getMonth() == today.getMonth() && DU.sameDay(date, today)
+        }
+    }
 
     /*! \internal */
     onMinimumChanged: {
@@ -323,21 +366,30 @@
             date = maximum;
         }
     }
-    /*! \internal */
-    onWidthChanged: {
-        // use dayPicker narrowFormatLimit even if the dayPicker is hidden
-        // and clamp the width so it cannot have less width that the sum of
-        // the three tumblers' narrowFormatLimit
-        var minWidth = 0.0;
-        for (var i = 0; i < tumblerModel.count; i++) {
-            minWidth += tumblerModel.get(i).pickerModel.narrowFormatLimit;
-        }
-        width = Math.max(width, minWidth);
-    }
+
+    onDateChanged: {
+        if (!moving)
+            listView.positionViewAtIndex(DU.getMonthsRange(minimum, date), ListView.Visible)
+    }
+
+    property int monthsRange: DU.getMonthsRange(minimum, maximum)
+    // FIXME: Move to Style
+    property int scrollDirection: Qt.Horizontal
+    property int snapMode: ListView.SnapToItem
+    state: ''
+
+    function cancelFlick() {
+        listView.cancelFlick()
+    }
+
+    function toggleYearList() {
+        datePicker.state = datePicker.state === 'years-months'? '' : 'years-months'
+    }
+
     /*! \internal */
     onModeChanged: internals.updatePickers()
     /*! \internal */
-    onLocaleChanged: internals.updatePickers()
+ // onLocaleChanged: internals.updatePickers()
 
     Component.onCompleted: {
         if (minimum === undefined) {
@@ -347,79 +399,10 @@
         internals.updatePickers();
     }
 
-    // models
-    YearModel {
-        id: yearModel
-        mainComponent: datePicker
-        pickerCompleted: internals.completed && internals.showYearPicker
-        pickerWidth: (!pickerItem) ? 0 : narrowFormatLimit
-        function syncModels() {
-            dayModel.syncModels();
-        }
-    }
-    MonthModel {
-        id: monthModel
-        mainComponent: datePicker
-        pickerCompleted: internals.completed && internals.showMonthPicker
-        pickerWidth: {
-            if (!pickerItem) {
-                return 0;
-            }
-            return MathUtils.clamp(datePicker.width - yearModel.pickerWidth - dayModel.pickerWidth, narrowFormatLimit, longFormatLimit);
-        }
-        function syncModels() {
-            dayModel.syncModels();
-        }
-    }
-    DayModel {
-        id: dayModel
-        mainComponent: datePicker
-        pickerCompleted: internals.completed && internals.showDayPicker
-        pickerWidth: {
-            if (!pickerItem) {
-                return 0;
-            }
-            var w = Math.max(datePicker.width * internals.dayPickerRatio, narrowFormatLimit);
-            if (w < longFormatLimit && w >= shortFormatLimit) {
-                return shortFormatLimit;
-            }
-            return w;
-        }
-    }
-    HoursModel {
-        id: hoursModel
-        mainComponent: datePicker
-        pickerCompleted: internals.completed && internals.showHoursPicker
-        pickerWidth: {
-            if (!pickerItem) {
-                return 0;
-            }
-            return narrowFormatLimit;
-        }
-    }
-    MinutesModel {
-        id: minutesModel
-        mainComponent: datePicker
-        pickerCompleted: internals.completed && internals.showMinutesPicker
-        pickerWidth: {
-            if (!pickerItem) {
-                return 0;
-            }
-            return narrowFormatLimit;
-        }
-    }
-    SecondsModel {
-        id: secondsModel
-        mainComponent: datePicker
-        pickerCompleted: internals.completed && internals.showSecondsPicker
-        pickerWidth: {
-            if (!pickerItem) {
-                return 0;
-            }
-            return narrowFormatLimit;
-        }
-    }
+    width: parent.width
+    height: content.height
 
+ /*
     styleName: "DatePickerStyle"
     Binding {
         target: __styleInstance
@@ -437,77 +420,12 @@
         value: (internals.showHoursPicker || internals.showMinutesPicker || internals.showSecondsPicker) ?
                    ":" : ""
     }
-
-    // tumbler positioner
-    PickerRow {
-        id: positioner
-        parent: (datePicker.__styleInstance && datePicker.__styleInstance.hasOwnProperty("tumblerHolder")) ?
-                    datePicker.__styleInstance.tumblerHolder : datePicker
-        mainComponent: datePicker
-        model: tumblerModel
-        margins: internals.margin
-        anchors {
-            top: parent.top
-            bottom: parent.bottom
-            horizontalCenter: parent.horizontalCenter
-        }
-    }
-    // tumbler model
-    ListModel {
-        /*
-              Model to hold tumbler order for repeaters.
-              Roles:
-              - pickerModel
-              - pickerName
-              */
-        id: tumblerModel
-
-        /*
-          Signal triggered when the model is about to remove a picker. We cannot rely on
-          rowAboutToBeRemoved, as by the time the signal is called the list element is
-          already removed from the model.
-          */
-        signal pickerRemoved(int index)
-
-        // the function checks whether a pickerModel was added or not
-        // returns the index of the model object the pickerModel was found
-        // or -1 on error.
-        function pickerModelIndex(name) {
-            for (var i = 0; i < count; i++) {
-                if (get(i).pickerName === name) {
-                    return i;
-                }
-            }
-            return -1;
-        }
-
-        // the function checks whether a pickerModel is present in the list;
-        // moves the existing one to the given index or inserts it if not present
-        function setPickerModel(model, name, index) {
-            var idx = pickerModelIndex(name);
-            if (idx >= 0) {
-                move(idx, index, 1);
-            } else {
-                append({"pickerModel": model, "pickerName": name});
-            }
-        }
-
-        // removes the given picker
-        function removePicker(name) {
-            var idx = pickerModelIndex(name);
-            if (idx >= 0) {
-                pickerRemoved(idx);
-                remove(idx);
-            }
-        }
-    }
-
-    // component to calculate text fitting
-    Label { id: textSizer; visible: false }
+  */
+
     QtObject {
         id: internals
         property bool completed: false
-        property real margin: units.gu(1.5)
+        property real margin: units.gu(2)
         property real dayPickerRatio: 0.1
 
         property bool showYearPicker: true
@@ -517,6 +435,7 @@
         property bool showHoursPicker: false
         property bool showMinutesPicker: false
         property bool showSecondsPicker: false
+        property bool showDayNightPicker: showHoursPicker || showMinutesPicker || showSecondsPicker
 
         /*
           Update pickers.
@@ -574,99 +493,261 @@
                     console.warn("Date and Time picking not allowed at the same time.");
                     return;
                 }
-
-                arrangeTumblers();
-                resetPickers();
-            }
-        }
-
-        /*
-          Resets the pickers. Pickers will update their models with the given date,
-          minimum and maximum values.
-          */
-        function resetPickers() {
-            if (!completed) return;
-            for (var i = 0; i < tumblerModel.count; i++) {
-                var pickerItem = tumblerModel.get(i).pickerModel.pickerItem;
-                pickerItem.resetPicker();
-            }
-
-            // calculate the ratio for the dayPicker
-            var maxWidth = 0.0;
-            maxWidth += showYearPicker ? yearModel.longFormatLimit : 0.0;
-            maxWidth += showMonthPicker ? monthModel.longFormatLimit : 0.0;
-            maxWidth += showDayPicker ? dayModel.longFormatLimit : 0.0;
-            if (showDayPicker && maxWidth > 0.0) {
-                dayPickerRatio = (dayModel.longFormatLimit / maxWidth).toPrecision(3);
-            }
-        }
-
-        /*
-            Detects the tumbler order from the date format of the locale
-          */
-        function arrangeTumblers() {
-            // disable completion so avoid accidental date changes
-            completed = false;
-
-            // use short format to exclude any extra characters
-            // FIXME: The js split(/\W/g) terminates the process on armhf with Qt 5.3 (v4 js) (https://bugreports.qt-project.org/browse/QTBUG-39255)
-            var format = datePicker.locale.dateFormat(Locale.ShortFormat).match(/\w+/g);
-            // loop through the format to decide the position of the tumbler
-            var formatIndex = 0;
-            for (var i in format) {
-                if (!format[i].length) continue;
-                // check the first two characters
-                switch (format[i].substr(0, 1).toLowerCase()) {
-                case 'y':
-                    if (showYearPicker) {
-                        tumblerModel.setPickerModel(yearModel, "YearPicker", formatIndex);
-                        formatIndex++;
-                    } else {
-                        tumblerModel.removePicker("YearPicker");
-                    }
-
-                    break;
-                case 'm':
-                    if (showMonthPicker) {
-                        tumblerModel.setPickerModel(monthModel, "MonthPicker", formatIndex);
-                        formatIndex++;
-                    } else {
-                        tumblerModel.removePicker("MonthPicker");
-                    }
-
-                    break;
-                case 'd':
-                    if (showDayPicker) {
-                        tumblerModel.setPickerModel(dayModel, "DayPicker", formatIndex);
-                        formatIndex++;
-                    } else {
-                        tumblerModel.removePicker("DayPicker");
-                    }
-                    break;
-                }
-            }
-            // check hms
-            if (showHoursPicker) {
-                tumblerModel.setPickerModel(hoursModel, "HoursPicker", formatIndex);
-                formatIndex++;
-            } else {
-                tumblerModel.removePicker("HoursPicker");
-            }
-            if (showMinutesPicker) {
-                tumblerModel.setPickerModel(minutesModel, "MinutesPicker", formatIndex);
-                formatIndex++;
-            } else {
-                tumblerModel.removePicker("MinutesPicker");
-            }
-            if (showSecondsPicker) {
-                tumblerModel.setPickerModel(secondsModel, "SecondsPicker", formatIndex);
-                formatIndex++;
-            } else {
-                tumblerModel.removePicker("SecondsPicker");
-            }
-
-            // re-enable completion
-            completed = true;
+            }
+        }
+    }
+
+    states: [
+        State { name: '' },
+        State { name: 'years-months' }
+    ]
+
+    property real dropdownAnimDuration: UbuntuAnimation.FastDuration
+
+    transitions: [
+        Transition {
+            from: ''
+            to: 'years-months'
+            ParallelAnimation {
+                UbuntuNumberAnimation {
+                    target: headerShadow
+                    property: 'width'
+                    to: content.width
+                    duration: datePicker.dropdownAnimDuration / 2
+                }
+                UbuntuNumberAnimation {
+                    target: headerShadow
+                    property: 'opacity'
+                    to: 1
+                    duration: datePicker.dropdownAnimDuration / 2
+                }
+                UbuntuNumberAnimation {
+                    target: yearsListDropdown
+                    property: 'y'
+                    to: 0
+                    duration: datePicker.dropdownAnimDuration
+                }
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: datePicker.dropdownAnimDuration
+                    }
+                    UbuntuNumberAnimation {
+                        target: headerShadow
+                        property: 'width'
+                        to: 0
+                        duration: datePicker.dropdownAnimDuration / 1.5
+                    }
+                }
+            }
+        },
+        Transition {
+            from: 'years-months'
+            to: ''
+            ParallelAnimation {
+                property real duration: 300
+                UbuntuNumberAnimation {
+                    target: headerShadow
+                    property: 'width'
+                    to: content.width
+                    duration: datePicker.dropdownAnimDuration / 2
+                }
+                UbuntuNumberAnimation {
+                    target: headerShadow
+                    property: 'opacity'
+                    to: 1
+                    duration: datePicker.dropdownAnimDuration / 2
+                }
+                UbuntuNumberAnimation {
+                    target: yearsListDropdown
+                    property: 'y'
+                    to: -yearsListDropdown.height
+                    duration: datePicker.dropdownAnimDuration
+                }
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: datePicker.dropdownAnimDuration
+                    }
+                    UbuntuNumberAnimation {
+                        target: headerShadow
+                        property: 'width'
+                        to: 0
+                        duration: datePicker.dropdownAnimDuration / 1.5
+                    }
+                    UbuntuNumberAnimation {
+                        target: headerShadow
+                        property: 'opacity'
+                        to: 0
+                        duration: datePicker.dropdownAnimDuration / 3
+                    }
+                }
+            }
+        }
+    ]
+
+    Rectangle {
+        color: theme.palette.normal.background
+        anchors.fill: parent
+    }
+
+    // TimePicker
+
+    Item {
+        id: timeContent
+        height: container.itemHeight * 5
+        anchors.leftMargin: root.margin
+        anchors.rightMargin: root.margin
+        visible: internals.showHoursPicker || internals.showMinutesPicker || internals.showSecondsPicker
+
+        Row {
+            id: container
+            anchors.fill: parent
+            property real itemHeight: units.gu(2)
+            property int pickerCount: 3
+            property real pickerWidth: (container.width - internals.margin * container.pickerCount - 1) / container.pickerCount
+
+            HourPicker {
+                type: 'hours'
+                width: container.pickerWidth
+                height: container.height
+                ampm: internals.showDayPicker
+            }
+
+            HourPicker {
+                type: 'minutes'
+                width: container.pickerWidth
+                height: container.height
+            }
+
+            HourPicker {
+                type: 'seconds'
+                width: container.pickerWidth
+                height: container.height
+            }
+
+            DayNightPicker {
+                width: container.pickerWidth
+                height: container.height
+                itemHeight: container.itemHeight
+            }
+
+            DigitSeparator {
+                width: container.pickerWidth
+                height: container.height
+            }
+        }
+    }
+
+    Item {
+        id: selectedShape
+        width: parent.width
+        height: parent.height / 5
+        y: parent.height / 2 - height / 2
+        visible: internals.showHoursPicker || internals.showMinutesPicker || internals.showSecondsPicker
+
+        Rectangle {
+            width: parent.width
+            height: units.dp(1)
+            y: 0
+            color: UbuntuColors.lightGrey
+        }
+
+        Rectangle {
+            width: parent.width
+            height: units.dp(1)
+            y: parent.height - height
+            color: UbuntuColors.lightGrey
+        }
+    }
+
+    // DatePicker
+
+    Column {
+        id: content
+        width: parent.width
+        visible: internals.showMonthPicker || internals.showYearPicker || internals.showDayPicker
+
+        DatePickerHeader {
+            id: header
+            anchors.left: parent.left
+            anchors.right: parent.right
+            fontSize: 'large'
+            color: theme.palette.normal.backgroundText
+            activeColor: UbuntuColors.darkGrey
+            date: DU.clone(datePicker.date, 'setDate', 1)
+            minimum: datePicker.minimum
+            maximum: datePicker.maximum
+            onRequestNextMonth: datePicker.date = DU.clone(datePicker.date, 'setMonth', datePicker.date.getMonth() + 1)
+            onRequestPreviousMonth: datePicker.date = DU.clone(datePicker.date, 'setMonth', datePicker.date.getMonth() - 1)
+            onRequestToggleYearList: datePicker.toggleYearList()
+            yearsListOpened: datePicker.state === 'years-months'
+            visible: internals.showYearPicker
+        }
+
+        Item {
+            width: parent.width
+            height: header.height * 0.5
+            Rectangle {
+                id: headerShadow
+                y: parent.height
+                visible: false
+                opacity: 0
+                color: theme.palette.normal.baseText
+                width: 0
+                height: units.gu(1/16)
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+            visible: internals.showYearPicker || internals.showMonthPicker
+        }
+
+        Item {
+            width: parent.width
+            height: listView.height
+            visible: internals.showDayPicker
+            ListView {
+                id: listView
+                clip: true
+                width: parent.width
+                height: currentItem.height
+                model: datePicker.monthsRange
+                snapMode: datePicker.snapMode
+                orientation: datePicker.scrollDirection === Qt.Horizontal ? ListView.Horizontal : ListView.Vertical
+                highlightFollowsCurrentItem: true
+                highlightMoveDuration: 0
+                highlightRangeMode: ListView.StrictlyEnforceRange
+                property bool indexInit: false
+                onCurrentIndexChanged: {
+                    if (!indexInit && currentIndex === 0) {
+                        indexInit = true;
+                        return;
+                    }
+                    if (!listView.moving) {
+                        return;
+                    }
+                    datePicker.date = DU.clone(minimum, 'setMonth', minimum.getMonth() + currentIndex);
+                }
+
+                delegate: DatePickerMonthDays {
+                    id: panel
+                    width: datePicker.width
+                    displayedMonth: DU.clone(minimum, 'setMonth', minimum.getMonth() + index)
+                    onRequestNextMonth: datePicker.date = DU.clone(displayedMonth, 'setMonth', displayedMonth.getMonth() + 1)
+                    onRequestPreviousMonth: datePicker.date = DU.clone(displayedMonth, 'setMonth', displayedMonth.getMonth() - 1)
+                    onRequestDateChange: datePicker.date = date
+                    delegate: datePicker.delegate
+                }
+            }
+
+            Item {
+                clip: true
+                width: parent.width
+                height: parent.height
+                YearListDropdown {
+                    id: yearsListDropdown
+                    minimum: datePicker.minimum
+                    maximum: datePicker.maximum
+                    onRequestDateChange: datePicker.date = newDate
+                }
+            }
         }
     }
 }

=== added file 'src/imports/Components/Pickers/1.3/DatePickerHeader.qml'
--- src/imports/Components/Pickers/1.3/DatePickerHeader.qml	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/DatePickerHeader.qml	2016-10-25 11:37:58 +0000
@@ -0,0 +1,98 @@
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import './calendar.js' as Calendar
+import './dateutils.js' as DU
+
+Item {
+    id: root
+
+    property string fontSize: 'large'
+    property color color: 'black'
+    property color activeColor: 'grey'
+
+    property date date: new Date()
+    property date minimum: DU.clone(null, 'setDate', 1)
+    property date maximum: DU.clone(minimum, 'setFullYear', minimum.getFullYear() + 50)
+
+    property bool yearsListOpened: false
+
+    signal requestPreviousMonth()
+    signal requestNextMonth()
+    signal requestToggleYearList()
+
+    width: parent.width
+    height: month.height
+
+    MouseArea {
+        id: yearDropDown
+        onReleased: if (containsMouse) requestToggleYearList()
+        anchors.fill: parent
+        Row {
+            spacing: 0
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: parent.height
+            Label {
+                id: month
+                textSize: root.fontSize === 'large' ? Label.Medium : Label.Large
+                text: DU.format(root.date, 'MMMM')
+                horizontalAlignment: Text.AlignHCenter
+                color: yearDropDown.containsPress? root.activeColor : root.color
+            }
+            Item {
+                width: units.gu(0.5)
+                height: 1
+            }
+            Label {
+                id: year
+                textSize: root.fontSize === 'large' ? Label.Medium : Label.Large
+                text: DU.format(root.date, 'yyyy')
+                horizontalAlignment: Text.AlignHCenter
+                color: yearDropDown.containsPress? root.activeColor : root.color
+            }
+            Item {
+                width: units.gu(0.5)
+                height: 1
+            }
+            Icon {
+                name: yearsListOpened? 'up' : 'down'
+                height: year.height / 1.5
+                y: parent.height / 2 - height / 2 + height * 0.1
+                color: yearDropDown.containsPress? root.activeColor : root.color
+            }
+        }
+    }
+
+    MouseArea {
+        visible: !DU.sameDay(root.date, minimum)
+        anchors.left: parent.left
+        anchors.leftMargin: units.gu(1.7)
+        width: parent.height
+        height: width
+        onReleased: if (containsMouse) requestPreviousMonth()
+        Icon {
+            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width
+            height: width
+            color: parent.containsPress? root.activeColor : root.color
+            name: 'previous'
+        }
+    }
+
+    MouseArea {
+        visible: !DU.sameDay(root.date, maximum)
+        anchors.right: parent.right
+        anchors.rightMargin: units.gu(1.7)
+        width: parent.height
+        height: width
+        onReleased: if (containsMouse) requestNextMonth()
+        Icon {
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width
+            height: width
+            color: parent.containsPress? root.activeColor : root.color
+            name: 'next'
+        }
+    }
+}

=== added file 'src/imports/Components/Pickers/1.3/DatePickerMonthDays.qml'
--- src/imports/Components/Pickers/1.3/DatePickerMonthDays.qml	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/DatePickerMonthDays.qml	2016-10-25 11:37:58 +0000
@@ -0,0 +1,115 @@
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import './calendar.js' as Calendar
+import './dateutils.js' as DU
+
+MouseArea {
+    id: root
+
+    height: cellHeight * 7
+    onPressed: lastPressedPosition = getPosition(mouse)
+
+    onReleased: {
+        lastPressedPosition = null
+        var pressedPosition = getPosition(mouse)
+        var index = pressedPosition[1] * 7 + pressedPosition[0]
+        var item = monthDaysRepeater.itemAt(index)
+
+        var currDay = root.monthDays[index]
+        var currDate = currDay.date
+        var dispDate = root.displayedMonth
+        if (currDay.surrounding) {
+            if (DU.compareDates(currDate, dispDate) < 0) {
+                requestPreviousMonth()
+            } else {
+                requestNextMonth()
+            }
+        } else if (root.date.getTime() !== currDate.getTime()) {
+            requestDateChange(currDate)
+        }
+    }
+
+    property date date: new Date()
+    property date displayedMonth: new Date(date.getTime())
+    property int firstDayOfWeek: 1
+    property var monthDays: []
+    property Component delegate
+
+    readonly property real cellWidth: width / 7
+    readonly property real cellHeight: cellWidth * 0.62
+
+    property var lastPressedPosition: null
+
+    property Item pressedItem: {
+        if (!(root.containsPress && root.lastPressedPosition)) {
+            return null
+        }
+        var index = lastPressedPosition[1] * 7 + lastPressedPosition[0]
+        return monthDaysRepeater.itemAt(index)
+    }
+
+    function getPosition(mouse) {
+        return [
+            Math.floor(mouse.x / cellWidth),
+            Math.floor((mouse.y - cellHeight) / cellHeight),
+        ]
+    }
+
+    WorkerScript {
+        source: 'DatePickerMonthDaysWorker.js'
+        onMessage: {
+            if (messageObject.name === 'monthDays') {
+                root.monthDays = messageObject.monthDays
+                monthDaysRepeater.model = messageObject.monthDays.length
+            }
+        }
+        Component.onCompleted: {
+            this.sendMessage({
+                name: 'requestMonthDays',
+                firstDayOfWeek: firstDayOfWeek,
+                displayedMonth: displayedMonth,
+            })
+        }
+    }
+
+    signal requestPreviousMonth()
+    signal requestNextMonth()
+    signal requestDateChange(date date)
+
+    Repeater {
+        model: 7
+        Label {
+            id: label
+            width: cellWidth
+            height: cellHeight
+            x: index * cellWidth
+            y: 0
+            text: DU.shortDayName(index).toUpperCase()
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            textSize: Label.XSmall
+            color: theme.palette.normal.backgroundTertiaryText
+        }
+    }
+
+    Repeater {
+        id: monthDaysRepeater
+        model: 0
+        Item {
+            id: monthDayItem
+            width: cellWidth
+            height: cellHeight
+            x: (index % 7) * cellWidth
+            y: ((index - index % 7) / 7) * cellHeight + cellHeight
+            Loader {
+                property var modelData: root.monthDays[index]
+                property date date: modelData.date
+                property string text: modelData.text
+                property bool currentMonth: !modelData.surrounding
+                property bool pressed: monthDayItem === pressedItem
+                anchors.fill: parent
+                sourceComponent: delegate
+            }
+        }
+    }
+}

=== added file 'src/imports/Components/Pickers/1.3/DatePickerMonthDaysWorker.js'
--- src/imports/Components/Pickers/1.3/DatePickerMonthDaysWorker.js	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/DatePickerMonthDaysWorker.js	2016-10-25 11:37:58 +0000
@@ -0,0 +1,61 @@
+function formatDay(d, month) {
+  var dateNum = d.getDate()
+  return {
+    dateNum: dateNum,
+    text: dateNum + '',
+    surrounding: d.getMonth() !== month,
+    date: d
+  }
+}
+
+function getMonthDays(Calendar, displayedMonth, firstDayOfWeek) {
+
+  var cal = new Calendar(firstDayOfWeek)
+  var month = displayedMonth.getMonth()
+  var year = displayedMonth.getFullYear()
+
+  function setTime(date) {
+    var d = new Date(displayedMonth.getTime())
+    d.setFullYear(date.getFullYear())
+    d.setMonth(date.getMonth())
+    d.setDate(date.getDate())
+    return d
+  }
+
+  var monthDates = []
+  cal.monthDates(year, month, function(d) {
+    monthDates.push(formatDay(setTime(d), month))
+  })
+
+  if (monthDates.length / 7 > 5) {
+    return monthDates
+  }
+
+  // var lastDate = new Date(year, month, 1)
+  var lastDate = new Date(displayedMonth.getTime())
+  lastDate.setFullYear(year)
+  lastDate.setMonth(month)
+  lastDate.setDate(1)
+
+  var lastDay = monthDates[monthDates.length - 1]
+  if (lastDay.surrounding) lastDate.setMonth(month + 1)
+    lastDate.setDate(lastDay.dateNum)
+
+  for (var i = monthDates.length; i < 7 * 6; i++) {
+    lastDate.setDate(lastDate.getDate() + 1)
+    monthDates.push(formatDay(lastDate, month))
+  }
+
+  return monthDates
+}
+
+WorkerScript.onMessage = function(msg) {
+  if (msg.name === 'requestMonthDays') {
+    Qt.include('calendar.js', function(status) {
+      WorkerScript.sendMessage({
+        name: 'monthDays',
+        monthDays: getMonthDays(Calendar, msg.displayedMonth, msg.firstDayOfWeek),
+      })
+    })
+  }
+}

=== added file 'src/imports/Components/Pickers/1.3/DayNightPicker.qml'
--- src/imports/Components/Pickers/1.3/DayNightPicker.qml	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/DayNightPicker.qml	2016-10-25 11:37:58 +0000
@@ -0,0 +1,50 @@
+import Ubuntu.Components 1.3
+import QtQuick 2.4
+import 'dateutils.js' as DU
+
+ListView {
+    id: ampmListView
+    clip: true
+    model: ['AM', 'PM']
+    cacheBuffer: 0
+    snapMode: ListView.SnapToItem
+    orientation: ListView.Vertical
+    property real itemHeight
+
+    highlightFollowsCurrentItem: true
+    highlightMoveDuration: UbuntuAnimation.FastDuration
+    highlightRangeMode: ListView.StrictlyEnforceRange
+
+    preferredHighlightBegin: height / 2 - itemHeight / 2
+    preferredHighlightEnd: height / 2 + itemHeight / 2
+
+    onCurrentIndexChanged: {
+        var hour = date.getHours()
+
+        if (hour < 12 && currentIndex === 1) {
+            hour += 12
+        } else if (hour > 12 && currentIndex === 0) {
+            hour -= 12
+        }
+
+        datePicker.date = DU.clone(date, 'setHours', hour);
+    }
+
+    delegate: MouseArea {
+        property bool active: ListView.isCurrentItem
+        width: parent.width
+        height: itemHeight
+        onReleased: ampmListView.currentIndex = index
+        Label {
+            id: item
+            color: parent.active? UbuntuColors.darkGrey : UbuntuColors.lightGrey // FIXME:
+            width: parent.width - units.gu(1)
+            height: parent.height
+            x: units.gu(1)
+            text: modelData
+            textSize: Label.Medium
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+}

=== added file 'src/imports/Components/Pickers/1.3/DigitSeparator.qml'
--- src/imports/Components/Pickers/1.3/DigitSeparator.qml	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/DigitSeparator.qml	2016-10-25 11:37:58 +0000
@@ -0,0 +1,10 @@
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Label {
+    anchors.verticalCenter: parent.verticalCenter
+    color: theme.palette.normal.backgroundText
+    text: ':'
+    textSize: Label.Medium
+    Component.onCompleted: x -= width / 2
+}

=== added file 'src/imports/Components/Pickers/1.3/HourPicker.qml'
--- src/imports/Components/Pickers/1.3/HourPicker.qml	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/HourPicker.qml	2016-10-25 11:37:58 +0000
@@ -0,0 +1,114 @@
+import Ubuntu.Components 1.3
+import QtQuick 2.4
+import 'dateutils.js' as DU
+
+PathView {
+    id: pathview
+    property date date: datePicker.date // FIXME:
+    property real itemAlign: Text.AlignHCenter
+    property string type
+    property bool ampm: true
+    clip: true
+    pathItemCount: 6
+    model: {
+        if (type === 'hours') {
+            return ampm? 12 : 24
+        }
+        if (type === 'minutes' || type === 'seconds') {
+            return 60
+        }
+        return 0
+    }
+    snapMode: PathView.SnapToItem
+    preferredHighlightBegin: 0.5
+    preferredHighlightEnd: 0.5
+
+    property bool indexInit: false
+    Timer {
+        id: afterCompleted
+        interval: 0
+        onTriggered: indexInit = true
+    }
+    onCurrentIndexChanged: {
+        if (!indexInit) return
+
+        var method = null
+        var value = null
+        var am = date.getHours() > 0 && date.getHours() < 13
+
+        if (type === 'hours') {
+            method = 'setHours'
+            if (ampm) {
+                value = am? currentIndex + 1 : ((currentIndex + 13) % 24)
+            } else {
+                value = (currentIndex + 1) % 24
+            }
+        } else if (type === 'minutes') {
+            method = 'setMinutes'
+            value = currentIndex
+
+        } else if (type === 'seconds') {
+            method = 'setSeconds'
+            value = currentIndex
+        }
+
+        if (method === null || value === null) {
+            return
+        }
+
+        datePicker.date = DU.clone(date, method, value) // FIXME:
+    }
+    delegate: Item {
+        property bool active: PathView.isCurrentItem
+        width: pathview.width
+        height: datePicker.itemHeight // FIXME:
+        Label {
+            width: parent.width
+            height: parent.height
+            // FIXME: What color?
+            color: parent.active? UbuntuColors.darkGrey : UbuntuColors.lightGrey
+            text: {
+                if (pathview.type === 'hours') {
+                    return DU.format(DU.clone(date, 'setHours', index + 1), 'HH')
+                }
+                if (pathview.type === 'minutes') {
+                    return DU.format(DU.clone(date, 'setMinutes', index), 'mm')
+                }
+                if (pathview.type === 'seconds') {
+                    return DU.format(DU.clone(date, 'setSeconds', index), 'ss')
+                }
+                return ''
+            }
+            // fontSize: 'x-large'
+            textSize: Label.Medium
+            horizontalAlignment: pathview.itemAlign
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+    path: Path {
+        startX: pathview.width / 2
+        startY: - datePicker.itemHeight / 2 // FIXME:
+        PathLine {
+            x: pathview.width / 2
+            y: pathview.height + datePicker.itemHeight / 2 // FIXME:
+        }
+    }
+    Component.onCompleted: {
+        afterCompleted.start()
+        switch (type) {
+            case 'hours':
+                if (ampm) {
+                    currentIndex = date.getHours() - 1
+                } else {
+                    currentIndex = date.getHours() % 24 - 1
+                }
+                break
+            case 'minutes':
+                currentIndex = date.getMinutes()
+                break
+            case 'seconds':
+                currentIndex = date.getSeconds()
+                break
+        }
+    }
+}

=== added file 'src/imports/Components/Pickers/1.3/YearListDropdown.qml'
--- src/imports/Components/Pickers/1.3/YearListDropdown.qml	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/YearListDropdown.qml	2016-10-25 11:37:58 +0000
@@ -0,0 +1,131 @@
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import 'dateutils.js' as DU
+
+Rectangle {
+    id: root
+
+    property date minimum: DU.clone(null, 'setDate', 1)
+    property date maximum: DU.clone(minimum, 'setFullYear', minimum.getFullYear() + 50)
+    property real itemHeight: height / 5
+    property real itemWidth: width / 2
+
+    property alias monthsPathView: monthsPathView
+    property alias yearsListView: yearsListView
+
+    signal requestDateChange(date newDate)
+
+    width: parent.width
+    height: parent.height
+    y: -height
+    color: 'white'
+
+    PathView {
+        id: monthsPathView
+        property var date: new Date(1970, 0, 1)
+        width: root.itemWidth
+        height: parent.height
+        pathItemCount: 6
+        model: 12
+        snapMode: PathView.SnapToItem
+        clip: true
+
+        preferredHighlightBegin: 0.5
+        preferredHighlightEnd: 0.5
+
+        onCurrentIndexChanged: {
+            var newDate = DU.clone(datePicker.date, 'setMonth', currentIndex)
+            var newDisplayedDate = DU.clone(newDate)
+            root.requestDateChange(newDate)
+        }
+
+        delegate: Item {
+            property bool active: PathView.isCurrentItem
+            width: root.itemWidth
+            height: root.itemHeight
+            Rectangle {
+                anchors.fill: parent
+                color: 'transparent'
+                Label {
+                    width: parent.width - units.gu(1)
+                    height: parent.height
+                    color: parent.parent.active? UbuntuColors.orange : UbuntuColors.darkGrey
+                    text: DU.format(DU.clone(monthsPathView.date, 'setMonth', index), 'MMMM')
+                    fontSize: 'x-large'
+                    horizontalAlignment: Text.AlignRight
+                    verticalAlignment: Text.AlignVCenter
+                }
+            }
+        }
+
+        path: Path {
+            startX: root.itemWidth / 2
+            startY: - root.itemHeight / 2
+            PathLine {
+                x: root.itemWidth / 2
+                y: root.height + root.itemHeight / 2
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+        }
+    }
+
+    ListView {
+        id: yearsListView
+
+        clip: true
+        width: root.itemWidth
+        height: parent.height
+        x: width
+
+        model: root.maximum.getFullYear() - root.minimum.getFullYear() + 1
+        cacheBuffer: 10
+        snapMode: ListView.SnapToItem
+        orientation: ListView.Vertical
+
+        highlightFollowsCurrentItem: true
+        highlightMoveDuration: UbuntuAnimation.FastDuration
+        highlightRangeMode: ListView.StrictlyEnforceRange
+
+        preferredHighlightBegin: height / 2 - root.itemHeight / 2
+        preferredHighlightEnd: height / 2 + root.itemHeight / 2
+
+        property bool isCurrentIndexInit: false
+        onCurrentIndexChanged: {
+            if (!isCurrentIndexInit) {
+                isCurrentIndexInit = true
+                return
+            }
+            var newDate = DU.clone(
+                minimum, 'setFullYear',
+                minimum.getFullYear() + currentIndex
+            )
+            root.requestDateChange(newDate)
+        }
+
+        delegate: MouseArea {
+            width: parent.width
+            height: root.itemHeight
+            property bool active: ListView.isCurrentItem
+            onReleased: yearsListView.currentIndex = index
+            Label {
+                id: item
+                color: parent.active? UbuntuColors.orange : UbuntuColors.darkGrey
+                width: parent.width - units.gu(1)
+                height: parent.height
+                x: units.gu(1)
+                text: root.minimum.getFullYear() + index
+                fontSize: 'x-large'
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+
+        Component.onCompleted: {
+            // yearsListView.currentIndex = yearsListView.currentIndex
+            yearsListView.positionViewAtIndex(yearsListView.currentIndex, ListView.SnapPosition)
+        }
+    }
+}

=== added file 'src/imports/Components/Pickers/1.3/calendar.js'
--- src/imports/Components/Pickers/1.3/calendar.js	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/calendar.js	2016-10-25 11:37:58 +0000
@@ -0,0 +1,79 @@
+.pragma library
+
+/*!
+ * calendar.js: inspired by the calendar module from Python
+ * Copyright(c) 2011 Luciano Ramalho <[e-mail]>
+ * MIT Licensed
+ *
+ * From https://github.com/ramalho/calendar.js
+ */
+
+var CalendarException = function CalendarException(message) {
+   this.message = message;
+   this.toString = function() {
+      return this.constructor.name + ": " + this.message
+   };
+}
+
+var Calendar = function Calendar(firstWeekDay) {
+    //properties
+    this.firstWeekDay = firstWeekDay || 0; // 0 = Sunday
+};
+
+Calendar.prototype = {
+    constructor : Calendar,
+    weekStartDate : function weekStartDate(date) {
+        var startDate = new Date(date.getTime());
+        while (startDate.getDay() !== this.firstWeekDay) {
+            startDate.setDate(startDate.getDate() - 1);
+        }
+        return startDate;
+    },
+    monthDates : function monthDates(year, month, dayFormatter, weekFormatter) {
+        if ((typeof year !== "number") || (year < 1970)) {
+            throw new CalendarException('year must be a number >= 1970');
+        };
+        if ((typeof month !== "number") || (month < 0) || (month > 11)) {
+            throw new CalendarException('month must be a number (Jan is 0)');
+        };
+        var weeks = [],
+            week = [],
+            i = 0,
+            date = this.weekStartDate(new Date(year, month, 1));
+        do {
+            for (i=0; i<7; i++) {
+                week.push(dayFormatter ? dayFormatter(date) : date);
+                date = new Date(date.getTime());
+                date.setDate(date.getDate() + 1);
+            }
+            weeks.push(weekFormatter ? weekFormatter(week) : week);
+            week = [];
+        } while ((date.getMonth()<=month) && (date.getFullYear()===year));
+        return weeks;
+    },
+    monthDays : function monthDays(year, month) {
+        var getDayOrZero = function getDayOrZero(date) {
+            return date.getMonth() === month ? date.getDate() : 0;
+        };
+        return this.monthDates(year, month, getDayOrZero);
+    },
+    monthText : function monthText(year, month) {
+        if (typeof year === "undefined") {
+            var now = new Date();
+            year = now.getFullYear();
+            month = now.getMonth();
+        };
+        var getDayOrBlank = function getDayOrBlank(date) {
+            var s = date.getMonth() === month ? date.getDate().toString() : "  ";
+            while (s.length < 2) s = " "+s;
+            return s;
+        };
+        var weeks = this.monthDates(year, month, getDayOrBlank,
+            function (week) { return week.join(" ") });
+        return weeks.join("\n");
+    }
+};
+for (var i = 0; i < 11; i++) {
+    var month = Qt.locale().monthName(i); // FIXME:, Locale.LongFormat);
+    Calendar[month] = i;
+}

=== added file 'src/imports/Components/Pickers/1.3/dateutils.js'
--- src/imports/Components/Pickers/1.3/dateutils.js	1970-01-01 00:00:00 +0000
+++ src/imports/Components/Pickers/1.3/dateutils.js	2016-10-25 11:37:58 +0000
@@ -0,0 +1,53 @@
+.pragma library
+
+// Returns a formatted string from a date, using Qt Date.prototype.toLocaleString()
+function format(date, format, localeStr) {
+    var locale = Qt.locale(localeStr || 'en_US')
+    return date.toLocaleString(locale, format)
+}
+
+// Clone a Date object, and optionally invokes methods on it
+function clone(date, calls) {
+    var d = date? new Date(date.getTime()) : new Date()
+    if (!calls) return d
+    if (!Array.isArray(calls)) {
+        calls = [[calls].concat([].slice.call(arguments, 2))]
+    }
+    for (var i = 0; i < calls.length; i++) {
+        if (!calls[i]) continue
+        d[calls[i][0]].apply(d, calls[i].slice(1))
+    }
+    return d
+}
+
+// Return true if date1 and date2 are the same day
+function sameDay(date1, date2) {
+    return date1.getDate() === date2.getDate() &&
+           date1.getMonth() === date2.getMonth() &&
+           date1.getFullYear() === date2.getFullYear()
+}
+
+// Compare two dates
+function compareDates(date1, date2) {
+    var time1 = date1.getTime()
+    var time2 = date2.getTime()
+    if (time1 > time2) return 1
+    if (time1 < time2) return -1
+    return 0
+}
+
+var shortDayNames = 'Mon Tue Wed Thu Fri Sat Sun'.split(' ')
+
+// Return a short day name based on a date object or a day number
+function shortDayName(date) {
+    if (typeof date === 'number') {
+        return shortDayNames[date]
+    }
+    return shortDayNames[date.getDay()]
+}
+
+// Return the number of months between date1 and date2 (including both)
+function getMonthsRange(date1, date2) {
+    return (date2.getFullYear() - date1.getFullYear()) * 12 +
+           (date2.getMonth() - date1.getMonth())
+}

=== modified file 'src/imports/Components/Pickers/Pickers.pro'
--- src/imports/Components/Pickers/Pickers.pro	2015-05-19 09:23:01 +0000
+++ src/imports/Components/Pickers/Pickers.pro	2016-10-25 11:37:58 +0000
@@ -29,6 +29,15 @@
              1.3/Picker.qml \
              1.3/PickerRow.qml \
              1.3/SecondsModel.qml \
+             1.3/dateutils.js \
+             1.3/calendar.js \
+             1.3/DatePickerMonthDays.qml \
+             1.3/DatePickerMonthDaysWorker.js \
+             1.3/YearListDropdown.qml \
+             1.3/DatePickerHeader.qml \
+             1.3/HourPicker.qml \
+             1.3/DayNightPicker.qml \
+             1.3/DigitSeparator.qml \
              1.3/YearModel.qml
 
 load(ubuntu_qml_module)