-
날짜 input(datepicker)프론트엔드/Vue 2022. 1. 14. 15:13반응형SMALL
# What?
날짜 선택 input
# How?
1. jquery, moment 라이브러리 세팅
@ app.blade.php
<!DOCTYPE html> <html> <head> ... <script src="{{ asset('js/jquery-1.12.4') }}" defer></script> <script src="{{ asset('js/jquerr-ui-1.12.1') }}" defer></script> <script src="{{ asset('js/moment-2.24.0') }}" defer></script> </head> <body> </body> </html>2. vue 세팅
@ InputDate.vue
<template> <input type="text" :id="id" :value="value"> </template> <script> export default { props: { id: { default : "date" }, minDate: { default: null }, maxDate: { default: null }, disableWeekOfDays:{ default: () => { return []; } }, disableDates: { default: () => { return []; } }, value: { default: null } }, methods: { disableDays(day){ let month = day.getMonth(); let date = day.getDate(); let year = day.getFullYear(); let formedDay = `${year}-${month+1}-${date}`; let isDisableWeekOfDay = this.disableWeekOfDays.includes(moment(formedDay).day()); let isDisableDay = this.disableDates.some(disableDate => { return moment(formedDay).format("YY-MM-DD") === moment(disableDate).format("YY-MM-DD"); }); return [!isDisableDay && !isDisableWeekOfDay]; } }, mounted() { let self = this; $("#" + this.id).datepicker({ dateFormat: "yy-mm-dd", firstDay: 1, // ,월요일부터 시작 monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames: ['일', '월', '화', '수', '목', '금', '토'], dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], changeMonth: true, // 월선택 select box 표시 (기본은 false) changeYear: true, // 년선택 selectbox 표시 (기본은 false) showMonthAfterYear: true, // 다음년도 월 보이기 showOtherMonths: true, // 다른 월 달력에 보이기 selectOtherMonths: true, // 다른 월 달력에 보이는거 클릭 가능하게 하기 onSelect: function (date) { self.$emit('change', date); }, minDate: self.minDate, // n일 이후부터 선택(0이면 오늘부터, 1이면 1일 뒤부터) maxDate: self.maxDate, // n일 이후까지만 선택(0이면 오늘날짜까지만, 1이면 1일 뒤까지만) beforeShowDay : self.disableDays }); // 특정 요일 선택 막기 } } </script> <template> <input type="text" :id="id" :value="value"> </template> <script> export default { props: { id: { default : "date" }, minDate: { default: null }, maxDate: { default: null }, disableWeekOfDays:{ default: () => { return []; } }, disableDates: { default: () => { return []; } }, value: { default: null } }, methods: { disableDays(day){ let month = day.getMonth(); let date = day.getDate(); let year = day.getFullYear(); let formedDay = `${year}-${month+1}-${date}`; let isDisableWeekOfDay = this.disableWeekOfDays.includes(moment(formedDay).day()); let isDisableDay = this.disableDates.some(disableDate => { return moment(formedDay).format("YY-MM-DD") === moment(disableDate).format("YY-MM-DD"); }); return [!isDisableDay && !isDisableWeekOfDay]; } }, mounted() { let self = this; $("#" + this.id).datepicker({ dateFormat: "yy-mm-dd", firstDay: 1, // ,월요일부터 시작 monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames: ['일', '월', '화', '수', '목', '금', '토'], dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], changeMonth: true, // 월선택 select box 표시 (기본은 false) changeYear: true, // 년선택 selectbox 표시 (기본은 false) showMonthAfterYear: true, // 다음년도 월 보이기 showOtherMonths: true, // 다른 월 달력에 보이기 selectOtherMonths: true, // 다른 월 달력에 보이는거 클릭 가능하게 하기 onSelect: function (date) { self.$emit('change', date); }, minDate: self.minDate, // n일 이후부터 선택(0이면 오늘부터, 1이면 1일 뒤부터) maxDate: self.maxDate, // n일 이후까지만 선택(0이면 오늘날짜까지만, 1이면 1일 뒤까지만) beforeShowDay : self.disableDays }); // 특정 요일 선택 막기 } } </script>@ Create.vue
<template> <div class="m-input-text type01"> <input-date :value="form.delivery_started_at" @change="(data) => {form.delivery_started_at = data; create()}" /> <p class="m-input-error">{{form.errors.delivery_started_at}}</p> </div> </template> <script> import InputDate from "../../Components/Form/InputDate"; export default { components: {InputDate}, data() { return { form: this.$inertia.form({ "delivery_started_at" : this.$page.props.delivery_started_at, }), } }, methods: { create(){ this.form.get("/dietProducts/create", { preserveScroll: true, }); }, }, } } </script>LIST'프론트엔드 > Vue' 카테고리의 다른 글
img lazyload 만들기(이미지 지연로딩) (0) 2022.10.23 이미지 리사이즈 input (image input 리사이즈) (0) 2022.10.15 vue + 카카오지도 babel-polyfill 오류 대응법(카카오 지도 가져오기 안될 때) (0) 2022.09.11 여러 파일 | 이미지 input 만들기 (여러 이미지) (0) 2022.08.31 객체배열(Object Array)을 백엔드에 전달하는법 (0) 2022.05.28