در این مقاله، من شما را در مورد نحوه استفاده از Datepicker در Vue.js راهنمایی می کنم.
پیش نیازها
- آشنایی با HTML، جاوا اسکریپت و بوت استرپ
- node.js نصب شد
پروژه Vue.js را ایجاد کنید
برای ایجاد یک برنامه Vue.js، از دستور زیر در ترمینال استفاده کنید.
بسته Vue Datepicker را نصب کنید
بسته Vue Datepicker را با استفاده از دستور npm زیر نصب کنید
یک جزء جدید ایجاد کنید
اکنون یک کامپوننت جدید در پوشه کامپوننت ایجاد کنید، روی پوشه کامپوننت کلیک راست کرده و فایلی به نام "DatePicker.vue" اضافه کنید.
کد زیر را به این کامپوننت اضافه کنید
<div>
<h3> How to Use Datepicker in Vue.js </h3>
<Datepicker v-model="customDate" ></Datepicker>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
export default {
name: 'app',
components: {
Datepicker
},
data: function() {
return {
customDate: new Date(2022, 9, 9)
}
}
}
</script>
اکنون کامپوننت App.vue را باز کنید. کد زیر را در کامپوننت App.vue اضافه کنید
<div id="app">
<Datepicker msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
import Datepicker from './components/DatePicker.vue'
export default {
name: 'App',
components: {
Datepicker
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
برنامه را اجرا کنید
اکنون برنامه را با استفاده از دستور npm زیر اجرا کنید
برای سفارشی کردن فرمت تاریخ datepicker، قالب را با فرمت تاریخ مورد نیاز ارسال کنید، کد زیر را در جزء Datepicker.vue اضافه کنید.
<div>
<h3> How to Use Datepicker in Vue.js </h3>
<Datepicker v-model="customDate" format="dd-MMMM-yyyy" ></Datepicker>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
export default {
name: 'app',
components: {
Datepicker
},
data: function() {
return {
customDate: new Date(2022, 9, 9)
}
}
}
</script>
اکنون برنامه را اجرا کنید.
خلاصه
در این مقاله نحوه استفاده از Datepicker در Vue.js را یاد گرفتیم.