Học cách định dạng ngày tháng từ Unix timestamp sử dụng Moment.js. Bài viết hướng dẫn chi tiết cách chuyển đổi giá trị số nguyên sang mili giây để Moment.js hiểu đúng và định dạng theo ý muốn của bạn.
Trong phát triển web, việc xử lý và định dạng ngày tháng là một tác vụ thường xuyên. Moment.js là một thư viện JavaScript mạnh mẽ và phổ biến giúp đơn giản hóa các thao tác này. Tuy nhiên, khi bạn có dữ liệu ngày tháng dưới dạng số nguyên, chẳng hạn như Unix timestamp, bạn cần thực hiện một bước chuyển đổi nhỏ để Moment.js có thể hiểu đúng.
---
Unix timestamp là một cách biểu diễn thời gian dưới dạng một số nguyên, đếm số giây đã trôi qua kể từ ngày 1 tháng 1 năm 1970 (UTC). Ví dụ, 1678886400 biểu thị một thời điểm cụ thể.
Mặt khác, Moment.js khi khởi tạo với một số nguyên, mặc định hiểu đó là số mili giây kể từ Epoch (thời điểm 1/1/1970). Điều này có nghĩa là nếu bạn truyền trực tiếp một Unix timestamp (đơn vị giây) vào Moment.js, nó sẽ hiểu sai giá trị và trả về một ngày tháng không chính xác.
---
Để khắc phục sự khác biệt về đơn vị này, bạn cần nhân giá trị số nguyên (Unix timestamp) của mình với 1000 trước khi truyền vào Moment.js. Thao tác này sẽ chuyển đổi giá trị từ giây sang mili giây, đúng định dạng mà Moment.js mong đợi.
moment(date_type_int * 1000).format("YYYY-MM-DDThh:mm");
Trong đoạn mã trên:
date_type_int: Là biến chứa giá trị ngày tháng dưới dạng số nguyên (Unix timestamp tính bằng giây).* 1000: Chuyển đổi giây thành mili giây.moment(...): Khởi tạo một đối tượng Moment từ giá trị mili giây đã chuyển đổi..format("YYYY-MM-DDThh:mm"): Định dạng đối tượng Moment thành chuỗi ngày tháng theo định dạng "Năm-Tháng-NgàyTháng:Phút".Giả sử bạn có một Unix timestamp 1678886400 (tương ứng với ngày 15 tháng 3 năm 2023, 00:00:00 UTC).
Nếu bạn dùng trực tiếp:
moment(1678886400).format("YYYY-MM-DDThh:mm");
// Kết quả SAI: "1970-01-20T09:30" (hoặc tương tự, tùy múi giờ)
Khi bạn nhân với 1000:
let myUnixTimestamp = 1678886400; // Ví dụ: 15/03/2023 00:00:00 UTC
let formattedDate = moment(myUnixTimestamp * 1000).format("YYYY-MM-DDThh:mm");
console.log(formattedDate);
// Kết quả ĐÚNG: "2023-03-15T07:00" (hoặc tương tự, tùy múi giờ cục bộ của bạn)
(Lưu ý: Giờ có thể khác nhau tùy thuộc vào múi giờ bạn đang chạy code, vì hh trong định dạng là giờ theo múi giờ cục bộ, và moment() không chỉ định múi giờ cụ thể sẽ dùng múi giờ cục bộ.)
---
Moment.js cung cấp rất nhiều tùy chọn định dạng để bạn có thể hiển thị ngày tháng theo ý muốn. Dưới đây là một số ví dụ phổ biến khác:
YYYY-MM-DD: 2023-03-15DD/MM/YYYY: 15/03/2023HH:mm:ss: 07:30:45 (giờ 24h)hh:mm A: 07:30 AM (giờ 12h với AM/PM)dddd, MMMM Do YYYY: Wednesday, March 15th 2023---
Sử dụng Moment.js để xử lý ngày tháng từ Unix timestamp là một kỹ thuật cơ bản nhưng quan trọng. Bằng cách nhân giá trị số nguyên với 1000 để chuyển đổi sang mili giây, bạn đảm bảo rằng Moment.js hiểu đúng dữ liệu của bạn, giúp việc định dạng và thao tác với ngày tháng trở nên chính xác và hiệu quả. Luôn kiểm tra định dạng đầu ra để đảm bảo nó phù hợp với yêu cầu hiển thị của ứng dụng của bạn.
Moment.js là một thư viện JavaScript mạnh mẽ để phân tích cú pháp, xác thực, thao tác và định dạng ngày tháng. Mặc dù Moment.js không còn được khuyến khích cho các dự án mới (thay thế bằng Luxon, date-fns, hoặc API tích hợp sẵn của trình duyệt), nhưng nó vẫn còn được sử dụng rộng rãi trong nhiều dự án Vue.js hiện có. Hướng dẫn này sẽ chỉ cho bạn cách tích hợp và sử dụng Moment.js trong ứng dụng Vue.js của mình một cách chi tiết.
Bạn có thể cài đặt Moment.js thông qua npm hoặc yarn:
npm install moment
# hoặc
yarn add moment
Sau khi cài đặt, bạn cần import Moment.js vào các component hoặc file JavaScript mà bạn muốn sử dụng nó.
<!-- MyComponent.vue -->
<script>
import moment from 'moment';
export default {
data() {
return {
currentDate: moment().format('YYYY-MM-DD HH:mm:ss')
};
},
mounted() {
console.log('Ngày hiện tại:', this.currentDate);
}
};
</script>
Để thuận tiện hơn, bạn có thể thiết lập Moment.js để nó có sẵn trong mọi component. Có hai cách để làm điều này:
main.js (hoặc main.ts nếu bạn dùng TypeScript)Bạn có thể thêm Moment.js vào thuộc tính prototype của Vue. Điều này cho phép bạn truy cập Moment.js thông qua this.$moment trong bất kỳ component nào.
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import moment from 'moment';
const app = createApp(App);
// Gán moment vào globalProperties (Vue 3)
app.config.globalProperties.$moment = moment;
// Nếu bạn dùng Vue 2:
// Vue.prototype.$moment = moment;
app.mount('#app');
Sau đó, trong bất kỳ component nào, bạn có thể sử dụng this.$moment:
<!-- MyComponent.vue -->
<template>
<div>
<p>Ngày hôm nay: {{ formattedDate }}</p>
<p>Ngày mai: {{ tomorrowDate }}</p>
</div>
</template>
<script>
export default {
computed: {
formattedDate() {
// Sử dụng this.$moment
return this.$moment().format('DD/MM/YYYY');
},
tomorrowDate() {
// Ví dụ về thao tác với ngày tháng
return this.$moment().add(1, 'days').format('DD-MM-YYYY');
}
}
};
</script>
Bạn có thể tạo một plugin Vue riêng để đóng gói Moment.js. Điều này giúp mã của bạn có tổ chức hơn.
Tạo một file mới, ví dụ: plugins/moment.js:
// plugins/moment.js
import moment from 'moment';
export default {
install(app, options) {
// Gán moment vào globalProperties (Vue 3)
app.config.globalProperties.$moment = moment;
// Hoặc nếu bạn muốn định nghĩa các hàm tiện ích khác
// app.config.globalProperties.$formatDate = (date, format) => moment(date).format(format);
}
};
Sau đó, import và sử dụng plugin này trong main.js:
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MomentPlugin from './plugins/moment'; // Đường dẫn đến plugin của bạn
const app = createApp(App);
app.use(MomentPlugin);
app.mount('#app');
Cách sử dụng trong component vẫn tương tự: this.$moment.
Bây giờ bạn đã tích hợp Moment.js, hãy xem xét các ví dụ phổ biến về cách sử dụng nó.
<template>
<div>
<p>Ngày hiện tại: {{ $moment().format('YYYY-MM-DD HH:mm:ss') }}</p>
<p>Ngày ngắn gọn: {{ $moment().format('DD/MM/YY') }}</p>
<p>Thời gian trong ngày: {{ $moment().format('h:mm:ss a') }}</p>
<p>Định dạng tiếng Việt: {{ $moment().locale('vi').format('dddd, [ngày] D [tháng] M [năm] YYYY') }}</p>
</div>
</template>
Moment.js có thể phân tích cú pháp từ nhiều định dạng khác nhau.
<template>
<div>
<p>Từ chuỗi ISO 8601: {{ $moment('2023-10-26T10:00:00Z').format('DD/MM/YYYY HH:mm') }}</p>
<p>Từ chuỗi tùy chỉnh: {{ $moment('26/10/2023', 'DD/MM/YYYY').format('MMMM Do, YYYY') }}</p>
</div>
</template>
Thêm/bớt ngày, tháng, năm, v.v.
<template>
<div>
<p>Hôm nay: {{ $moment().format('DD/MM/YYYY') }}</p>
<p>Ngày mai: {{ $moment().add(1, 'days').format('DD/MM/YYYY') }}</p>
<p>Tuần tới: {{ $moment().add(1, 'week').format('DD/MM/YYYY') }}</p>
<p>Tháng trước: {{ $moment().subtract(1, 'month').format('DD/MM/YYYY') }}</p>
<p>Cuối năm: {{ $moment().endOf('year').format('DD/MM/YYYY') }}</p>
</div>
</template>
<template>
<div>
<p>Ngày A: {{ dateA }}</p>
<p>Ngày B: {{ dateB }}</p>
<p v-if="$moment(dateA).isBefore(dateB)">Ngày A trước ngày B</p>
<p v-else-if="$moment(dateA).isAfter(dateB)">Ngày A sau ngày B</p>
<p v-else>Ngày A và ngày B là như nhau</p>
<p>Ngày A có cùng tháng với ngày B không? {{ $moment(dateA).isSame(dateB, 'month') ? 'Có' : 'Không' }}</p>
</div>
</template>
<script>
export default {
data() {
return {
dateA: '2023-10-20',
dateB: '2023-11-20'
};
}
};
</script>
Hiển thị thời gian thân thiện với người dùng (ví dụ: "2 giờ trước", "trong 3 ngày").
<template>
<div>
<p>Được tạo: {{ $moment('2023-10-25T10:30:00Z').fromNow() }}</p>
<p>Sẽ diễn ra: {{ $moment().add(5, 'hours').fromNow() }}</p>
</div>
</template>
Nếu bạn đang sử dụng Vue 2, bạn có thể tạo bộ lọc để định dạng ngày tháng một cách dễ dàng trong template.
// main.js (Vue 2)
import Vue from 'vue';
import moment from 'moment';
Vue.filter('formatDate', function(value, format = 'DD/MM/YYYY') {
if (value) {
return moment(String(value)).format(format);
}
});
new Vue({
// ...
}).$mount('#app');
Sau đó trong template:
<!-- MyComponent.vue (Vue 2) -->
<template>
<div>
<p>Ngày nhận: {{ myDate | formatDate }}</p>
<p>Ngày hết hạn: {{ expirationDate | formatDate('YYYY-MM-DD HH:mm') }}</p>
</div>
</template>
<script>
export default {
data() {
return {
myDate: '2023-01-15',
expirationDate: '2023-12-31T23:59:59'
};
}
};
</script>
Lưu ý cho Vue 3: Bộ lọc (filters) đã bị loại bỏ trong Vue 3. Thay vào đó, bạn nên sử dụng computed properties hoặc methods để xử lý định dạng ngày tháng.
// MyComponent.vue (Vue 3)
<template>
<div>
<p>Ngày nhận: {{ formattedMyDate }}</p>
<p>Ngày hết hạn: {{ formattedExpirationDate }}</p>
</div>
</template>
<script>
export default {
data() {
return {
myDate: '2023-01-15',
expirationDate: '2023-12-31T23:59:59'
};
},
computed: {
formattedMyDate() {
return this.$moment(this.myDate).format('DD/MM/YYYY');
},
formattedExpirationDate() {
return this.$moment(this.expirationDate).format('YYYY-MM-DD HH:mm');
}
},
methods: {
formatDate(date, format) {
return this.$moment(date).format(format);
}
}
};
</script>
Moment.js hỗ trợ đa ngôn ngữ. Bạn có thể tải các ngôn ngữ cần thiết và sử dụng chúng.
// main.js
import moment from 'moment';
import 'moment/locale/vi'; // Tải ngôn ngữ tiếng Việt
// import 'moment/locale/fr'; // Tải ngôn ngữ tiếng Pháp
moment.locale('vi'); // Đặt ngôn ngữ mặc định là tiếng Việt
Thay vì import toàn bộ moment/locale/vi, bạn có thể chỉ import các ngôn ngữ mà bạn thực sự cần.
// vue.config.js (cho Vue CLI)
// Nếu bạn sử dụng Vite, bạn cần cấu hình rollupOptions.
module.exports = {
chainWebpack: config => {
config.plugin('moment').use(require('webpack-moment-locales-plugin'), [{
localesToKeep: ['es-us', 'zh-cn', 'vi'] // Chỉ giữ lại các ngôn ngữ này
}]);
}
};
Sau khi cấu hình, bạn có thể sử dụng locale() để thay đổi ngôn ngữ:
<template>
<div>
<p>Ngày hiện tại (tiếng Anh): {{ $moment().format('LLLL') }}</p>
<p>Ngày hiện tại (tiếng Việt): {{ $moment().locale('vi').format('LLLL') }}</p>
</div>
</template>
Date tích hợp sẵn của JavaScript có thể đủ.Date object hiện tại.Moment.js vẫn là một công cụ hữu ích cho các dự án Vue.js hiện có cần quản lý ngày tháng. Bằng cách làm theo hướng dẫn này, bạn có thể tích hợp và sử dụng Moment.js một cách hiệu quả trong ứng dụng Vue của mình. Tuy nhiên, nếu bạn đang bắt đầu một dự án mới, hãy cân nhắc sử dụng các thư viện hiện đại hơn như Luxon hoặc date-fns để có hiệu suất tốt hơn và mã dễ bảo trì hơn.
![[SSH] - Configuring SSH on MacBook](/upload/img/news/ssh-la-gi-4.jpeg)
![[Magento] - How to create a button and retrieve selected data from the list displayed in the modal](/upload/img/news/magento-217.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/img/news/magento-2.png)
![[Macbook] - How to disable live captions](/upload/images/Screenshot%202023-10-23%20at%2020_34_57.png)
![[Magento] - Cách viết css bằng file scss và chèn css vào magento](/upload/img/news/magento-29.png)
![[Magento] - cách lập trình 1 theme trong magento](/upload/img/news/magento-211.png)
![[Magento] - cách tạo module trong magento](/upload/img/news/magento-212.png)
.jpg)
