diff --git a/package-lock.json b/package-lock.json index f362cc2b615e434d02f55f3d86b84a9133eed394..f2ca81a764ac53a9cc0689c59b4dbc3e0f80967a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8810,6 +8810,11 @@ } } }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index 076642033ca3c756c1838df13d63a61aa4d39ce0..2bb3fcfff9a98e28b65a5f7f31db5ff67a86a4f4 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "core-js": "^3.3.2", + "moment": "^2.24.0", "vue": "^2.6.10", "vue-router": "^3.1.3", "vuetify": "^2.1.0", diff --git a/src/components/DateTimeField.vue b/src/components/DateTimeField.vue new file mode 100644 index 0000000000000000000000000000000000000000..27574eac573c051f32a0a5521fdb9dc7fd735551 --- /dev/null +++ b/src/components/DateTimeField.vue @@ -0,0 +1,93 @@ +<template> + <v-row> + <v-col + cols="6" + > + <v-menu + :close-on-content-click="false" + min-width="290px" + offset-y + v-model="showDatePicker" + > + <template + v-slot:activator="{ on }" + > + <v-text-field + label="날짜" + readonly + v-model="date" + v-on="on" + ></v-text-field> + </template> + <v-date-picker + v-model="date" + @input="showDatePicker = false" + ></v-date-picker> + </v-menu> + </v-col> + <v-col + col="6" + > + <v-menu + :close-on-content-click="false" + min-width="290px" + offset-y + v-model="showTimePicker" + > + <template + v-slot:activator="{ on }" + > + <v-text-field + label="시각" + readonly + v-model="time" + v-on="on" + ></v-text-field> + </template> + <v-time-picker + v-model="time" + @input="showTimePicker = false" + ></v-time-picker> + </v-menu> + </v-col> + </v-row> +</template> + +<script> +import moment from 'moment'; + +export default { + name: 'DateTimeField', + + props: ['datetime'], + + data: () => ({ + showDatePicker: false, + showTimePicker: false, + date: '', + time: '', + }), + + watch: { + date() { + this.$emit('update:datetime', `${this.date} ${this.time}`); + }, + time() { + this.$emit('update:datetime', `${this.date} ${this.time}`); + }, + }, + + created() { + const m = moment(this.datetime); + this.date = m.format('YYYY-MM-DD'); + this.time = m.format('HH:mm'); + }, +}; +</script> + + +<style scoped> +.col { + padding: 0 12px 0; +} +</style>