src/controls.6/DatePicker.qml

0001 import QtQuick
0002 import QtQuick.Layouts
0003 import QtQuick.Controls
0004
0005 import org.mauikit.controls 1.3 as Maui
0006 import org.mauikit.calendar 1.0 as Kalendar
0007
0008 /**
0009  * @inherit QtQuick.Controls.Page
0010  * @brief A control for quickly picking a date in the format of year, month and day number.
0011  *
0012  * @image html datepicker.png
0013  *
0014  * @code
0015  * Maui.ApplicationWindow
0016  * {
0017  *    id: root
0018  *
0019  *    Maui.Page
0020  *    {
0021  *        anchors.fill: parent
0022  *        Maui.Controls.showCSD: true
0023  *        title: root.title
0024  *
0025  *        MC.DatePicker
0026  *        {
0027  *            id: _datePicker
0028  *            height: 300
0029  *            width: 300
0030  *            anchors.centerIn: parent
0031  *
0032  *            onAccepted: (date) => root.title = date.toLocaleString()
0033  *        }
0034  *    }
0035  * }
0036  * @endcode
0037  */
0038 Page
0039 {
0040     id:  control
0041
0042     /**
0043      * @brief
0044      */
0045     readonly property date startDate : new Date()
0046
0047     /**
0048      * @brief
0049      */
0050     property int selectedMonth : selectedDate.getUTCMonth()
0051
0052     /**
0053      * @brief
0054      */
0055     property int selectedYear: selectedDate.getUTCFullYear()
0056
0057     /**
0058      * @brief
0059      */
0060     property int selectedDay : selectedDate.getDate()
0061
0062     /**
0063      * @brief
0064      */
0065     property date selectedDate : startDate
0066
0067     /**
0068      * @brief
0069      *
0070      */
0071     signal accepted(var date)
0072
0073     padding: 0
0074
0075     header: Maui.ToolBar
0076     {
0077         width: parent.width
0078
0079         background: null
0080
0081         leftContent: Maui.ToolActions
0082         {
0083             autoExclusive: true
0084
0085             Action
0086             {
0087                 text: control.selectedDay
0088                 checked: _swipeView.currentIndex === 0
0089                 onTriggered: _swipeView.currentIndex = 0
0090             }
0091
0092             Action
0093             {
0094                 text: Qt.locale().standaloneMonthName(control.selectedMonth)
0095                 checked: _swipeView.currentIndex === 1
0096                 onTriggered: _swipeView.currentIndex = 1
0097
0098             }
0099
0100             Action
0101             {
0102                 text: control.selectedYear
0103                 checked: _swipeView.currentIndex === 2
0104                 onTriggered: _swipeView.currentIndex = 2
0105             }
0106         }
0107
0108         rightContent: Button
0109         {
0110             text: i18n("Done")
0111             onClicked: control.accepted(control.selectedDate)
0112         }
0113     }
0114
0115     contentItem: SwipeView
0116     {
0117         id: _swipeView
0118         background: null
0119         clip: true
0120
0121         Kalendar.DaysGrid
0122         {
0123             id: _daysPane
0124             month: control.selectedMonth+1
0125             year: control.selectedYear
0126
0127             onDateClicked: (date) =>
0128             {
0129                 control.updateSelectedDate(date.getDate(), control.selectedMonth, control.selectedYear)
0130             }
0131         }
0132
0133         Kalendar.MonthsGrid
0134         {
0135             id: _monthPage
0136             selectedMonth: control.selectedMonth
0137             onMonthSelected: (month) => control.updateSelectedDate(control.selectedDay, month, control.selectedYear)
0138         }
0139
0140         Kalendar.YearsGrid
0141         {
0142             id: _yearPane
0143             selectedYear: control.selectedYear
0144             onYearSelected: (year) => control.updateSelectedDate(control.selectedDay, control.selectedMonth, year)
0145         }
0146     }
0147
0148     /**
0149      * @brief
0150      */
0151     function updateSelectedDate(day, month, year)
0152     {
0153         control.selectedDay = day
0154         control.selectedMonth = month
0155         control.selectedYear = year
0156
0157         console.log("CREATING A NEW DATE WITH", day, month, year)
0158         control.selectedDate = new Date(year, month, day)
0159         _swipeView.incrementCurrentIndex()
0160     }
0161 }