monero-gui/components/DatePicker.qml

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item {
    id: datePicker
    property bool expanded: false
    property var currentDate: new Date()
    property bool showCurrentDate: true
    height: 37
    width: 156

    onExpandedChanged: if(expanded) appWindow.currentItem = datePicker
    function hide() { datePicker.expanded = false }
    function containsPoint(px, py) {
        if(px < 0)
            return false
        if(px > width)
            return false
        if(py < 0)
            return false
        if(py > height + calendarRect.height)
            return false
        return true
    }

    Item {
        id: head
        anchors.fill: parent

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: parent.height - 1
            radius: 4
            y: 0
            color: "#DBDBDB"
        }

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: parent.height - 1
            radius: 4
            y: 1
            color: "#FFFFFF"

            Item {
                id: buttonItem
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.margins: 4
                width: height

                StandardButton {
                    id: button
                    anchors.fill: parent
                    shadowReleasedColor: "#DBDBDB"
                    shadowPressedColor: "#888888"
                    releasedColor: "#F0EEEE"
                    pressedColor: "#DBDBDB"
                    icon: "../images/datePicker.png"
                    visible: !datePicker.expanded
                    onClicked: datePicker.expanded = true
                }

                Image {
                    anchors.centerIn: parent
                    source: "../images/datePicker.png"
                    visible: datePicker.expanded
                }

                MouseArea {
                    anchors.fill: parent
                    enabled: datePicker.expanded
                    onClicked: datePicker.expanded = false
                }
            }

            Rectangle {
                id: separator
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: buttonItem.left
                anchors.rightMargin: 4
                height: 16
                width: 1
                color: "#DBDBDB"
                visible: datePicker.expanded
            }

            Row {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 10

                TextInput {
                    id: dayInput
                    width: 22
                    font.family: "Arial"
                    font.pixelSize: 18
                    color: "#525252"
                    maximumLength: 2
                    horizontalAlignment: TextInput.AlignHCenter
                    validator: IntValidator{bottom: 01; top: 31;}
                    KeyNavigation.tab: monthInput
                    text: {
                        if(datePicker.showCurrentDate) {
                            var day = datePicker.currentDate.getDate()
                            return day < 10 ? "0" + day : day
                        }
                    }
                }

                Text {
                    font.family: "Arial"
                    font.pixelSize: 18
                    color: "#525252"
                    text: "."
                }

                TextInput {
                    id: monthInput
                    width: 22
                    font.family: "Arial"
                    font.pixelSize: 18
                    color: "#525252"
                    maximumLength: 2
                    horizontalAlignment: TextInput.AlignHCenter
                    validator: IntValidator{bottom: 01; top: 12;}
                    KeyNavigation.tab: yearInput
                    text: {
                        if(datePicker.showCurrentDate) {
                            var month = datePicker.currentDate.getMonth() + 1
                            return month < 10 ? "0" + month : month
                        }
                    }
                }

                Text {
                    font.family: "Arial"
                    font.pixelSize: 18
                    color: "#525252"
                    text: "."
                }

                TextInput {
                    id: yearInput
                    width: 44
                    font.family: "Arial"
                    font.pixelSize: 18
                    color: "#525252"
                    maximumLength: 4
                    horizontalAlignment: TextInput.AlignHCenter
                    validator: IntValidator{bottom: 2000; top: 2100;}
                    text: if(datePicker.showCurrentDate) datePicker.currentDate.getFullYear()
                }

            }
        }

        Rectangle {
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            height: 3; width: 3
            color: "#FFFFFF"
            visible: datePicker.expanded
        }

        Rectangle {
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            height: 3; width: 3
            color: "#FFFFFF"
            visible: datePicker.expanded
        }
    }

    Rectangle {
        id: calendarRect
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: head.bottom
        color: "#FFFFFF"
        height: datePicker.expanded ? calendar.height : 0
        clip: true
        radius: 4

        Behavior on height {
            NumberAnimation { duration: 100; easing.type: Easing.InQuad }
        }

        Rectangle {
            anchors.left: parent.left
            anchors.top: parent.top
            height: 3; width: 3
            color: "#FFFFFF"
        }

        Rectangle {
            anchors.right: parent.right
            anchors.top: parent.top
            height: 3; width: 3
            color: "#FFFFFF"
        }

        Calendar {
            id: calendar
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            height: 180
            frameVisible: false

            style: CalendarStyle {
                gridVisible: false
                background: Rectangle { color: "transparent" }
                dayDelegate: Item {
                    implicitHeight: implicitWidth
                    implicitWidth: calendar.width / 7

                    Rectangle {
                        anchors.fill: parent
                        radius: parent.implicitHeight / 2
                        color: dayArea.pressed && styleData.visibleMonth ? "#FF6C3B" : "transparent"
                    }

                    Text {
                        anchors.centerIn: parent
                        font.family: "Arial"
                        font.pixelSize: 12
                        font.letterSpacing: -1
                        font.bold: dayArea.pressed
                        text: styleData.date.getDate()
                        color: {
                            if(!styleData.visibleMonth) return "#DBDBDB"
                            if(dayArea.pressed) return "#FFFFFF"
                            if(styleData.today) return "#FF6C3B"
                            return "#4A4848"
                        }
                    }

                    MouseArea {
                        id: dayArea
                        anchors.fill: parent
                        onClicked: {
                            if(styleData.visibleMonth) {
                                var date = styleData.date
                                var day = date.getDate()
                                var month = date.getMonth() + 1
                                dayInput.text = day < 10 ? "0" + day : day
                                monthInput.text = month < 10 ? "0" + month : month
                                yearInput.text = date.getFullYear()
                                datePicker.expanded = false
                            } else {
                                var date = styleData.date
                                if(date.getMonth() > calendar.visibleMonth)
                                    calendar.showNextMonth()
                                else calendar.showPreviousMonth()
                            }
                        }
                    }
                }

                dayOfWeekDelegate: Item {
                    implicitHeight: 20
                    implicitWidth: calendar.width / 7

                    Text {
                        anchors.centerIn: parent
                        elide: Text.ElideRight
                        font.family: "Arial"
                        font.pixelSize: 9
                        font.letterSpacing: -1
                        color: "#535353"
                        text: {
                            var locale = Qt.locale()
                            return locale.dayName(styleData.dayOfWeek, Locale.ShortFormat)
                        }
                    }
                }

                navigationBar: Rectangle {
                    implicitWidth: calendar.width
                    implicitHeight: 30

                    Text {
                        anchors.centerIn: parent
                        font.family: "Arial"
                        font.pixelSize: 12
                        font.letterSpacing: -1
                        color: "#4A4646"
                        text: styleData.title
                    }

                    Item {
                        anchors.left: parent.left
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        width: height

                        Image {
                            anchors.centerIn: parent
                            source: "../images/prevMonth.png"
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: calendar.showPreviousMonth()
                        }
                    }

                    Item {
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        width: height

                        Image {
                            anchors.centerIn: parent
                            source: "../images/nextMonth.png"
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: calendar.showNextMonth()
                        }
                    }
                }
            }
        }
    }
}