Hướng dẫn sử dụng vue2-datepicker

Giới thiệu datepicker trong vue2:

Datepicker là một thành phần có giá trị để chọn ngày trong các ứng dụng web hoặc di động và nó là một lịch bật lên nhỏ gắn với trường nhập biểu mẫu. Khi người dùng nhấp vào nó, một cửa sổ bật lên tương tác xuất hiện với các tùy chọn ngày tháng cho phép người dùng chọn ngày.

Thiết lập mội trường phát triển vue:

$ npm install -g @vue/cli

Cài đặt vue2-datepicker:

$ npm install vue2-datepicker --save

Đăng ký thành phần datepicker trong Vuejs:

– Import datepicker vào trong components của vue.

<template>
  <div>
     
  </div>
</template>
 
<script>
import Datepicker from 'vuejs-datepicker';

export default {
  name: "App",
  data() {
    return {
  
    };
  }
};
</script>

– Sử dụng datepicker bằng cách.

<template>
  <div>
    <DatePicker />
  </div>
</template>

<script>
import DatePicker from './components/DatePicker.vue'

export default {
  name: 'App',
  components: {
    DatePicker
  }
}
</script>

Hướng dẫn cách config và format giờ trong datepicker:

– Ở đây chúng tôi đang sử dụng 2 loại định dạng datepicker.

<div class="wp-input-date-pecker">
    <div>
        <date-picker 
           ref="datePicker"
           v-model="formData.date"
           value-type="format"
           language="ja"
           class="date-pecker"
           :format="format"
           :default-value="new Date().setHours(12, 0, 0, 0)"
           :disabled-date="notBeforeToday"
           :disabled-time="notBeforeTodayTwelveOClock"
           @blur="handleDateBlur(formData.date)"
           @open="handleOpenDatePicker"
           @change="changeDate(formData.date)"
       />
   </div>
   <div>
       <date-picker
          v-model="formData.time"
          :minute-step="1"
          :format="formatTime"
          type="time"
          value-type="format"
          class="time-pecker"
          language="ja"
          @blur="handleTimeBlur(formData.time)"
          @open="handleOpenDatePickerTime(formData.time)"
          @change="changeTime(formData.time)"
       />
   </div>
</div>

– Đầu tiên chúng ta hiện thị giờ mặc định của datepicker bằng v-model của vue.

data() {
        let today = new Date();
        let hh = String(today.getHours()).padStart(2, "0");
        let min = String(today.getMinutes()).padStart(2, "0");
        let dd = String(today.getDate()).padStart(2, "0");
        let mm = String(today.getMonth() + 1).padStart(2, "0");
        let yyyy = today.getFullYear();
        today = yyyy + "/" + mm + "/" + dd + ' ' + hh + ':' + min;

        today = moment(today).tz('ASIA/TOKYO').locale('ja');
        let format = 'Y/MM/DD(ddd)';
        let formatMinDate = 'Y/MM/DD';
        let formatTime = 'HH:mm';

        let date = today.format(format);     // lấy giờ hiện tại.
        let time = today.format(formatTime); // lấy thời gian hiện tại.

        return {
            formData: {
                date: date,
                time: time,
            },
            format: 'YYYY/MM/DD(ddd)', //định dạng ngày cho datepicker.
            formatTime: "HH:mm",       //định dạng giờ cho datepicker.
        }
    },

– Sau khi hiện thị được ngày giờ hiện tại cho datepicker chúng ta tiến hành xử lý format giờ để người dùng có thể nhập vào theo định dạng yêu cầu:

Ở đây chúng tôi xử lý theo yêu cầu nhập vào với định dạng:

Ngày: YYYY MM DD

Giờ: HH mm

– Để xử lý được yêu cầu nhập vào ở trên thì chúng tôi sử dụng 3 sự kiện có sẵn mà datepicker cung cấp:

@blur: Sự kiện này thực hiện khi có thay đổi ở ô input nhập ngày tháng.

@open: Sự kiện này thực kiện khi người dùng click vào datepicker để chọn hay nhập ngày giờ.

@change: Sự kiện này thực hiện khi người dùng chọn bảng ngày tháng của datepicker hiển thị.

Dưới đây là các hàm xử lý :

handleOpenDatePicker() {
   this.formData.date = null;
   this.format = 'YYYYMMDD'; 
   //thay đổi định dang ban đầu từ YYYY/MM/DD về định dạng yêu cầu.
 },
handleOpenDatePickerTime() {
   this.formData.time = null;
   this.formatTime = 'HHmm'; 
   //thay đổi định dang ban đầu từ YYYY/MM/DD về định dạng yêu cầu.
},

Sau khi thay đổi định dạng thì chúng ta tiến hành xử lý ngày giờ nhận được từ input.

handleDateBlur(date) {
   this.formData.date = moment(date).tz('ASIA/TOKYO').locale('ja').format('Y/MM/DD(ddd)');
   // lấy ngày giờ từ input và format theo định dạng ban đầu.
   this.format = 'YYYY/MM/DD(ddd)';
},
handleTimeBlur(time) {
   let formattedTime = moment(time, 'HHmm').format('HH:mm');
   this.formData.time = formattedTime;
    // lấy ngày giờ từ input và format theo định dạng ban đầu.
   this.formatTime = 'HH:mm';  
},

Chúng tôi đã tích hợp thành công bộ chọn ngày trong vue js; đây là những gì chúng tôi đã làm cho đến nay. Chúng tôi đã tạo một ứng dụng vue mới, cài đặt và định cấu hình plugin bộ chọn ngày vue js trong ứng dụng vue.

Được gắn thẻ VueJs