基於Vue組件化的日期聯動選擇器功能的實現代碼

来源:https://www.cnblogs.com/qdgc/archive/2018/12/09/10091732.html
-Advertisement-
Play Games

我們的社區前端工程用的是element組件庫，後臺管理系統用的是iview，組件庫都很棒，但是日期、時間選擇器沒有那種“ 年份 - 月份 -天數 ” 聯動選擇的組件。雖然兩個組件庫給出的相關組件也很棒，但是有時候確實不是太好用，不太明白為什麼很多組件庫都拋棄了日期聯動選擇。因此考慮自己動手做一個。 ...


我們的社區前端工程用的是element組件庫，後臺管理系統用的是iview，組件庫都很棒，但是日期、時間選擇器沒有那種“ 年份 - 月份 -天數 ” 聯動選擇的組件。雖然兩個組件庫給出的相關組件也很棒，但是有時候確實不是太好用，不太明白為什麼很多組件庫都拋棄了日期聯動選擇。因此考慮自己動手做一個。

 

將時間戳轉換成日期格式

// timestamp 為時間戳
new Date(timestamp)
//獲取到時間標磚對象，如：Sun Sep 02 2018 00:00:00 GMT+0800 (中國標準時間)
/*
 獲取年： new Date(timestamp).getFullYear()
 獲取月： new Date(timestamp).getMonth() + 1
 獲取日： new Date(timestamp).getDate() 
 獲取星期幾： new Date(timestamp).getDay() 
*/

將日期格式(yyyy-mm-dd)轉換成時間戳

//三種形式
 new Date('2018-9-2').getTime()
 new Date('2018-9-2').valueOf()
 Date.parse(new Date('2018-9-2'))

IE下的相容問題

註意： 上述代碼在IE10下(至少包括IE10)是沒法或得到標準時間value的，因為 2018-9-2 並不是標準的日期格式(標準的是 2018-09-02)，而至少 chrome 內核為我們做了容錯處理(估計火狐也相容)。因此，必須得做嚴格的日期字元串整合操作，萬不可偷懶

基於Vue組件化的日期聯機選擇器

該日期選擇組件要達到的目的如下：

  • (1) 當前填入的日期不論完整或預設，都要向父組件傳值（預設傳''），因為父組件要根據獲取的日期值做相關處理（如限制提交等操作等）；
  • (2) 具體天數要做自適應，即大月31天、小月30天、2月平年28天、閏年29天；
  • (3) 如先選擇天數為31號(或30號)，再選擇月數，如當前選擇月數不含已選天數，則清空天數；
  • (4) 如父組件有時間戳傳入，則要將時間顯示出來供組件修改。
    實現代碼(使用的是基於Vue + element組件庫)
<template>
 <div class="date-pickers">
  <el-select 
  class="year select"
  v-model="currentDate.year"
  @change='judgeDay'
  placeholder="年">
   <el-option
   v-for="item in years"
   :key="item"
   :label="item"
   :value="item">
   </el-option>//歡迎加入前端全棧開發交流圈一起學習交流：864305860
  </el-select>//面向1-3年前端人員
  <el-select //幫助突破技術瓶頸，提升思維能力
  class="month select"
  v-model="currentDate.month"
  @change='judgeDay'
  placeholder="月">
   <el-option
   v-for="item in months"
   :key="item"
   :label="String(item).length==1?String('0'+item):String(item)"
   :value="item">
   </el-option>
  </el-select>
  <el-select 
  class="day select"
  :class="{'error':hasError}"
  v-model="currentDate.day"
  placeholder="日">
   <el-option
   v-for="item in days"
   :key="item"
   :label="String(item).length==1?String('0'+item):String(item)"
   :value="item">
   </el-option>
  </el-select>
 </div>
</template>
<script>
export default {
 props: {
 sourceDate: {
  type: [String, Number]
 }
 },
 name: "date-pickers",
 data() {
 return {
  currentDate: {
  year: "",
  month: "",
  day: ""
  },
  maxYear: new Date().getFullYear(),
  minYear: 1910,
  years: [],
  months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  normalMaxDays: 31,
  days: [],
  hasError: false
 };//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 },
 watch: {
 sourceDate() {
  if (this.sourceDate) {
  this.currentDate = this.timestampToTime(this.sourceDate);
  }
 },
 normalMaxDays() {
  this.getFullDays();
  if (this.currentDate.year && this.currentDate.day > this.normalMaxDays) {
  this.currentDate.day = "";
  }
 },
 currentDate: {
  handler(newValue, oldValue) {
  this.judgeDay();
  if (newValue.year && newValue.month && newValue.day) {
   this.hasError = false;
  } else {
   this.hasError = true;
  }
  this.emitDate();
  },
  deep: true
 }
 },
 created() {
 this.getFullYears();
 this.getFullDays();
 },//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 methods: {
 emitDate() {
  let timestamp; //暫預設傳給父組件時間戳形式
  if ( this.currentDate.year && this.currentDate.month && this.currentDate.day) {
   let month = this.currentDate.month < 10 ? ('0'+ this.currentDate.month):this.currentDate.month;
   let day = this.currentDate.day < 10 ? ('0'+ this.currentDate.day):this.currentDate.day;
   let dateStr = this.currentDate.year + "-" + month + "-" + day;
   timestamp = new Date(dateStr).getTime();
  } 
  else {
   timestamp = "";
  }
  this.$emit("dateSelected", timestamp);
 },
 timestampToTime(timestamp) {
  let dateObject = {};
  if (typeof timestamp == "number") {
  dateObject.year = new Date(timestamp).getFullYear();
  dateObject.month = new Date(timestamp).getMonth() + 1;
  dateObject.day = new Date(timestamp).getDate();
  return dateObject;
  }
 },
 getFullYears() {
  for (let i = this.minYear; i <= this.maxYear; i++) {
  this.years.push(i);
  }
 },
 getFullDays() {
  this.days = [];
  for (let i = 1; i <= this.normalMaxDays; i++) {
  this.days.push(i);
  }
 },
 judgeDay() {
  if ([4, 6, 9, 11].indexOf(this.currentDate.month) !== -1) {
  this.normalMaxDays = 30; //小月30天
  if (this.currentDate.day && this.currentDate.day == 31) {
   this.currentDate.day = "";
  }
  } else if (this.currentDate.month == 2) {
  if (this.currentDate.year) {
   if (
   (this.currentDate.year % 4 == 0 &&
    this.currentDate.year % 100 != 0) ||
   this.currentDate.year % 400 == 0
   ) {
   this.normalMaxDays = 29; //閏年2月29天
   } else {
   this.normalMaxDays = 28; //閏年平年28天
   }
  } 
  else {
   this.normalMaxDays = 28;//閏年平年28天
  }
  } 
  else {
  this.normalMaxDays = 31;//大月31天
  }
 }
 }
};
</script>
<style lang="less">
.date-pickers {
 .select {
 margin-right: 10px;
 width: 80px;
 text-align: center;
 }
 .year {
 width: 100px;
 }
 .error {
 .el-input__inner {
  border: 1px solid #f1403c;
  border-radius: 4px;
 }
 }
}
</style>

代碼解析
預設天數(normalMaxDays)為31天，最小年份1910，最大年份為當前年（因為我的業務場景是填寫生日，大家這些都可以自己調）併在created 鉤子中先初始化年份和天數。

監聽當前日期(currentDate)

核心是監聽每一次日期的改變，並修正normalMaxDays，這裡對currentDate進行深監聽，同時發送到父組件,監聽過程:

watch: {
 currentDate: {
  handler(newValue, oldValue) {
  this.judgeDay(); //更新當前天數
  this.emitDate(); //發送結果至父組件或其他地方
  },//歡迎加入前端全棧開發交流圈一起學習交流：864305860
  deep: true
 }//面向1-3年前端人員
}//幫助突破技術瓶頸，提升思維能力

judgeDay方法：

judgeDay() {
 if ([4, 6, 9, 11].indexOf(this.currentDate.month) !== -1) {
 this.normalMaxDays = 30; //小月30天
 if (this.currentDate.day && this.currentDate.day == 31) {
  this.currentDate.day = ""; 
 }
 } else if (this.currentDate.month == 2) {
 if (this.currentDate.year) {
  if (
  (this.currentDate.year % 4 == 0 &&
   this.currentDate.year % 100 != 0) ||
  this.currentDate.year % 400 == 0
  ) {
  this.normalMaxDays = 29; //閏年2月29天
  } else {
  this.normalMaxDays = 28; //平年2月28天
  }
 } else {
  this.normalMaxDays = 28; //平年2月28天
 }
 } else {
 this.normalMaxDays = 31; //大月31天
 }
}

最開始的時候我用的 includes判斷當前月是否是小月：

if([4, 6, 9, 11].includes(this.currentDate.month))

也是缺乏經驗，最後測出來includes 在IE10不支持，因此改用普通的indexOf()。

emitDate：
emitDate() {
 let timestamp; //暫預設傳給父組件時間戳形式
 if ( this.currentDate.year && this.currentDate.month && this.currentDate.day) {
  let month = this.currentDate.month < 10 ? ('0'+ this.currentDate.month):this.currentDate.month;
  let day = this.currentDate.day < 10 ? ('0'+ this.currentDate.day):this.currentDate.day;
  let dateStr = this.currentDate.year + "-" + month + "-" + day;
  timestamp = new Date(dateStr).getTime();
 } //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
 else {
  timestamp = "";
 }
 this.$emit("dateSelected", timestamp);//發送給父組件相關結果
},

這裡需要註意的，最開始並沒有做上述標準日期格式處理，因為chrome做了適當容錯，但是在IE10就不行了，所以最好要做這種處理。
normalMaxDays改變後必須重新獲取天數，並依情況清空當前選擇天數：

watch: {
 normalMaxDays() {
  this.getFullDays();
  if (this.currentDate.year && this.currentDate.day > this.normalMaxDays) {
  this.currentDate.day = "";
  }//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
 }//面向1-3年前端人員
}//幫助突破技術瓶頸，提升思維能力

結語

感謝您的觀看，如有不足之處，歡迎批評指正。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • android 記一次解決鍵盤遮擋問題
    文章鏈接： "https://mp.weixin.qq.com/s/1gkMtLu0BTXOUOj6isDjUw" 日常android開發過程中，會遇到編輯框輸入內容彈出軟鍵盤，往往會出現鍵盤遮擋內容，或者出現頁面整體上移的，或多或少在體驗上都不是很優雅，今天提供個方法是自行控制頁面上移距離，竟可能 ...
  • react源碼總覽(翻譯)
    用react也有段時間了, 是時候看看人家源碼了. 看源碼之前看到官方文檔有這麼篇文章介紹其代碼結構了, 為了看源碼能順利些, 遂決定將其翻譯來看看, 小弟英語也是半瓢水, 好多單詞得查詞典, 不當之處請批評. 直接從字面翻譯的, 後面看源碼後可能會在再修改下. ...
  • 如何發佈一個完整Node.js Module
    本文會透過以下幾個段落，讓各位一步一步學習如何寫一個自已的Node.js Module並且發佈到npm package上 Node.js Module 結構 我們先建立一個 NodeModuleDemo 的資料夾 ，接下來利用 npm init 進行初始化 (這裡不用特別設置，一路按 Enter 到 ...
  • JavaScript 執行環境及作用域
    執行環境是JavaScrpt 最重要的概念之一，執行環境定義了變數或函數有權訪問的其它數據，決定了它們各自的行為。每個執行環境都有一個與之關聯的變數對象，或者說一個執行環境就是一個對象。環境中定義的所有變數和函數都保存在這個對象中。雖然我們編寫的代碼無法訪問這個對象，但解析器在處理數據時會在後臺使用 ...
  • 百度前端學院參考答案：第二十五天到第二十七天 倒數開始 滴答滴 滴答滴（2）
    編碼 現在我們要做一個稍微複雜的東西，如下HTML，有一堆Select用於選擇日期和時間，在選擇後，實時在 id 為 result-wrapper 的 p 標簽中顯示所選時間和當前時間的差值。 使用上方的HTML結構（可以根據需要自行微調）為基礎編寫JavaScript代碼 當變更任何一個selec ...
  • React初識整理（三）--受控組件解決方法
    1. 受控組件：組件處於受控制狀態，不可更改輸入框內的值。 2. 什麼情況下會讓組件變成受控組件？ - 文本框設置了value屬性的時候 - 單選框或多選框設置了checked屬性的時候。 3. 如何解決？ - 使用state設置值 - 綁定onChange事件 - 在事件處理方法中獲取組件的值並更 ...
  • 個人對JS原型鏈的一些理解（prototype、__proto__）
    前言 在我一開始學習java web的時候，對JS就一直抱著一種只是簡單用用的心態，於是並沒有一步一步地去學習，當時認為用法與java類似，但是在實際web項目中使用時卻比較麻煩，便直接粗略瞭解後開始使用jQuery。但現如今，前端發展迅速，js語法方便也有了相當大的改善，並且伴隨著node.js的 ...
  • Vue組件參數名命名與組件屬性轉化示例
    本文主要介紹了VueJS 組件參數名命名與組件屬性轉化問題，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 HTML 特性是不區分大小寫的。所以，當使用的不是字元串模版，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case ( ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類