Выбор / сохранение группы календарных дат в QML

здесь есть отличный выбор даты Жидкость, скачайте его, распакуйте его где-нибудь
откройте CMD или терминал (если вы используете Linux):
cd в папку, в которую вы извлекли файлы cd E:\fluid-develop\fluid-develop
если у вас есть текущие переменные среды для Qt (C:\Qt\Qt5.12.0\5.12.0\msvc2017\bin), запустите их в cmd:

//this is how i installed it, in case this does not work there is installation guide at fluid page
qmake 
nmake //this comes with visual studio you can install mingw if you dont have it (for mingw its 'make')
nmake install

после этого у вас должен быть каталог этого элемента управления внутри вашей папки qml:

Qt5.12.0\5.12.0\msvc2017\qml\Fluid

теперь у вас есть плавные элементы управления, вы можете создать datetimepicker:

property var array: []
        Button{
            onClicked: {
                datePickerDialog.open()
                console.info(array)
            }
        }

        FluidControls.DatePickerDialog {
              id: datePickerDialog
              standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel
              standardButtonsContainer: Button {
                  anchors.verticalCenter: parent.verticalCenter
                  text: qsTr("add to array")
                  flat: true
                  onClicked: {
                      var year = Qt.formatDateTime(datePickerDialog.selectedDate,"yyyy")
                      var month = Qt.formatDateTime(datePickerDialog.selectedDate,"MM")
                      var day = Qt.formatDateTime(datePickerDialog.selectedDate,"dd")
                      array.push(year+'-'+month+'-'+day)

                  }


              }
          }

и документация для это

Чтобы сохранить несколько дат одновременно, сохранив возможность сохранения отдельных дат с использованием, я использовал AppCheckBox с визуальным маркером на каждой дате, когда вы перемещаетесь, чтобы отображать выбранные даты, я использовал приведенный ниже код вместе с Календарь Qt Quick Controls в качестве основы

Код:

Page {
     id: calendarPage

     property var multiSelectArr: [] //where I store the selected date range

     AppCheckBox {
         id: dateRangeButton
         text: "date range"
     } // used to toggle multiple selection or single date

    Flow {
        Calendar {
            id: calendar
            selectedDate: new Date()

            onSelectedDateChanged: {
            dateRangeButton.checked ? multiSelectArr.push(calendar.selectedDate.getTime()) : multiSelectArr = [] // if dateRangeButton is not checked, empty array, otherwise add newly selected date

            multiSelectArrChanged() // this is where the magic happens, it triggers the array to update thus adding the new coloured marker to the date
            // without this, the highlight will not appear. 
            }
        //remainder of calendar code

           Rectangle {
           id: multiSelectMarker
           color: "green"
           visible: multiSelectArr.indexOf(styleData.date.getTime()) > -1 //check for date within array to show marker
           }
        }
    }
}