日期选择控件完成

hookehuyr
Commit d01e12aaa9d04a42b7d64a1a34220744fd25d82d d01e12aa 1 parent 957b1403
Showing 4 changed files with 154 additions and 19 deletions
components.d.ts
src/components/calendarSelect.vue
src/pages/book/index.vue
src/pages/my/index.vue
--- a/components.d.ts
View file @d01e12a
+++ b/components.d.ts
View file @d01e12a
@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' {
     NavBar: typeof import('./src/components/navBar.vue')['default']
     NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
     NutCol: typeof import('@nutui/nutui-taro')['Col']
+    NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
     NutRow: typeof import('@nutui/nutui-taro')['Row']
     Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
     PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
--- a/src/components/calendarSelect.vue
View file @d01e12a
+++ b/src/components/calendarSelect.vue
View file @d01e12a
 <!--
  * @Date: 2023-12-14 10:04:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-14 18:25:51
+ * @LastEditTime: 2023-12-15 10:48:55
  * @FilePath: /meihuaApp/src/components/calendarSelect.vue
  * @Description: 文件描述
 -->
 <template>
   <view class="calendar-select-page" @tap="openCalendar">
     <nut-row gutter="10">
-      <nut-col span="10">
+      <nut-col span="9">
         <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
-        <view style="color: #6A4925; font-size: 0.95rem; font-weight: bold;">2023.12.07 星期四</view>
+        <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">{{ state.checkinDate}} {{ getDayOfWeek(state.checkinDate) }}</view>
       </nut-col>
-      <nut-col span="4">
+      <nut-col span="5">
         <view style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
-          共1晚
+          共{{ state.betweenDate }}晚
         </view>
       </nut-col>
-      <nut-col span="10">
+      <nut-col span="9">
         <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
-        <view style="color: #6A4925; font-size: 0.95rem; font-weight: bold;">2023.12.08 星期五</view>
+        <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">{{ state.checkoutDate }} {{ getDayOfWeek(state.checkoutDate) }}</view>
       </nut-col>
     </nut-row>
   </view>
+  <nut-config-provider :theme-vars="themeVars">
     <nut-calendar
       v-model:visible="state.isVisible"
-    :default-value="state.date"
+      :default-value="state.defaultDate"
       type="range"
-    :start-date="`2019-12-22`"
+      :start-date="state.startDate"
-    :end-date="`2021-01-08`"
+      :end-date="state.endDate"
+      start-text="入住"
+      end-text="退房"
       @close="closeSwitch('isVisible')"
       @choose="setChooseValue"
       @select="select"
     >
     </nut-calendar>
+  </nut-config-provider>
 </template>
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
+
+/**
+ * 获取今天和明天日期
+ */
+const getTodayAndTomorrow = () => {
+  var today = new Date(); // 获取当前日期
+
+  var todayYear = today.getFullYear();
+  var todayMonth = today.getMonth() + 1; // 月份从0开始，所以要加1
+  var todayDay = today.getDate();
+
+  var tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000); // 获取明天日期
+
+  var tomorrowYear = tomorrow.getFullYear();
+  var tomorrowMonth = tomorrow.getMonth() + 1; // 月份从0开始，所以要加1
+  var tomorrowDay = tomorrow.getDate();
+
+  // 跨年处理
+  if (tomorrowYear > todayYear) {
+    tomorrowMonth = '01';
+    tomorrowDay = '01';
+  }
+
+  // 跨月处理
+  if (tomorrowMonth > 12) {
+    tomorrowMonth = '01';
+    tomorrowYear = todayYear + 1;
+  }
+
+  // 格式化为两位数
+  todayMonth = todayMonth < 10 ? '0' + todayMonth : todayMonth;
+  todayDay = todayDay < 10 ? '0' + todayDay : todayDay;
+  tomorrowMonth = tomorrowMonth < 10 ? '0' + tomorrowMonth : tomorrowMonth;
+  tomorrowDay = tomorrowDay < 10 ? '0' + tomorrowDay : tomorrowDay;
+
+  return {
+    today: todayYear + '-' + todayMonth + '-' + todayDay,
+    tomorrow: tomorrowYear + '-' + tomorrowMonth + '-' + tomorrowDay
+  };
+}
+
+/**
+ * 获取日期星期几
+ * @param {String} dateString 日期字符串
+ */
+const getDayOfWeek = (dateString) => {
+  var dateParts = dateString.split('-');
+  var year = parseInt(dateParts[0]);
+  var month = parseInt(dateParts[1]) - 1; // 月份从 0 开始，所以要减去 1
+  var day = parseInt(dateParts[2]);
+
+  var date = new Date(year, month, day);
+  var dayOfWeek = date.getDay();
+
+  // 定义星期几的名称数组
+  var days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+  return days[dayOfWeek];
+}
+
+/**
+ * 计算日期间隔
+ * @param {*} startDate
+ * @param {*} endDate
+ */
+const getDayDifference = (startDate, endDate) => {
+  var startParts = startDate.split('-');
+  var startYear = parseInt(startParts[0]);
+  var startMonth = parseInt(startParts[1]) - 1; // 月份从 0 开始，所以要减去 1
+  var startDay = parseInt(startParts[2]);
+
+  var endParts = endDate.split('-');
+  var endYear = parseInt(endParts[0]);
+  var endMonth = parseInt(endParts[1]) - 1; // 月份从 0 开始，所以要减去 1
+  var endDay = parseInt(endParts[2]);
+
+  var startDateObj = new Date(startYear, startMonth, startDay);
+  var endDateObj = new Date(endYear, endMonth, endDay);
+
+  // 跨年处理
+  if (endYear > startYear) {
+    endDateObj.setFullYear(endYear);
+  }
+
+  // 跨月处理
+  if (endMonth > startMonth || (endMonth === startMonth && endDay > startDay)) {
+    endDateObj.setMonth(endMonth);
+  }
+
+  // 计算两个日期之间的时间差（毫秒数）
+  var timeDiff = endDateObj.getTime() - startDateObj.getTime();
+
+  // 将时间差转换为天数
+  var dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
+
+  return dayDiff;
+}
+
+// 调用方法获取今天和明天的日期
+const dates = getTodayAndTomorrow();
+
+const emit = defineEmits(['on-dates-change']);
 const state = reactive({
-  date: ['2019-12-23', '2019-12-26'],
+  startDate: dates.today,
+  endDate: '',
+  checkinDate: dates.today,
+  checkoutDate: dates.tomorrow,
+  defaultDate: [dates.today, dates.tomorrow],
+  betweenDate: getDayDifference(dates.today, dates.tomorrow),
   isVisible: false
 });
+const themeVars = reactive({
+  primaryColor: '#6A4925',
+  primaryColorEnd: '#6A4925'
+});
+
+onMounted(() => {
+})
+
 const openSwitch = (param) => {
   state[`${param}`] = true;
 };
 const closeSwitch = (param) => {
   state[`${param}`] = false;
 };
+
+/**
+ * 日历控件选择日期确认回调
+ * @param {*} param
+ */
+
 const setChooseValue = (param) => {
-  // state.date = [...[param[0][3], param[1][3]]];
+  state.checkinDate = param[0][3];
-  console.warn(param);
+  state.checkoutDate = param[1][3];
+  state.defaultDate = [state.checkinDate, state.checkoutDate];
+  state.betweenDate = getDayDifference(state.checkinDate, state.checkoutDate);
+  emit('on-dates-change', { startDate: state.checkinDate, endDate: state.checkoutDate });
 };
+
+
 const select = (param) => {
-  console.warn(param);
 };
 const show = ref(false);
@@ -78,6 +207,7 @@ const onConfirm = (event) => {
 .calendar-select-page {
   background-color: #F6ECE1;
   border-radius: 0.5rem;
-  padding: 1rem;
+  padding: 1rem 0;
+  padding-left: 0.5rem;
 }
 </style>
--- a/src/pages/book/index.vue
View file @d01e12a
+++ b/src/pages/book/index.vue
View file @d01e12a
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-14 18:23:40
+ * @LastEditTime: 2023-12-15 10:43:48
  * @FilePath: /meihuaApp/src/pages/book/index.vue
  * @Description: 文件描述
 -->
@@ -10,7 +10,7 @@
     <view class="cover-header"></view>
     <view class="book-content">
       <view class="book-calc">
-        <calendar-select></calendar-select>
+        <calendar-select @on-dates-change="onDatesChange"></calendar-select>
       </view>
       <view class="book-type">类型选择</view>
       <view class="book-list">scroll-view</view>
@@ -24,6 +24,10 @@ import Taro from '@tarojs/taro'
 import { ref } from "vue";
 import calendarSelect from '@/components/calendarSelect.vue'
 import navBar from '@/components/navBar.vue'
+
+const onDatesChange = ({ startDate, endDate }) => {
+  console.warn(startDate, endDate);
+}
 </script>
 <script>
--- a/src/pages/my/index.vue
View file @d01e12a
+++ b/src/pages/my/index.vue
View file @d01e12a
 <!--
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-14 18:24:03
+ * @LastEditTime: 2023-12-15 10:42:58
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 文件描述
 -->