相关文章推荐
豪情万千的羽毛球  ·  重大进展!武汉“超米字型”高铁网将画上关键一 ...·  7 月前    · 
活泼的伤疤  ·  ct-ng build failed / ...·  8 月前    · 
苦恼的冲锋衣  ·  金秀賢前女友「薄衣透出bra」畫面外流!「超 ...·  9 月前    · 
风流的火柴  ·  Silicon Labs Community·  10 月前    · 
严肃的电影票  ·  高端产品产能大幅提升 ...·  10 月前    · 
Code  ›  DateTimePicker 日期时间选择器,默认获取当前日期开发者社区
date datetimepicker
https://cloud.tencent.com/developer/article/1849247
狂野的橡皮擦
2 年前
作者头像
王小婷
0 篇文章

DateTimePicker 日期时间选择器,默认获取当前日期

前往专栏
腾讯云
备案 控制台
开发者社区
学习
实践
活动
专区
工具
TVP
文章/答案/技术大牛
写文章
社区首页 > 专栏 > 编程微刊 > 正文

DateTimePicker 日期时间选择器,默认获取当前日期

发布 于 2021-07-19 16:10:13
3.1K 0
举报

在vue里面,我们已经用到过单独的TimePicker 时间选择器和DatePicker 日期选择器了,现在需要用到一个可以同时选择年月日时分秒的插件,饿了么的文档里面就有现成可以使用的~~

在同一个选择器里选择日期和时间

DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

文档: https://element.eleme.cn/#/zh-CN/component/datetime-picker

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker v-model="value" type="datetime" placeholder="选择日期时间">
    </el-date-picker>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
      value: "",
  created() {
    this.Date();
  methods: {
    //获取当前年月日
    Date() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds(),
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date > 10 ? date.date : "0" + date.date;
      const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
      const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
      this.value =
        date.year +
        "-" +
        newmonth +
        "-" +
        newday +
        " " +
        date.hours +
        ":" +
        newminutes +
        ":" +
        newseconds;
 
推荐文章
豪情万千的羽毛球  ·  重大进展!武汉“超米字型”高铁网将画上关键一笔 - 武汉市人民政府门户网站
7 月前
活泼的伤疤  ·  ct-ng build failed / Newbie Corner / Arch Linux Forums
8 月前
苦恼的冲锋衣  ·  金秀賢前女友「薄衣透出bra」畫面外流!「超頻震動56秒」熱舞片瘋傳|四季線上4gTV
9 月前
风流的火柴  ·  Silicon Labs Community
10 月前
严肃的电影票  ·  高端产品产能大幅提升 方正科技2024年净利同比预增62.87%—103.59%
10 月前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号