import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    property var today: new Date() //todays date
    property var usrDate: new Date() //date that the user has picked

    // Place our content in a Column.  The PageHeader is always placed at the top
    // of the page, followed by our content.
    Column {
        id: column
        width: page.width
        spacing: Theme.paddingLarge
        PageHeader {
            title: "Age Calculator"
        }

        Label{ //shows todays date 29/12/2013
            text: "Today is: " + today.getFullYear() + " / " + today.getMonth() + " / " + today.getDate()
        }

        Button {
            id: button
            text: "Choose a date"

            onClicked: {
                var dialog = pageStack.push("Sailfish.Silica.DatePickerDialog", {
                                                date: new Date() //uses today date by default 29/12/2013
                                            })
                dialog.accepted.connect(function() {
                    usrDate = dialog
                    button.text = "You chose: " + dialog.day
                    //console.log("User day: ", usrDate.day)
                })
             }
        }

        Label{ //shows in console: "TypeError: Cannot read property 'year' of null"
            text: "User picked: " + usrDate.year + " / " + usrDate.month + " / " + usrDate.day
        }

        Button { //shows in console: "TypeError: Cannot read property 'year' of null"
            id: button2
            text: "Test user date"

            onClicked: {
                button2.text = "User picked: " + usrDate.year + " / " + usrDate.month + " / " + usrDate.day
            }
        }
    }
}