Bài viết này hướng dẫn cách tích hợp thư viện chọn ngày LayDate.js vào một dự án Vue.js, cho phép người dùng dễ dàng chọn ngày và giờ thông qua giao diện người dùng trực quan.
Bước 1: Tải xuống và cấu hình LayDate.js
Trước tiên, bạn cần tải xuống gói thư viện LayDate từ trang chủ của nó. Sau khi tải về, giải nén và đặt thư mục laydate (chứa các file như laydate.js và các tài nguyên khác) vào thư mục public trong dự án Vue của bạn. Đối với các dự án Vue CLI cũ hơn, thư mục này có thể là static.
Cấu trúc thư mục sẽ trông giống như sau (ví dụ):
your-vue-project/
├── public/
│ └── laydate/
│ ├── laydate.js
│ └── themes/
│ └── ...
├── src/
│ └── assets/
│ └── components/
│ └── App.vue
│ └── main.js
└── index.html
└── ...
Bước 2: Nhúng LayDate.js vào index.html
Để LayDate có thể được sử dụng toàn cục trong ứng dụng của bạn, hãy nhúng file laydate.js vào file index.html. Đảm bảo rằng thẻ <script> được đặt trước khi Vue ứng dụng được khởi tạo.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Title và các thẻ meta khác -->
<title>Ứng dụng Vue với LayDate</title>
<!-- Đường dẫn tới LayDate.js, giả định đã đặt trong thư mục public/laydate -->
<script src="/laydate/laydate.js"></script>
</head>
<body>
<noscript>
<strong>Chúng tôi xin lỗi nhưng ứng dụng này cần JavaScript để hoạt động. Vui lòng bật JavaScript để tiếp tục.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Bước 3: Sử dụng LayDate trong thành phần Vue
Bây giờ, bạn có thể khởi tạo LayDate trong bất kỳ thành phần Vue nào mà bạn muốn sử dụng bộ chọn ngày. Điều quan trọng là khởi tạo LayDate trong lifecycle hook mounted() của Vue để đảm bảo rằng phần tử DOM đã sẵn sàng.
Ví dụ trong một thành phần có tên DateTimeSelector.vue:
<template>
<div class="date-picker-container">
<label for="chosenDateInput">Chọn ngày và giờ:</label>
<input type="text" id="chosenDateInput" v-model="selectedDateTime" readonly>
</div>
</template>
<script>
export default {
name: 'DateTimeSelector',
data() {
return {
selectedDateTime: '2023-01-01 12:00:00' // Giá trị mặc định
};
},
mounted() {
// Khởi tạo LayDate khi thành phần được gắn vào DOM
if (window.laydate) { // Kiểm tra xem laydate đã được tải chưa
window.laydate.render({
elem: '#chosenDateInput', // ID của input mà LayDate sẽ gắn vào
type: 'datetime', // Kiểu chọn: ngày và giờ
trigger: 'click', // Kích hoạt khi click vào input
done: (value, date, endDate) => {
// Callback được gọi khi người dùng chọn xong ngày/giờ
this.selectedDateTime = value; // Cập nhật dữ liệu Vue
console.log('Giá trị đã chọn:', value);
}
});
} else {
console.error('LayDate.js không được tìm thấy. Vui lòng kiểm tra đường dẫn trong index.html');
}
}
};
</script>
<style scoped>
.date-picker-container {
margin: 20px;
padding: 15px;
border: 1px solid #eee;
border-radius: 8px;
background-color: #f9f9f9;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
input[type="text"] {
width: 250px;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #555;
cursor: pointer;
background-color: #fff;
}
input[type="text"]:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
outline: none;
}
</style>
Kết quả
Khi ứng dụng Vue của bạn chạy và thành phần DateTimeSelector được hiển thị, khi bạn click vào trường input, một giao diện chọn ngày và giờ sẽ xuất hiện. Sau khi người dùng chọn một giá trị, giá trị đó sẽ tự động được cập nhật vào thuộc tính selectedDateTime trong dữ liệu của Vue, đảm bảo tính phản ứng của ứng dụng.
Việc sử dụng window.laydate đảm bảo rằng bạn đang truy cập đúng đối tượng toàn cục đã được nhúng thông qua thẻ script trong index.html.