• ant-design-vue 日期区间选择设置默认时间


    组件:

    <template>
      <a-range-picker
        :showTime="showTime"
        @change="onChange"
        @ok="onOk"
      ></a-range-picker>
    </template>
    
    <script>
    import moment from "moment";
    export default {
      data() {
        return {
          showTime: {
            format: "HH:mm:ss",
            defaultValue: [
              moment("00:00:00", "HH:mm:ss"),
              moment("23:59:59", "HH:mm:ss"),
            ],
          },
        };
      },
      methods: {
        onChange(value, dateString) {
          console.log("Selected Time: ", value);
          console.log("Formatted Selected Time: ", dateString);
        },
        onOk(value) {
          console.log("onOk: ", value);
          console.log(value.map((item) => item.format("YYYY-MM-DD HH:mm:ss")));
        },
      },
    };
    </script>
    
    <style scoped>
    </style>

    国际化:

    <template>
      <div id="app">
        <a-config-provider :locale="zhCN">
          <router-view/>
        </a-config-provider>
      </div>
    </template>
    
    <script>
    import zhCN from 'ant-design-vue/es/locale-provider/zh_CN.js'
    export default {
      data() {
        return {
          zhCN
        }
      },
    }
    
    </script>
    
    

    main.js引入:

    import Vue from 'vue'
    import App from './App.vue'
    import Antd from 'ant-design-vue'
    import router from './router'
    import store from './store'
    import 'ant-design-vue/dist/antd.css'
    import './font/iconfont.css'
    import './index.css'
    
    Vue.use(Antd)
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    

    参考链接:

    https://www.antdv.com/components/date-picker-cn/

    http://momentjs.cn/

  • 相关阅读:
    nuxt.js 学习与记录
    图片上传预览 接收
    k8s之deployment
    k8s之service
    k8s的一些命令
    ansible 学习
    k8s之ConfigMap && secret
    k8s 之Job/CronJob
    k8s之PV & PVC
    配置ssh免密登录
  • 原文地址:https://www.cnblogs.com/xutongbao/p/14876287.html
Copyright © 2020-2023  润新知