• Home
• Felgo
• DatePicker

DatePicker

Allows to pick a date, time or interval with flickable tumblers. More...

• List of all members, including inherited members

Properties

• amPmTumbler : var
• countDownDuration : int
• countDownMode : int
• dateFormat : string
• dateMode : int
• datePickerMode : int
• dateTimeMode : int
• dateTumbler : var
• dayTumbler : var
• endDate : date
• hourText : var
• hourTumbler : var
• isMoving : alias
• itemDelegate : Component
• locale : var
• maxCountDownDuration : int
• minuteInterval : int
• minuteText : var
• minuteTumbler : var
• monthTumbler : var
• selectedDate : var
• startDate : date
• timeFormat : string
• timeMode : int
• use24HourFormat : bool
• useCombinedDate : bool
• visibleItemCount : int
• yearTumbler : var

Methods

• scrollToDate(date)
• scrollToDuration(duration)
• setDate(date)
• setDuration(duration)

Detailed Description

The DatePicker control lets the user specify a date or time with flickable Tumbler items. It allows to handle date and time input in a user-friendly way, especially on mobile platforms with touch input.

The DatePicker control handles all date calculations and formatting. It is set up for ease of use with QML and offers four basic modes:

You can configure your desired mode with the datePickerMode property. For dates and times, the current value is reflected by the selectedDate property. The time interval for countDownMode relies on the countDownDuration property instead.

Usage Examples

Simple Picker for Date and Time

This example shows how to use the default DatePicker to select a date and time:

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       title: "Date Picker"

       AppText {
         text:  datePicker.selectedDate.toUTCString()
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: datePicker.top
       }

       DatePicker {
         id: datePicker
         anchors.centerIn: parent
       }
     }
   }
 }

Picking a Time Interval

This example shows how to use the DatePicker to select a time interval:

 import Felgo
 import QtQuick

 App {
     NavigationStack {
       AppPage {
         title: "Time Interval Picker"

         AppText {
           text:  "Duration: "+datePicker.countDownDuration+" minutes"
           anchors.horizontalCenter: parent.horizontalCenter
           anchors.bottom: datePicker.top
         }

         DatePicker {
           id: datePicker
           anchors.centerIn: parent
           datePickerMode: datePicker.countDownMode
         }
       }
     }
 }

Showing a Modal Date Picker

You can add the date picker anywhere in your user interface. Mobile apps often show an overlay that slides in from the bottom when the user wants to edit a date.

To create such an overlay, you can combine the DatePicker with an AppModal:

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       title: "Modal Date Picker"
       Column {
         anchors.centerIn: parent
         AppText {
           text: pickerModal.pickerDate.toUTCString()
         }
         AppButton {
           text: qsTr("Pick Date")
           onClicked: pickerModal.open()
           anchors.horizontalCenter: parent.horizontalCenter
         }
       }
     }
   }

   AppModal {
     id: pickerModal
     fullscreen: false
     modalHeight: doneButton.height + datePicker.height + NativeUtils.safeAreaInsets.bottom
     property date pickerDate: new Date()

     // reset the picker when the modal is closed
     onClosed: datePicker.setDate(pickerModal.pickerDate)

     AppButton {
       text: qsTr("Cancel")
       anchors.left: parent.left
       flat: true
       fontBold: false
       onClicked: pickerModal.close()
     }

     AppButton {
       id: doneButton
       text: qsTr("Done")
       anchors.right: parent.right
       flat: true
       fontBold: true
       onClicked: {
         pickerModal.pickerDate = datePicker.selectedDate
         pickerModal.close()
       }
     }

     DatePicker {
       id: datePicker
       anchors.top: doneButton.bottom
       selectedDate: pickerModal.pickerDate
     }
   }
 }

Customizing the Date Picker

The date picker is a QML Rectangle that holds a row of Tumbler items for date selection. It uses Theme.backgroundColor as default color, and provides an AppText item as itemDelegate for the tumblers.

Based on the Qt Locale's date format and the datePickerMode, the picker creates and configures Tumbler items automatically.

To customize the picker, you can change the datePickerMode, overwrite the locale setting, or modify derived configuration properties like:

• useCombinedDate: Choose whether to have a single date tumbler, or use individual tumblers for year, month and day.
• dateFormat: Specify a custom date format to change the text of entries when using a single date tumbler.
• use24HourFormat: Show an AM/PM tumbler, or use a 24 hour format for time selection.

You can also pass own settings for each internal Tumbler item. These properties are available:

• dateTumbler: Used for date selection when useCombinedDate is true.
• yearTumbler, monthTumbler and dayTumbler: Used for date selection when useCombinedDate is false.
• hourTumbler, minuteTumbler and amPmTumbler: For time selection. The usage of amPmTumbler depends on the use24HourFormat setting.

You can configure a JSON object with QML property values, which are passed to the tumbler on creation. This is allows to hide individual tumblers, change their width, and more. The examples below show some reference use cases:

Date Picker for Year and Month

This example uses the dayTumbler property to hide the day selection. The user can only choose the year and month.

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       title: "Year and Month Picker"

       AppText {
         text:  datePicker.selectedDate.toUTCString()
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: datePicker.top
       }

       DatePicker {
         id: datePicker
         anchors.centerIn: parent
         datePickerMode: dateMode
         dayTumbler: { "visible": false }
       }
     }
   }
 }

All available QML Tumbler properties can be configured.

Date Picker with Custom Text or Delegate

Each Tumbler also provides a formatDelegateText(index, entry) function, which determines the display text for each entry. Overwrite it with your own implementation to show custom text instead:

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       title: "Custom Delegate Text"

       AppText {
         text:  datePicker.selectedDate.toUTCString()
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: datePicker.top
       }

       DatePicker {
         id: datePicker
         anchors.centerIn: parent
         datePickerMode: dateMode
         useCombinedDate: true
         dateTumbler: {
           "formatDelegateText": function(index, entry) {
             var date = new Date(entry)
             return date.getFullYear()+" | "+(date.getMonth() + 1)+" | "+date.getDate()
           }
         }
       }
     }
   }
 }

To fully replace the default AppText delegate item with your own implementation use the itemDelegate property.

Property Documentation

 import Felgo
 import QtQuick

 App {

   NavigationStack {

     AppPage {
       title: "Date Picker with Custom Item Delegate"

       AppText {
         text:  datePicker.selectedDate.toUTCString()
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: datePicker.top
       }

       DatePicker {
         id: datePicker
         anchors.centerIn: parent
         itemDelegate: Component {
           Rectangle {
             id: delegate
             implicitWidth: parent.width
             implicitHeight: parent.height
             color: "lightgreen"

             AppText {
               anchors.centerIn: parent
               text: delegate.parent.tumbler.formatDelegateText(delegate.parent.itemIndex, delegate.parent.itemData)
             }
           }
         }
       }
     }
   }
 }

Method Documentation