(el-Date-Picker)操作(不使用 ts)：Element-plus 中 DatePicker 组件的使用及输出想要日期格式需求的解决过程

news2024/9/24 21:19:39

Ⅰ、Element-plus 提供的DatePicker日期选择器组件与想要目标情况的对比：

1、Element-plus 提供DatePicker组件情况：

其一、Element-ui 自提供的DatePicker代码情况为(示例的代码)：

在这里插入图片描述



// Element-plus 提供的组件代码:
<template>
  <el-radio-group v-model="size" aria-label="size control">
    <el-radio-button value="large">large</el-radio-button>
    <el-radio-button value="default">default</el-radio-button>
    <el-radio-button value="small">small</el-radio-button>
  </el-radio-group>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">Default</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a day"
        :size="size"
      />
    </div>
    <div class="block">
      <span class="demonstration">Picker with quick options</span>
      <el-date-picker
        v-model="value2"
        type="date"
        placeholder="Pick a day"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

代码地址：https://element-plus.org/zh-CN/component/date-picker.html

其二、页面的显示情况为：
在这里插入图片描述

其三、页面想要的显示情况为：

在这里插入图片描述

Ⅱ、在项目中使用 DatePicker 组件遇到的问题：

1、遇到的问题：



使用该 DatePicker 组件遇到的问题：
其一、主要是处理后台返回的数据值，使其能在日期属性中正常展示;
其二、摸索该 DatePicker 组件，使其输出数据类型为：2024-07-02;

2、无默认值，默认输出类型为：Tue Jul 09 2024 00:00:00 GMT+0800 (中国标准时间)(输出日期对象)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-date-picker 值后下发的数据类型;



//第一步：
const value1 = ref('')


//第二步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
    <el-date-picker v-model="value1" type="date" format="YYYY/MM/DD" placeholder="选择日期"/>
</el-form-item>


//第三步：提交的操作;
dateTimeObj.date = value1.value
其二、截图为：

//不给日期属性设置初始值时，输出的数据类型为：Tue Jul 09 2024 00:00:00 GMT+0800 (中国标准时间)(输出日期对象)
在这里插入图片描述

3、无默认值，默认输出类型为：2024-07-10(使用格式)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-date-picker 值后下发的数据类型;



//第一步：
const value1 = ref('')


//第二步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
    <el-date-picker v-model="value1" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="选择日期"/>
</el-form-item>


//第三步：提交的操作;
dateTimeObj.date = value1.value
其二、截图为：

//不给日期属性设置初始值时，输出的数据类型为：2024-07-10(使用格式)
在这里插入图片描述

4、无默认值，默认输出类型为：2024/07/10(使用格式)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-date-picker 值后下发的数据类型;



//第一步：
const value1 = ref('')


//第二步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
    <el-date-picker v-model="value1" type="date" format="YYYY/MM/DD" value-format="YYYY/MM/DD" placeholder="选择日期"/>
</el-form-item>


//第三步：提交的操作;
dateTimeObj.date = value1.value
其二、截图为：

//不给日期属性设置初始值时，输出的数据类型为：2024/07/10(使用格式)

在这里插入图片描述

5、无默认值，默认输出类型为：1720540800000(时间戳)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-date-picker 值后下发的数据类型;



//第一步：
const value1 = ref('')


//第二步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
    <el-date-picker v-model="value1" type="date" format="YYYY/MM/DD" value-format="x" placeholder="选择日期"/>
</el-form-item>


//第三步：提交的操作;
dateTimeObj.date = value1.value
其二、截图为：

//不给日期属性设置初始值时，输出的数据类型为：1720540800000(时间戳，应该是从1970到现在的时间)
在这里插入图片描述

6、有初始值类型为：2024-08-07，可设置输出类型为：2024-08-07(使用格式)

其一、代码为：


//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.dateValue = resp.data.sys_clock_time[0].date


//第三步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
    <el-date-picker v-model="dateConfigurationForm.dateValue" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期"/>
</el-form-item>


//第四步：提交的操作;
dateTimeObj.date = dateConfigurationForm.value.dateValue
其二、截图为：

//给日期属性设置初始值时，初始值为：2024-08-07(后台返回数据格式)

在这里插入图片描述

// 有时候后台返回的初始值可能有其它的情况，如：2024/08/07 或 2024080700000000;

在这里插入图片描述

其三、页面展示与数据下发类型的说明：

A、不设置 format 属性的情况下：
页面展示的结果为：2024-08-07(即：默认展示的就是 2024-08-07 格式);
在这里插入图片描述

而 value-format 属性不设置，下发的数据结果为：Wed Aug 07 2024 00:00:00 GMT+0800 (中国标准时间);
注意：此时是手动切换过日期的值，否则下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="YYYY-MM-DD"，下发的数据结果为：2024-08-07;
注意：此时是手动切换过日期的值，否则下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="YYYY/MM/DD"，下发的数据结果为：2024/08/07;
注意：此时是手动切换过日期的值，否则下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="x"，下发的数据结果为：1722960000000;
注意：此时是手动切换过日期的值，否则下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

B、 format 属性设置为 format="YYYY-MM-DD" 的情况下：
页面展示的结果为：2024-08-07(即：以 format 设置的数据格式为主);

在这里插入图片描述

而 value-format 属性不设置，下发的数据结果为：Wed Aug 07 2024 00:00:00 GMT+0800 (中国标准时间);
注意：此时是手动切换过日期的值，否则下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="YYYY-MM-DD"，下发的数据结果为：2024-08-07;
注意：此时无论手动切换日期的值还是不切换，下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="YYYY/MM/DD"，下发的数据结果为：2024/08/07;
注意：此时是手动切换过日期的值，否则下发的数据依旧是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="x"，下发的数据结果为：1722960000000;
注意：此时是手动切换过日期的值，否则下发的数据依旧是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

C、format 属性设置为 format="YYYY/MM/DD" 的情况下：
页面展示的结果为：2024/08/07(即：以 format 设置的数据格式为主);

在这里插入图片描述

而 value-format 属性不设置，下发的数据结果为：Wed Aug 07 2024 00:00:00 GMT+0800 (中国标准时间);
注意：此时是手动切换过日期的值，否则下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="YYYY-MM-DD"，下发的数据结果为：2024-08-07;
注意：此时无论手动切换日期的值还是不切换，下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="YYYY/MM/DD"，下发的数据结果为：2024/08/07;
注意：此时是手动切换过日期的值，否则下发的数据依旧是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="x"，下发的数据结果为：1722960000000;
注意：此时是手动切换过日期的值，否则下发的数据依旧是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);
在这里插入图片描述

D、format 属性设置为 format="x" 的情况下：
页面展示的结果为：1722960000000(即：以 format 设置的数据格式为主);

在这里插入图片描述

而 value-format 属性不设置，下发的数据结果为：Wed Aug 07 2024 00:00:00 GMT+0800 (中国标准时间);
注意：此时是手动切换过日期的值，否则下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="YYYY-MM-DD"，下发的数据结果为：2024-08-07;
注意：此时无论手动切换日期的值还是不切换，下发的数据都是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="YYYY/MM/DD"，下发的数据结果为：2024/08/07;
注意：此时是手动切换过日期的值，否则下发的数据依旧是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="x"，下发的数据结果为：1722960000000;
注意：此时是手动切换过日期的值，否则下发的数据依旧是 2024-08-07 或 2024/08/07 或 2024080700000000(即：以返回值的数据格式为主);

在这里插入图片描述

7、有初始值类型为：2024/08/07，可设置输出类型为：2024/08/07(使用格式)

其一、代码为：


//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.dateValue = resp.data.sys_clock_time[0].date


//第三步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
    <el-date-picker v-model="dateConfigurationForm.dateValue" type="date" format="YYYY/MM/DD" value-format="YYYY/MM/DD" placeholder="选择日期"/>
</el-form-item>


//第四步：提交的操作;
dateTimeObj.date = dateConfigurationForm.value.dateValue
其二、截图为：

//给日期属性设置初始值时，初始值为：2024/08/07(后台返回数据格式)

在这里插入图片描述

其三、页面展示与数据下发类型的说明：

// format 与 value-format 的配合总共有 16 种;
// 此时只展示拿什么类型的数据就配置什么类型的数据：

format 属性设置为 format="2024/08/07" 且 value-format 属性设置为 value-format="YYYY/MM/DD" 的情况下，下发的数据结果为：2024/08/07;
注意：此时无论手动切换日期的值还是不切换，下发的数据都是 2024/08/07(即：以返回值的数据格式为主);

在这里插入图片描述

8、有初始值类型为：1722960000000，可设置输出类型为：1722960000000(使用格式)

其一、代码为：


//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.dateValue = resp.data.sys_clock_time[0].date


//第三步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
	    <el-date-picker v-model="dateConfigurationForm.dateValue" type="date" format="x" value-format="x" placeholder="选择日期"/>
</el-form-item>


//第四步：提交的操作;
dateTimeObj.date = dateConfigurationForm.value.dateValue
其二、截图为：

//给日期属性设置初始值时，初始值为：2024080700000000(后台返回数据格式)

在这里插入图片描述

其三、页面展示与数据下发类型的说明：

// format 与 value-format 的配合总共有 16 种;
// 此时只展示拿什么类型的数据就配置什么类型的数据：

format 属性设置为 format="x" 且 value-format 属性设置为 value-format="x" 的情况下，下发的数据结果为：2024080700000000;
注意：此时无论手动切换日期的值还是不切换，下发的数据都是 1722960000000(即：以返回值的数据格式为主);

在这里插入图片描述

Ⅲ、整体代码的面貌：

其一、整体代码为：



<script setup>

import axios from 'axios';
import { ref,inject,onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const dateConfigurationFormRef = ref(null)
const dateConfigurationForm = ref({})
const value1 = ref('')
const rootapi = inject("rootapi");


const checkZone = (rule, value,callback) => {
  if(/^[\da-zA-Z!@#$%&?_-]{3,31}$/.test(value)) {
    callback()
  } else {
    callback(new Error('请填写3至31个字母、数字或 -,_,!,@,#,$,%,&,?'))
  }
}

const rules = ref({
  dateValue: [
    { required: true, message: '日期不能为空', trigger: 'blur' },
  ],
  hourValue: [
    { required: true, message: '时间不能为空', trigger: 'blur' },
  ],
  zone: [
    { required: true, message: '时区名称不能为空', trigger: 'blur' },
    { validator: checkZone, trigger: 'blur' }
  ],
  flags: [
    { required: true, message: '时区偏移类型不能为空', trigger: 'change' },
  ],
  offsetHourValue: [
    { required: true, message: '时区偏移量不能为空', trigger: 'blur' },
  ]
})

const options = [
  {
    value: 1,
    label: 'add',
  },
  {
    value: 2,
    label: 'minus',
  }
]


const date_configuration_submit = async() => {
  if (!dateConfigurationFormRef) return;
  dateConfigurationFormRef.value.validate( async(valid) => {
    if (valid) {
      let dateTimeUrl, dateTimeObj={}, zoneTimeUrl, zoneTimeObj={}

      dateTimeUrl = "/api/system/clock_time/set"
      dateTimeObj.date = dateConfigurationForm.value.dateValue
      // dateTimeObj.date = value1.value
      dateTimeObj.time = dateConfigurationForm.value.hourValue

      zoneTimeUrl = "/api/system/clock_time_zone/set"
      zoneTimeObj.zone = dateConfigurationForm.value.zone
      zoneTimeObj.flags = dateConfigurationForm.value.flags
      zoneTimeObj.time = dateConfigurationForm.value.offsetHourValue

      try {
    
        // (后面需要放开的二次认证)
        // let result = await rootapi.post_crit_auth(url, {dummy: "dummy"}, count);
        // if (!result) return;

        // await axios.post(url,new URLSearchParams(ruleForm.value)).then(response => {
        //   console.log(response,111);
        // }).catch(error => {
        //   console.log(error,222);
        // })
        const dateTimeRequest = await axios.post(dateTimeUrl, new URLSearchParams(dateTimeObj))
        const zoneTimeRequest = await axios.post(zoneTimeUrl, new URLSearchParams(zoneTimeObj))
        axios.all([dateTimeRequest, zoneTimeRequest]).then(axios.spread(function(dateTimeRes, zoneTimeRes) { 
          if(dateTimeRes.status === 200 && zoneTimeRes.status === 200) {
            ElMessage({ message: '提交成功！',type: 'success',})
            // 更新时间配置表;
            date_configuration_refresh()
          } else {
            ElMessage.error('提交失败！'+ res.message)
          }
        }))
      } catch(err) {
        if (err.response) {
          let resp = err.response;
          rootapi.show_dialog(
              "unexpected error for " + "POST" + " " + dateTimeUrl + ":", 
              resp.data, true);
        }
        else {
            rootapi.show_dialog(
                "unexpected frontend error:", 
                err.message, true);
        }
      }
    } else {
      return false;
    }
  });
}

onMounted(() => {
  date_configuration_refresh()
  let obj1 = 123
  let obj2 = '456'
  console.log(obj1.toString());
  console.log(typeof(obj1.toString()),123456789)
  console.log(obj2.toString());
  console.log(typeof(obj2.toString()),987654321)
})

// 刷新及获取数据操作
const date_configuration_refresh = () => {
  get_date_time()
  get_zone_time()
}

// 获取页面日期和时间的信息展示：
const get_date_time = async() => {
  // console.log("TODO: GET /api/system/clock_time/get");
  // const resp = await axios.get("/api/system/clock_time/get");
  const resp = {
    "data": {
        "sys_clock_time": [
            {
                "date": "2024-08-07",
                // "date": "2024/08/07",
                // "date": "2024080700000000",
                // "date": "10000",
                "time": "19:54:28"
            }
        ]
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-type": "application/json",
        "transfer-encoding": "chunked"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "/api/system/clock_time/get"
    },
    "request": {}
  }
  console.log(resp,1111111);
  console.log(resp.data,222222);

  console.log(resp.data.sys_clock_time,33333333);
  if(resp?.status === 200 && resp?.data?.sys_clock_time) {
    dateConfigurationForm.value.dateValue = resp.data.sys_clock_time[0].date
    dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time
  }
}

// 获取页面时区的信息展示：
const get_zone_time = async() => {
  // console.log("TODO: GET /api/system/clock_time_zone/get");
  // const resp = await axios.get("/api/system/clock_time_zone/get");
  const resp ={
    "data": {
        "sys_clock_time_zone": [
            {
                "zone": "Beijing",
                "flags": 1,
                "time": "08:00:00"
            }
        ]
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-type": "application/json",
        "transfer-encoding": "chunked"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "/api/system/clock_time_zone/get"
    },
    "request": {}
  }

  console.log(resp,1111111);
  console.log(resp.data,222222);
  
  console.log(resp.data.sys_clock_time_zone,33333333);
  if(resp?.status === 200 && resp?.data?.sys_clock_time_zone) {
    dateConfigurationForm.value.zone = resp.data.sys_clock_time_zone[0].zone
    dateConfigurationForm.value.flags = resp.data.sys_clock_time_zone[0].flags
    dateConfigurationForm.value.offsetHourValue = resp.data.sys_clock_time_zone[0].time     
  }
}

</script>

<template>
  <div class="date_configuration_project">
    <div class="date_project">
      <div class="project_title">时间配置</div>
      <el-form 
        ref="dateConfigurationFormRef" 
        :model="dateConfigurationForm" 
        :rules="rules"
        label-width="180px" 
        class="demo-ruleForm"
      >
        <el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
          <el-date-picker v-model="dateConfigurationForm.dateValue" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期"/>
          <!-- value-format="YYYY/MM/DD" -->
          <!-- <el-date-picker v-model="value1" type="date" format="YYYY/MM/DD" value-format="x" placeholder="选择日期"/> -->
        </el-form-item>
        <el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
          <el-time-picker v-model="dateConfigurationForm.hourValue"  value-format="HH:mm:ss"  placeholder="选择时间" />
        </el-form-item>
        <el-form-item label="时区名称:" prop="zone">
          <el-input v-model="dateConfigurationForm.zone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时区偏移类型:" prop="flags">
          <el-select v-model="dateConfigurationForm.flags" class="m-2" placeholder="选择" >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="时区偏移量[HH:MM:SS]:" prop="offsetHourValue" >
          <el-time-picker v-model="dateConfigurationForm.offsetHourValue" value-format="HH:mm:ss"  placeholder="选择偏移量" />
        </el-form-item>
        <!-- 
          报错原因：format="HH:mm:ss"
         -->
        <!-- <el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
          <el-time-picker v-model="dateConfigurationForm.hourValue" value-format="HH:mm:ss" placeholder="Arbitrary time"/>
        </el-form-item> -->
      </el-form>
      <div class="project_footer">
        <el-button type="primary" @click="date_configuration_submit"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>提交</el-button>
        <el-button @click="date_configuration_refresh"><el-icon :size="20" style="margin-right: 5px;"><Refresh /></el-icon>刷新</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.date_configuration_project {
  margin: 30px auto;
  width: 470px;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .date_project {
    margin: 20px;
    .project_title {
      text-align: center;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .project_footer {
      text-align: center;
      margin: 10px 0 20px;
    }
  }

  // 日期
  .demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
  }
  .demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
  }
  .demo-date-picker .block:last-child {
    border-right: none;
  }
  .demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }

  // 时间
  .example-basic .el-date-editor {
    margin: 8px;
  }
}
</style>

其二、整体页面的展示为：

在这里插入图片描述

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1993208.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【多线程-从零开始-捌】代码案例2—阻塞队列

【多线程-从零开始-捌】代码案例2—阻塞队列

什么是阻塞队列 阻塞队里是在普通的队列&#xff08;先进先出队列&#xff09;基础上&#xff0c;做出了扩充 线程安全 标准库中原有的队列 Queue 和其子类&#xff0c;默认都是线程不安全的 具有阻塞特性 如果队列为空&#xff0c;进行出队列操作&#xff0c;此时就会出现阻…
阅读更多...
Java代码生成器EasyCode

Java代码生成器EasyCode

Java代码生成器EasyCode 一、安装插件二、连接数据库后右键Generator生成代码 一、安装插件 在 IntelliJ IDEA 的插件市场中搜索 EasyCode&#xff0c;然后安装该插件 二、连接数据库后右键Generator生成代码 勇敢面对挑战&#xff0c;成功从不会远离坚持者。坚持不懈的努力…
阅读更多...
八股之Java集合

八股之Java集合

Java 集合&#xff0c;也叫作容器&#xff0c;主要是由两大接口派生而来&#xff1a;一个是 Collection接口&#xff0c;主要用于存放单一元素&#xff1b;另一个是 Map 接口&#xff0c;主要用于存放键值对。对于Collection 接口&#xff0c;下面又有三个主要的子接口&#xf…
阅读更多...
MongoDB学习笔记（三）

MongoDB学习笔记（三）

使用Python操作MongoDB: 使用管理员用户&#xff1a;
阅读更多...
Python —— 基础

Python —— 基础

目录 变量与引用 数据类型 赋值、深浅拷贝 控制流结构 逻辑操作符 is 与 dir() 关键字&#xff08;Python 3.11 &#xff09; https://www.cnblogs.com/qianfanwaer/p/14783204.html 变量与引用 变量是原来存储数据的一个标识符&#xff0c;可被看作是内存的一个位置&…
阅读更多...
【学习笔记】Day 7

【学习笔记】Day 7

一、进度概述 1、DL-FWI基础入门培训笔记 2、inversionnet_train 试运行——未成功 二、详情 1、InversionNet: 深度学习实现的反演 InversionNet构建了一个具有编码器-解码器结构的卷积神经网络&#xff0c;以模拟地震数据与地下速度结构的对应关系。 &#xff08;一…
阅读更多...
Python，我来啦！！！融合多个框架语言。。

Python，我来啦！！！融合多个框架语言。。

基于上次发布CSDN的自己一些想法 上次&#xff0c;从一个道友手中购买了一份轮子代码&#xff0c;主要用到的技术就是pythonmysql或sqliteflask框架&#xff0c;这里我做了二次开发。 新的改变 这里&#xff0c;我对该代码进行了一些功能拓展与语法支持&#xff0c;除了原有…
阅读更多...
【OpenCV C++20 学习笔记】仿射变换-warpAffine, getRotationMatrix2D

【OpenCV C++20 学习笔记】仿射变换-warpAffine, getRotationMatrix2D

仿射变换 原理概述得到仿射变换的方法 APIgetAffineTransform()函数warpAffine()函数getRotationMatrix2D()函数 示例 原理 概述 仿射变换是矩阵乘法&#xff08;线性变换&#xff09;和向量加法的结合。它包含了&#xff1a; 旋转&#xff08;线性变换&#xff09;转换&…
阅读更多...
【递归 + 记忆化搜索优化】力扣494. 目标和

【递归 + 记忆化搜索优化】力扣494. 目标和

给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 ‘’ 或 ‘-’ &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2 之前添加 ‘’ &#xff0c;在 1 之前添加 ‘-…
阅读更多...
立体连接模式下的传播与沟通：AI智能名片小程序的创新应用与深度剖析

立体连接模式下的传播与沟通：AI智能名片小程序的创新应用与深度剖析

摘要&#xff1a;在数字化浪潮的推动下&#xff0c;信息传播与沟通方式正经历着前所未有的变革。立体连接模式&#xff0c;作为这一变革的重要产物&#xff0c;通过整合物理空间、虚拟网络空间与社群心理空间的三维联动&#xff0c;实现了信息的深度传播与高效互动。AI智能名片…
阅读更多...
Java新手指南：从菜鸟到编程大师的趣味之路-类和对象

Java新手指南：从菜鸟到编程大师的趣味之路-类和对象

这里是Themberfue 本章主要介绍的是Java最重要的面向对象&#xff08;OOP&#xff09;的基础 面向对象 Java是一门纯面向对象的语言&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。用…
阅读更多...
MySQL --- 复合查询

MySQL --- 复合查询

目录 一、多表查询 二、自连接 三、子查询 1、单行子查询 2、多行子查询 3、多列子查询 4、在from后面使用子查询 四、合并查询 1、union 2、union all 五、内连接 六、外连接 1、左外连接 2、右外连接 一、多表查询 我们需要的数据往往会来自不同的表&#xf…
阅读更多...
redis面试（十）锁释放

redis面试（十）锁释放

自动释放 首先锁的释放分为两种&#xff0c;一种是自动释放&#xff0c;加入说加锁的线程宕机了不在了&#xff0c;我们之前说过这个。 那这个线程中的对redis这个锁不断刷新过期时间的看门狗逻辑就没有了&#xff0c;所以这个锁最多等待30s的时间就会自动过期删除&#xff0c…
阅读更多...
文件I/O第一天作业 2024.8.8

文件I/O第一天作业 2024.8.8

使用系统I/O实现Linux的cat命令 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <fcntl.h> #include <errno.h>int main(int argc, const char *argv[]) {if(argc < 2){printf("请输…
阅读更多...
【笔试题面试题】IO类2 知识点汇总（笔试面试题）

【笔试题面试题】IO类2 知识点汇总（笔试面试题）

书接上文&#xff0c;配上前文一起实用更加&#xff0c;持续更新&#xff0c;督促自己学习 目录 1、详细描述一下什么是IO以及标准IO和文件IO的区别&#xff08;补充&#xff09; 2、什么是死锁&#xff0c;如何避免死锁&#xff08;补充&#xff09; 3、为什么引入同步互斥…
阅读更多...
NVIDIA Triton系列09-为服务器添加模型

NVIDIA Triton系列09-为服务器添加模型

NVIDIA Triton系列09-为服务器添加模型 B站&#xff1a;肆十二-的个人空间-肆十二-个人主页-哔哩哔哩视频 (bilibili.com) 博客&#xff1a;肆十二-CSDN博客 问答&#xff1a;(10 封私信 / 72 条消息) 肆十二 - 知乎 (zhihu.com) 前面已经用 https://github.com/triton-inferen…
阅读更多...
基于python的百度迁徙迁入、迁出数据分析（七）

基于python的百度迁徙迁入、迁出数据分析（七）

参考&#xff1a;【Python】基于Python的百度迁徙2——迁徙规模指数&#xff08;附代码&#xff09;-CSDN博客 记录于2024年8月&#xff0c;这篇是获取百度迁徙指数&#xff0c;之前我们都在讨论不同城市的迁徙比例关系&#xff0c;这篇我们来获取百度迁徙指数这个数据&#x…
阅读更多...
大学新生入门编程的最佳路径：嵌入式领域的深入探索

大学新生入门编程的最佳路径：嵌入式领域的深入探索

对于大学新生来说&#xff0c;编程已成为一项必不可少的技能。面对众多编程语言和学习资源&#xff0c;新生们常常感到迷茫。如何选择适合自己的编程语言&#xff1f;如何制定有效的学习计划&#xff1f;如何避免常见的学习陷阱&#xff1f;本文将为你提供嵌入式领域的编程入门…
阅读更多...
测试工具之JMeter

测试工具之JMeter

JMeter Apache JMeter应用程序是开源软件，是一个100%纯Java应用程序，旨在负载测试功能行为和衡量性能。它最初是为测试Web应用程序而设计的，但后来扩展到其他测试功能。 JMeter是一个免费、开源、跨平台的性能测试工具，于20世纪90年代后期面世。这是一个成熟、健全且具有…
阅读更多...
开源一套金融大模型插件(ChatGPT)

开源一套金融大模型插件(ChatGPT)

shares vscode 插件A 股量化交易系统自研金融大模型&#xff0c;复利Chat 源码地址&#xff1a; https://github.com/xxjwxc/shares
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023