Vue element-ui 日期选择器组件 日期时间格式化\日期控件上传到后台日期少一天解决办法_elementui日期控件

elementUI 日期选择控件少一天的问题解决方法

最近在用vue做项目的时候出现了一个奇葩的问题，选择日期是我选择的日期但是提交到后台的时候要比选择的少一天，网上查了一番好多人说不要使用v-model,改用change方法，后来发现是少加了一个属性：

value-format="yyyy-MM-dd"  //年月日 2022-11-02

value-format="yyyy-MM-dd HH:mm:ss"

value-format="timestamp" //值：时间戳

还有一种：202211

format="yyyyMM"

value-format="yyyyMM"

 type="month"

<!--不写默认为Date对象-->
<el-form-item label="完成日期">
        <el-date-picker
           v-model="endTime"
           type="date"
           value-format="yyyy-MM-dd"
           placeholder="选择日期">
        </el-date-picker>
</el-form-item>
 
<!--202211-->
<el-date-picker
       v-model="dataForm.yearMonth"
       format="yyyyMM"
       type="month"
       value-format="yyyyMM"
       @change="timeChange"
    >
</el-date-picker>

现在把时间段改成0点到24点

在上段代码中加了 :default-time="['00:00:00','23:59:59']"
相应代码变为：

<el-date-picker size="mini" v-model="rangeTime" type="datetimerange" :default-time="['00:00:00','23:59:59']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions">
</el-date-picker>

vue element-ui 日期选择器组件 日期时间格式化 - lijuntao - 博客园

我们要的是另一个格式 ， 如下图：

　　　　

　　怎么解决？

　　　　可以用一个插件 moment.js 解决

　　　　1：下载，安装

npm install moment@2.24.0

Moment日期处理类库基本用法，以及汉化 - 简书

　　　　2:引用，我这里是全局引用，并用原型链把方法挂到了vue上面，看下图：

　　　　　　

　　　　3：使用，看下图：

　　　　　　

moment(date).format("YYYY-MM-DD HH:mm:ss"); //2024-01-30 15:15:09 格式   主要是这个 moment( )里面放的格式化的对象，format( )要转化的样子

现在我需要 2024年1月31日 的格式

formatDate(date) {
      // return moment(date).format("YYYY-MM-DD HH:mm:ss");
   return moment(date).format("YYYY年MM月DD日");//2024年1月31日
},

然后有warn： /~/moment/src/lib/locale/locales.js Module not found: Can't resolve './locale' in node_modules\moment\src\lib\locale'

/~/moment/src/lib/locale/locales.js Module not found: Can't resolve './locale' in node_modules\moment\src\lib\locale' - 萌樱 - 博客园

webpack提示 [HMR] Hot Module Replacement is disabled  

使用moment时出现这个问题 原因是webpack.dev.config.dev.js 中

plugins: [
    //.....省略
    new webpack.ContextReplacementPlugin(
      // 需要被处理的文件目录位置
      /moment[\/\\]locale/,
      // 正则匹配需要被包括进来的文件
      /(en|zh-cn)\.js/
  ),
    new webpack.IgnorePlugin(/\.\/locale/, /moment/),
    new webpack.HotModuleReplacementPlugin(),
    //.....省略
]