html 原生网页使用ElementPlus 日期控件el-date-picker换成中文

项目:

原生的html,加jQuery使用不习惯,新html页面导入vue3,element plus做界面,现在需要把日历上英文切成中文。

最终效果:

导入能让element plus日历变成中文脚本: 

elementplus, vue3对应的js都可以通过创建一个vue3项目找到对应的脚本导入)

环境:

>1.node.js

> 2.npm

>3.vue cli :npm install -g @vue/cli

> 4.vue: npm install vue

## 创建工程vue3 + vite
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev 

///

安装element-plus

# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus

下载zh-cn.min.mjs:

 然后在node_modules对应目录的文件,把它拷贝到html项目即可

导入项目:zh-cn.min.mjs ,

 

html页面引用 

注意:

html需要引入模块,需要使用到ES6的特性,script 使用:  type=module

  <script  type="module">
    import zhCn from "../js/elementPlus/locale/zh-cn.mjs";

..</script>

<!DOCTYPE html>
<html>
<head>
<!--  ElementPlus 日期控件el-date-picker换成中文--><meta charset="UTF-8"><!-- import Vue before Element --><script src="../js/vue3.3.8/vue.global.js"></script><link rel="stylesheet" href="../js/elementPlus/index.css"><script src="../js/elementPlus/index.full.js"></script><title></title><script  type="module">import zhCn from "../js/elementPlus/locale/zh-cn.mjs";const {createApp, ref} = Vueconst app = createApp({setup() {const value1=ref('')const message = ref('Hello vue!')return {message,value1}}})app.use(ElementPlus, {locale:zhCn})app.mount('#app')</script>
</head>
<body>
<div id="app"><!-- 双大括号语法,可以直接拿到下面data中return 里面的数据 -->{{ message }}<el-button type="success">成功按钮</el-button><el-progress type="circle" :percentage="20"></el-progress><div class="block">
<!--    ElementPlus 日期控件el-date-picker换成中文--><span class="demonstration">中文日历:</span><el-date-pickerv-model="value1"type="date"placeholder="Pick a day"></el-date-picker></div><el-divider></el-divider>
</div>
</body>
<!--<script type="module" src="../js/elementPlus/locale/zh-cn.mjs">import zhCn from "../js/elementPlus/locale/zh-cn.mjs";
</script>--></html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git 上传小知识

git init git add . git commit -m "存储到本地仓库中去" &#xff08;将内容存储到本地master分支&#xff09; git push -u origin master “上传到远程master分支上” 如若要写login登录页&#xff0c;假设此时是在新分支上写的 git checkout -b login &…

【css技巧】文本超出两行显示省略号

ChatGPT4.0国内站点&#xff1a;海鲸AI 你可以使用CSS的-webkit-line-clamp属性来实现文本超出两行显示省略号的效果。示例代码如下&#xff1a; .text-container {display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;-webkit-line…

SpringCloud技术栈——技术词汇

目录 SpringCloud介绍Spring Cloud技术栈 Spring Cloud相关专业技术词汇基本的Spring Cloud项目模板 SpringCloud介绍 Spring Cloud是一个基于Spring Boot的微服务开发框架&#xff0c;它提供了一系列的开发工具和功能&#xff0c;帮助开发人员快速构建分布式应用程序。Spring…

1768. 交替合并字符串

1768. 交替合并字符串 给你两个字符串 word1 和 word2 。请你从 word1 开始&#xff0c;通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长&#xff0c;就将多出来的字母追加到合并后字符串的末尾。 返回 合并后的字符串 。 示例 1&#xff1a; 输入&#xff…

2023年12月 C/C++(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:数的输入和输出 输入一个整数和双精度浮点数,先将浮点数保留2位小数输出,然后输出整数。 时间限制:1000 内存限制:65536 输入 一行两个数,分别为整数N(不超过整型范围),双精度浮点数F,以一个空格分开。 输出 一行两个数,分…

CNCF之CoreDNS

目前我们学习云原生技术&#xff0c;就不得不去了解CNCF&#xff0c;即Cloud Native Computing Foundation&#xff0c;云原生计算基金会&#xff0c;它的宣言或理念是&#xff1a; The Cloud Native Computing Foundation (CNCF) hosts critical components of the global tec…

前端系列:ES6-ES12新语法

文章目录 ECMAScript系列&#xff1a;简介ECMAScript系列&#xff1a;ES6新特性let 关键字const 关键字变量的解构赋值模板字符串简化对象写法箭头函数参数默认值rest 参数spread扩展运算符Symbol迭代器生成器PromiseSetMapclass类数值扩展对象扩展模块化 ECMAScript系列&#…

doris批量创建分区

大数据Doris&#xff08;十五&#xff09;&#xff1a;Doris分区Partition-腾讯云开发者社区-腾讯云 CREATE TABLE IF NOT EXISTS example_db.example_range_tbl3 ( user_id LARGEINT NOT NULL COMMENT "用户id", date DATE NOT NULL COMMENT "数据灌入日期时间…

SpringBoot AOP

依赖引入 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>代码实现 以给公共字段注入值为例 公共字段与枚举类&#xff1a; private LocalDateTime createT…

首次落地零担快运!商用车自动驾驶跑出交付加速度

即将迈入2024年&#xff0c;还活着的自动驾驶玩家&#xff0c;身上有两个显著标签&#xff1a;选对了细分赛道、会玩。 10月以来&#xff0c;Cruise宣布在美国德州奥斯汀、休斯顿、亚利桑那州凤凰城和加州旧金山全面停止所有自动驾驶出租车队运营服务&#xff0c;通用汽车计划…

Spark与云存储的集成:S3、Azure Blob Storage

在现代数据处理中&#xff0c;云存储服务如Amazon S3和Azure Blob Storage已成为存储和管理数据的热门选择。与此同时&#xff0c;Apache Spark作为大数据处理框架也备受欢迎。本文将深入探讨如何在Spark中集成云存储服务&#xff0c;并演示如何与S3和Azure Blob Storage进行互…

Java 对象的内存布局

目录 一. 前言 二. Java 对象的内存布局 三. Java 对象结构 3.1. 对象头 3.1.1. Mark Word 3.1.2. 类型指针&#xff08;Class Metadata Pointer&#xff09; 3.1.3. 数组长度&#xff08;Length&#xff09; 3.2. 实例数据 3.3. 对齐填充&#xff08;Padding&#xf…

【Github-Action】GithubAction 环境下,如何将临时生成的文件推送至指定分支。

通过这篇文章你可以掌握如何将github action 环境下临时生成的文件推送至指定分支&#xff0c;并且可以打开利用github开放的api做各种强大或有趣的事情的视野和思路。 如果你对github-action感兴趣&#xff0c;还可以看这篇文章&#xff0c; 这篇文章教会你如何开发Github Act…

牛刀小试---二分查找(C语言)

题目&#xff1a;在给定的升序数组中查找指定的数字n&#xff0c;并输出其下标 代码举例&#xff1a; #include <stdio.h> int main() {int arr[] { 1,2,3,4,5,6,7,8,9,10 };//给定的升序数组int left 0;//定义左下标int right sizeof(arr) / sizeof(arr[0]) - 1;//…

Vue3使用Pinia获取全局状态变量

Pinia 是 Vue 3 的状态管理库&#xff0c;用于替代 Vuex。使用 Pinia&#xff0c;你可以轻松地在 Vue 3 应用中管理全局状态。下面是如何使用 Pinia 获取全局状态变量的说明和代码示例&#xff1a; 安装 Pinia 首先&#xff0c;确保你已经安装了 Vue 3 和 Pinia&#xff1a; …

Hive基础知识(七):Hive 数据类型全解

1. 基本数据类型 对于 Hive 的 String 类型相当于数据库的 varchar 类型&#xff0c;该类型是一个可变的字符串&#xff0c;不过它不能声明其中最多能存储多少个字符&#xff0c;理论上它可以存储2GB 的字符数。 2. 集合数据类型 Hive 有三种复杂数据类型 ARRAY、MAP 和 STRUCT…

08、Kafka ------ 消息存储相关的配置-->消息过期时间设置、查看主题下的消息存活时间等配置

目录 消息存储相关的配置★ 消息的存储介绍★ 消息过期时间及处理方式演示&#xff1a;log.cleanup.policy 属性配置 ★ 修改指定主题的消息保存时间演示&#xff1a;将 test2 主题下的消息的保存时间设为10个小时1、先查看test2主题下的配置2、然后设置消息的保存时间3、然后再…

Element Plus 离线手册 下载

Element Plus (Vue3) 离线手册&#xff0c;解压就能用&#xff0c;双击运行&#xff0c;浏览器访问 http://localhost:7011 获取方式&#xff1a;原文关注微信公众号&#xff0c;回复消息&#xff1a;7011ELP Element Plus 离线手册 下载Vue3 Element Plus 离线手册 离线文档 …

http首部

1. htttp 报文首部 报文结构为&#xff1a;首部 空行&#xff08;CRLF&#xff09;主体 在请求中 http报文首部由请求方法&#xff0c;URI&#xff0c;http版本&#xff0c;首部字段等构成 在响应中&#xff1a;状态码&#xff0c;http版本&#xff0c;首部字段3部分构成 2…

vue3 响应式api中特殊的api

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录一、shallowRef()二、triggerRef()三、customRef()四、shallowReactive()五、shallowReadonly()六、toRaw()七、markRaw()八、effectScope()九、getCurrentScope() 一、shallowRef() shallowRef()是一个新的响…