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

Question

Я использую базу данных Firebase Realtime для хранения моих пользовательских данных.

Записи базы данных создаются путем сохранения дат из calendar.selectedDate.

Моя проблема заключается в том, что каждый раз, когда пользователь долженвыберите дату и нажмите кнопку сохранения, которая не очень плавная.

Мне интересно, можно ли выбрать / выделить сразу несколько дат, чтобы затем сохранить в пакетном режиме или использовать указатель даты для диапазона?

Мой календарь основан на календаре QtQuick Controls 1, связанном ниже,

http://doc.qt.io/qt-5/qtquickcontrols1-calendar-example.html

Я обыскал некоторые из них, и, похоже, их нетродной DatePicker, и мне интересно, будет ли обходной путь для многократного выделения ячеек даты, поскольку я также хотел бы видеть визуальный трек выбранных в настоящее время дат?

Answer 1

Чтобы сохранить несколько дат одновременно, сохраняя при этом возможность индивидуального сохранения дат с использованием, я использовал 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
           }
        }
    }
}

Answer 2

здесь есть отличный инструмент выбора даты Fluid , скачайте его и распакуйте его где-нибудь, где
откройте CMD или Терминал (если вы используете linux):
перейдите в папку, в которую вы распаковали файлы
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.log(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)

                  }


              }
          }

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