changes

components/datepicker/PickDay.vue

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div class="field is-grouped mb-4 border-bottom">
+      <div class="control pl-2">
+      <a class="mr-1" @click="previousYear()">
+        <SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
+      </a>
+      <a @click="previousMonth()" v-if="type==='days'">
+      <SvgIcon v-bind="{name: 'left1.svg', type: 'gray', size: 18}"></SvgIcon>
+      </a>
+      </div>
+      <div class="control is-expanded has-text-centered">
+        <span class="fsb-16 mr-3" @click="type='months'" v-if="type==='days'">{{`T${month}`}}</span>
+        <span class="fsb-16" @click="type='years'">{{ caption || year }}</span>
+      </div>
+      <div class="control pr-2">
+        <a class="mr-1" @click="nextMonth()" v-if="type==='days'">
+        <SvgIcon v-bind="{name: 'right.svg', type: 'gray', size: 18}"></SvgIcon>
+      </a>
+      <a @click="nextYear()">
+        <SvgIcon v-bind="{name: 'doubleright.svg', type: 'gray', size: 18}"></SvgIcon>
+      </a>
+      </div>
+    </div>
+    <div v-if="type==='days'">
+    <div class="columns is-mobile mx-0">
+      <div class="column px-2 py-1 has-text-grey-dark" v-for="(m,h) in dateOfWeek" :key="h">
+        {{ m.text }}
+      </div>
+    </div>
+    <div :class="`columns is-mobile mx-0 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
+      <div class="column px-3 py-1" v-for="(m,h) in v.dates" :key="h">
+        <a class="fs-14" @click="choose(m)">
+          <span class="has-background-primary has-text-white px-1 py-1" v-if="m.date===curdate">{{ m.dayPrint }}</span>
+          <span class="has-background-findata has-text-white px-1 py-1" v-else-if="m.date===today">{{ m.dayPrint }}</span>
+          <span class="has-text-grey" v-else-if="m.currentMonth!==m.mothCondition">{{ m.dayPrint }}</span>
+          <span v-else>{{m.dayPrint}}</span>    
+        </a>
+      </div>
+    </div>
+    <div class="border-bottom"></div>
+    <div class="mt-2">
+      <span class="ml-2 mr-2">Hôm nay: </span>
+      <span class="has-text-primary" @click="chooseToday()">{{ $dayjs(today).format('DD/MM/YYYY') }}</span>
+    </div>
+  </div>
+  <div v-else-if="type==='months'">
+    <PickMonth @month="selectMonth"></PickMonth>
+  </div>
+  <div v-else-if="type==='years'">
+    <PickYear v-bind="{year: year, month: month, action: action}" @year="selectYear" @caption="changeCaption"></PickYear>
+  </div>
+  </div>
+</template>
+<script setup>
+import PickMonth from '@/components/datepicker/PickMonth'
+import PickYear from '@/components/datepicker/PickYear'
+const { $id, $dayjs, $unique} = useNuxtApp()
+const emit = defineEmits(['date'])
+var props = defineProps({
+  date: String
+})
+    var   dates = [] 
+    var  dateOfWeek = [{id: 0, text: "CN"}, {id: 1, text: "T2"}, {id: 2, text: "T3"}, {id: 3, text: "T4"},
+      {id: 4, text: "T5",}, {id: 5, text: "T6"}, {id: 6, text: "T7"}]
+    var  weeks = ref([])
+    var  year=  undefined
+    var  month = undefined
+    var  type = 'days'
+    var  caption = undefined
+    var  action = undefined
+    var  curdate = undefined
+    var today = new Date()
+
+  function showDate() {
+      curdate = props.date? props.date.replaceAll('-', '/') : undefined
+      year = $dayjs(curdate || today).year()
+      month = $dayjs(curdate || today).month() + 1
+      getDates()
+    }
+  function chooseToday() {
+      emit('date', today.replaceAll('/', '-'))
+      year = $dayjs(today).year()
+      month = $dayjs(today).month() + 1
+      getDates()
+    }
+  function changeCaption(v) {
+      caption = v
+    }
+  function  selectMonth(v) {
+      month = v
+      getDates()
+      type = 'days'
+    }
+  function selectYear(v) {
+      year = v
+      getDates()
+      type = 'days'
+    }
+  function getDates() {
+      caption = undefined
+      dates = allDaysInMonth(year, month)
+      weeks.value = $unique(dates, ['week']).map(v=>{return {week: v.week}})
+      weeks.value.map(v=>{
+        v.dates = dates.filter(x=>x.week===v.week)
+      })
+    }
+    function nextMonth() {
+      month = month + 1
+      if(month>12) {
+        month = 1
+        year += 1
+      }
+      getDates()
+    }
+    function previousMonth() {
+      month = month - 1
+      if(month===0) {
+        month = 12
+        year -= 1
+      }
+      getDates()
+    }
+    function nextYear() {
+      if(type==='years') return action = {name: 'next', id: $id()}
+      year += 1
+      getDates()
+    }
+    function previousYear() {
+      if(type==='years') return action = {name: 'previous', id: $id()}
+      year -= 1
+      getDates()
+    }
+    function choose(m) {
+      emit('date', m.date.replaceAll('/', '-'))
+    }
+    function createDate(v, x, y) {
+      return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
+    }
+    function allDaysInMonth(year, month) {
+      
+      let days = Array.from({length: $dayjs(createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
+      let arr = []
+      days.map(v=>{
+        for (let i = 0; i < 7; i++) { 
+          let thedate = $dayjs(createDate(year, month, v)).weekday(i)
+          let date = $dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
+          let dayPrint = $dayjs(new Date(thedate.$d)).format("DD")
+          let mothCondition = $dayjs(date).month() +1
+          let currentMonth = month
+          let found = arr.find(x=>x.date===date)
+          if(!found) {
+            let dayOfWeek = $dayjs(date).day() 
+            let week = $dayjs(date).week() 
+            let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
+            arr.push(ele)
+          }
+        }
+      })
+      return arr
+    }
+    // display
+    showDate()
+    // change date
+    watch(() => props.date, (newVal, oldVal) => {
+      showDate()
+    })
+    
+</script>