Search code examples
vue.jsnativescripttimepickernativescript-vue

TimePicker - retrieving actual values selected (hour and minute)


will post my question here since the vue.js forum seems dead and can't get slack confirmation email.

I recently started coding with .vue and have a question.

After I select a time using timepicker, I would like to have the hour and minute into a variable. (one or multiple, not sure yet) Right now I get this "Sun Dec 31 1899 07:25:00 GMT-0500 (EST)"

I thought I could do

console.log(this.hour);
console.log(this.minute);
console.log(this.hour + ":" + this.minute);

the code his here https://play.nativescript.org/?template=play-vue&id=pFJlwX&v=4

<template>
    <Page>
        <ActionBar title="Time Picker" />
        <ScrollView>
            <StackLayout class="home-panel">

                <TimePicker v-model="yourTimeValue" @timeChange="onHour" :hour="8" :minute="currentMinute" minuteInterval="5" />
                <TextField v-model="textFieldValue" hint="Enter text..." @returnPress=" onHour" />

            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                currentMinute: new Date().getMinutes(),
                textFieldValue: ""
            };
        },
        methods: {
            // when you release your finger from the timepicker, you end up in this function
            onHour: function(args) {
                console.log(this.yourTimeValue);  // returns something like this Sun Dec 31 1899 07:25:00 GMT-0500 (EST)
                console.log(this.textFieldValue); // this return the text you wrote in the text field
            }
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

Thank you


Solution

  • v-model can hold only one value so it's Date which includes the Time (hour & minutes).

    You can always parse the hour and minutes from the date object,

    console.log(this.yourTimeValue.getHours() + ":" + this.yourTimeValue.getMinutes());