如何在QML中重用日期选择器

Question

我正在用qml进行开发，我有一个很长的日期选择器代码段，我想在表单布局中的几个文本字段上重复使用。下面是日历片段。

//Main.qml
MyCalendar {
   id : dialog //datepicker
  }
//main end

然后，我必须具有这三个文本字段，才能同时在这两个文本字段上实现日期选择器功能。

//main.qml
import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2

ApplicationWindow {
id: rootWindow
visible: true
width: 1000
height: 800
title: qsTr("Hello World!")

TextField {
    id: dateOfBirth
    placeholderText: qsTr("Date Of Birth")
    text: Qt.locale().dayName(stack.tmp_date.getDay(), Locale.ShortFormat) + ", " + Qt.locale().monthName(stack.tmp_date.getMonth(), Locale.ShortFormat) + " " + stack.tmp_date.getFullYear()
      MouseArea {
          anchors.fill: parent
          onClicked: dialog.open()
        }
   }

TextField {
     id: dateOfRegistration
     placeholderText: qsTr("Date Of Registration")
     text: Qt.locale().dayName(stack.tmp_date.getDay(), Locale.ShortFormat) + ", " + Qt.locale().monthName(stack.tmp_date.getMonth(), Locale.ShortFormat) + " " + stack.tmp_date.getFullYear()
      MouseArea {
          anchors.fill: parent
          onClicked: dialog.open()
       }
   }

TextField {
     id: dateOfBaptism
     placeholderText: qsTr("Date Of Baptism")
     text: Qt.locale().dayName(stack.tmp_date.getDay(), Locale.ShortFormat) + ", " + Qt.locale().monthName(stack.tmp_date.getMonth(), Locale.ShortFormat) + " " + stack.tmp_date.getFullYear()
      MouseArea {
          anchors.fill: parent
          onClicked: dialog.open()
        }     
    }
 }

我该怎么做？我正在为台式机开发。