如何在 Vue.js 应用程序中添加日期选择器(vue日期时间选择组件)

作者 : 慕源网 本文共1882个字,预计阅读时间需要5分钟 发布时间: 2022-01-13 共202人阅读

在本文中,我们将学习如何在 Vue.js 应用程序中添加日期选择器。 

前提条件

  • Vue.js 基础知识 
  • 在系统上安装Visual Studio Code IDE 。
  • HTML和CSS的基础知识

创建 Vue.js 项目

使用以下命令创建 Vue.js 项目。

vue create datepicker

在 Visual Studio Code 中打开新创建的项目并使用以下命令安装 vue-englishdatepicker。 

npm install vue-englishdatepicker

现在在 VS 代码中打开这个项目并安装bootstrap程序

npm install bootstrap-vue bootstrap --save

现在打开 main.js 文件并导入bootstrap。

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

现在右键单击组件文件夹并添加一个名为“Datepick.vue”的新组件。现在打开 Datepick.vue 组件并添加以下代码。

<template>
  <div>
    <div class="row" style="margin-bottom: 0px;">
      <div class="col-sm-12 btn btn-info"> Datepicker in Vue.js </div>
    </div>
    <div class=" row col-sm-12">
      <div class="col-sm-4"></div>
      <div class="col-sm-4" style="margin:10px">
        <vue-englishdatepicker placeholder="YYYY-MM-DD" />
      </div>
    </div>
  </div>
</template>
<script>
  import VueEnglishdatepicker from 'vue-englishdatepicker';
  export default {
    name: "Datepick",
    components: {
      VueEnglishdatepicker
    },
    data() {
      return {
        customDate: new Date()
      }
    }
  }
</script>
<style lang="scss" scoped></style>

现在打开 App.vue 组件并导入 dropdowndemo 组件。在 App.vue 组件中添加以下代码。

<template>
  <div id="app">
    <Datepick />
  </div>
</template>
<script>
  import Datepick from './components/Datepick.vue'
  export default {
    name: 'App',
    components: {
      Datepick
    }
  }
</script>
<style></style>

现在使用“npm run serve”命令运行应用程序并检查。

如何在 Vue.js 应用程序中添加日期选择器(vue日期时间选择组件)

我们可以从日期选择器中隐藏年份和月份选项。在组件中添加以下代码。

<template>
  <div>
    <div class="row" style="margin-bottom: 0px;">
      <div class="col-sm-12 btn btn-info"> Datepicker in Vue.js </div>
    </div>
    <div class=" row col-sm-12">
      <div class="col-sm-4"></div>
      <div class="col-sm-4" style="margin:10px">
        <vue-englishdatepicker placeholder="YYYY-MM-DD" format="DD-MM-YYYY" value="11-11-2021" :yearSelect="false" :monthSelect="false" />
      </div>
    </div>
  </div>
</template>
<script>
  import VueEnglishdatepicker from 'vue-englishdatepicker';
  export default {
    name: "Datepick",
    components: {
      VueEnglishdatepicker
    },
    data() {
      return {
        customDate: new Date()
      }
    }
  }
</script>
<style lang="scss" scoped></style>

现在使用“npm run serve”命令运行应用程序并检查。

如何在 Vue.js 应用程序中添加日期选择器(vue日期时间选择组件)

总结

在本文中,我们了解了如何在 Vue.js 应用程序中添加日期选择器,vue日期时间选择组件


慕源网 » 如何在 Vue.js 应用程序中添加日期选择器(vue日期时间选择组件)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录