使用Vue編寫一個日期選擇器

更新時間：2023年12月05日 16:31:16 作者：我愛學習yq

這篇文章主要為大家詳細介紹了如何使用Vue編寫一個簡單的日期選擇器,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下

在 Vue 中實現(xiàn)日期選擇器的方法有很多，下面提供一個簡單的實現(xiàn)方法。

首先，在需要使用日期選擇器的組件中引用 Vue 和 date-fns 庫，date-fns 庫是一個輕量級的 JavaScript 時間日期工具庫，可以方便地處理日期的格式化和計算。

import Vue from 'vue'
import { format } from 'date-fns'
 
export default {
  data () {
    return {
      selectedDate: null
    }
  },
  methods: {
    formatDate (date) {
      return format(date, 'yyyy-MM-dd')
    },
    selectDate (date) {
      this.selectedDate = date
    }
  }
}

在模板中使用第三方日期選擇器組件，這里使用了 Element UI 庫中的 DatePicker 組件。同時給 DatePicker 組件綁定 onChange 事件，將選中的日期保存到 data 中的 selectedDate 變量中。

<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      type="date"
      format="yyyy-MM-dd"
      @change="selectDate(selectedDate)">
    </el-date-picker>
  </div>
</template>

在 methods 中定義 formatDate 方法來格式化日期，并定義 selectDate 方法來處理選擇日期的操作。

import Vue from 'vue'
import { format } from 'date-fns'
 
export default {
  data () {
    return {
      selectedDate: null
    }
  },
  methods: {
    formatDate (date) {
      return format(date, 'yyyy-MM-dd')
    },
    selectDate (date) {
      this.selectedDate = date
    }
  }
}

這樣，一個簡單的 Vue 日期選擇器就完成了，可以根據(jù)實際需要進行擴展和修改。

方法補充

除了上文的方法，小編還為大家整理了其他vue實現(xiàn)日期選擇器的方法，下面是示例代碼，希望對大家有所幫助

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 日期選擇器</title>
  <style>
    .datepicker {
      position: relative;
      display: inline-block;
    }
    
    .datepicker input {
      width: 120px;
      padding: 4px;
      border: 1px solid #ccc;
      outline: none;
      cursor: pointer;
    }
    
    .datepicker-panel {
      position: absolute;
      top: 30px;
      left: 0;
      z-index: 1000;
      border: 1px solid #ccc;
      background-color: #fff;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    }
    
    .datepicker-content {
      padding: 10px;
    }
    
    .datepicker-header {
      margin-bottom: 10px;
      text-align: center;
    }
    
    .datepicker-header span {
      margin: 0 10px;
      cursor: pointer;
    }
    
    .datepicker-body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .datepicker-row {
      display: flex;
    }
    
    .datepicker-cell {
      width: calc(100% / 7);
      text-align: center;
      cursor: pointer;
    }
    
    .datepicker-cell.filled:hover {
      background-color: #ddd;
    }
  </style>
</head>
<body>
<div id="app">
  <date-picker v-model="date"></date-picker>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component('date-picker', {
    template: `
    <div class="datepicker">
      <input type="text" v-model="value" @click="showPicker">
      <div class="datepicker-panel" v-show="visible">
        <div class="datepicker-content">
          <div class="datepicker-header">
            <span class="datepicker-prev-year" @click="prevYear">&lt;&lt;</span>
            <span class="datepicker-prev-month" @click="prevMonth">&lt;</span>
            <span class="datepicker-current-month">{{ currentMonth }}</span>
            <span class="datepicker-next-month" @click="nextMonth">&gt;</span>
            <span class="datepicker-next-year" @click="nextYear">&gt;&gt;</span>
          </div>
          <div class="datepicker-body">
            <div class="datepicker-row" v-for="week in weeks">
              <span class="datepicker-cell"
                    v-for="day in week"
                    :class="{'filled': day !== ''}"
                    @click="selectDate(day)">
                {{ day }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        visible: false,
        year: 0,
        month: 0,
        day: 0
      }
    },
    computed: {
      currentMonth() {
        return `${this.year} 年 ${this.month} 月`
      },
      weeks() {
        return this.getWeeks(this.year, this.month)
      }
    },
    methods: {
      showPicker() {
        this.visible = true
        const date = new Date()
        this.year = date.getFullYear()
        this.month = date.getMonth() + 1
        this.day = date.getDate()
      },
      prevYear() {
        this.year--
      },
      nextYear() {
        this.year++
      },
      prevMonth() {
        if (this.month === 1) {
          this.year--
          this.month = 12
        } else {
          this.month--
        }
      },
      nextMonth() {
        if (this.month === 12) {
          this.year++
          this.month = 1
        } else {
          this.month++
        }
      },
      getWeeks(year, month) {
        const weeks = []
        const firstDay = new Date(year, month - 1, 1).getDay()
        const lastDay = new Date(year, month, 0).getDate()
        let week = []
        for (let i = 0; i < firstDay; i++) {
          week.push('')
        }
        for (let i = 1; i <= lastDay; i++) {
          week.push(i)
          if ((firstDay + i) % 7 === 0) {
            weeks.push(week)
            week = []
          }
        }
        if (week.length > 0) {
          for (let i = 0; i < 7 - week.length; i++) {
            week.push('')
          }
          weeks.push(week)
        }
        return weeks
      },
      selectDate(day) {
        if (day) {
          this.value = `${this.year}-${this.month}-${day}`
          this.visible = false
        }
      }
    }
  })

  new Vue({
    el: '#app',
    data: {
      date: ''
    }
  })
</script>
</body>
</html>

到此這篇關于使用Vue編寫一個日期選擇器的文章就介紹到這了,更多相關Vue日期選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: