vue3 ts+ element plus中 el-date-picker 动态绑定type

      <el-date-picker
        class="float-right"
        :type="dateType"
        v-model="chartQueryParams.queryDate"
        placeholder="选择日期"
        @change="getChartData"
        :value-format="dateFormat"
        :format="dateFormat"
      />


之前在ts中
 
const dateType=ref('date'),一直报错,

错误:不能将类型“string”分配给类型“EpPropMergeType<StringConstructor, ““ | “date“ | “year“ | “month“, never> |



经多方排查该为如下方式:
type DatePickerType =
  | "date"
  | "year"
  | "years"
  | "month"
  | "dates"
  | "week"
  | "datetime"
  | "datetimerange"
  | "daterange"
  | "monthrange";
const dateType=ref<DatePickerType>('date')

Vue 3使用Element Plus的`el-date-picker`组件时,日期格式的转换通常发生在数据绑定或事件处理程序,比如从组件获取用户选择的日期并将其格式化为特定的字符串格式,或者将外部传递的字符串转换为日期对象以便于处理。 `el-date-picker`默认的日期格式是ISO 8601标准(YYYY-MM-DD),但你可能需要根据需求转换为其他格式,如"yyyy年MM月dd日"、"MM/dd/yyyy"等。这可以通过JavaScript的内置方法`Date`对象的方法来实现。 例如,假设你想要将用户选择的日期格式化为"yyyy年MM月dd日": ```javascript <template> <el-date-picker v-model="selectedDate" :format="dateFormat"></el-date-picker> </template> <script> export default { data() { return { selectedDate: '', dateFormat: 'yyyy年MM月dd日', }; }, created() { // 如果需要,可以在这个生命周期钩子里处理初始值或转换格式 this.selectedDate = this.convertToFormat(new Date()); // 假设convertToFormat是一个自定义方法 }, methods: { convertToFormat(date) { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}年${month}月${day}日`; }, }, }; </script> ``` 如果你想在用户输入后立即转换格式,可以在`v-model`的更新事件调用转换方法: ```javascript <template> <el-date-picker v-model="inputDate" @input="formatInputDate"></el-date-picker> </template> <script> export default { data() { return { inputDate: '', }; }, methods: { formatInputDate(value) { this.inputDate = this.convertToFormat(value); }, convertToFormat(date) { ... // 与上面的convertToFormat相同 }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值