Quasar 提供了一套有用的函数,可以轻松地在大多数用例中操作 JS 日期,而无需以高额的额外成本集成像 Momentjs 这样的专用库。
大多数 Quasar 日期函数将 Unix 时间戳或表示日期的字符串作为参数,该字符串需要由本机 JS Date 构造函数 解析。一些示例:1497159857411
,Sun Jun 11 2017 08:44:42 GMT+0300
,2017-06-16
。
返回值都是 JS 日期。
熟悉 JS 本机 Date 类,它非常强大,请记住您不需要像 Momentjs 这样的解决方案,它会在您的捆绑包中添加数百 KB 的压缩代码。
提示
Quasar 日期工具包含树形摇动,除了 UMD 版本。
您会注意到所有示例都从 Quasar 导入 date
对象。但是,如果您只需要其中的一个方法,那么您可以使用 ES6 解构来帮助树形摇动只嵌入该方法,而不是所有 date
。
使用 addToDate()
的示例
// we import all of `date`
import { date } from 'quasar'
// destructuring to keep only what is needed
const { addToDate } = date
const newDate = addToDate(new Date(), { days: 7, months: 1 })
提示
有关 UMD 构建的使用,请参阅 此处。
显示格式
它接受一个标记字符串并将它们替换为相应的日期值。
import { date } from 'quasar'
const timeStamp = Date.now()
const formattedString = date.formatDate(timeStamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
对于 i18n,您可以使用第三个参数。
const formattedString = date.formatDate(timeStamp, 'MMMM - dddd', {
days: ['Duminica', 'Luni', /* and all the rest of days - remember starting with Sunday */],
daysShort: ['Dum', 'Lun', /* and all the rest of days - remember starting with Sunday */],
months: ['Ianuarie', 'Februarie', /* and all the rest of months */],
monthsShort: ['Ian', 'Feb', /* and all the rest of months */]
})
可用的格式标记
单位 | 可用的格式 |
---|---|
年 |
|
月 |
|
季度 |
|
月中的天数 |
|
年的天数 |
|
星期几 |
|
星期几 (ISO) |
|
年的星期数 |
|
小时 |
|
分钟 |
|
秒 |
|
小数秒 |
|
时区偏移量 |
|
上午/下午 |
|
Unix 时间戳 |
|
如果您想在掩码中插入字符串(包括 [
和 ]
字符),请确保使用 [
和 ]
将它们括起来,否则这些字符可能会被解释为格式标记。
操作日期
创建
尝试使用本机 JS Date 类创建日期,如下所示
const date = new Date();
以下方法只是一个包装器,可以在您只需要当前时间但具有不同年份、月份或秒等情况时帮助您。
import { date } from 'quasar'
const newDate = date.buildDate({ year: 2010, date: 5, hours: 15, milliseconds: 123 })
您可以传递第二个参数(一个布尔值)来设置 UTC 时间(true)而不是本地时间。
提供的对象文字可以包含以下键(所有键都是可选的)
键 | 描述 |
---|---|
毫秒 | 用于日期/时间的毫秒部分 |
秒 | 用于日期/时间的秒部分 |
分钟 | 用于日期/时间的分钟部分 |
小时 | 用于日期/时间的时部分 |
day(s) / date | 用于日期/时间的日部分 |
月 | 用于日期/时间的月部分 |
年 | 用于日期/时间的年部分 |
验证
要检查日期字符串是否有效,请使用
import { date } from 'quasar'
const dateString = 'Wed, 09 Aug 1995 00:00:00 GMT'
if (date.isValid(dateString)) {
// Do something with date string
}
警告
isValid
只验证日期格式,不验证日期的逻辑有效性。
底层实现基于本机 Date.parse(...)
API,其缺点将通过我们的 API 传递。
它不会检查日期对于月份是否有效(例如 2 月 31 日),或者日期对于年份是否有效(例如 非闰年的 2 月 29 日),并且在这些情况下将针对 Firefox 返回与基于 Chromium 的浏览器(Chrome、Edge 等)不同的值。
加/减
要将某个持续时间加到/减去日期,请使用
import { date } from 'quasar'
let newDate = new Date(2017, 2, 7)
newDate = date.addToDate(newDate, { days: 7, months: 1 })
// `newDate` is now 2017-3-14 00:00:00
newDate = date.subtractFromDate(newDate, { hours: 24, milliseconds: 10000 })
// `newDate` is now 2017-3-12 23:59:50
提供的对象文字可以包含以下键(所有键都是可选的)
键 | 描述 |
---|---|
毫秒 | 用于以毫秒为单位的持续时间 |
秒 | 用于以秒为单位的持续时间 |
分钟 | 用于以分钟为单位的持续时间 |
小时 | 用于以小时为单位的持续时间 |
day(s) / date | 用于以天为单位的持续时间 |
月 | 用于以月为单位的持续时间 |
年 | 用于以年为单位的持续时间 |
设置日期/时间
要设置日期/时间的特定单位
import { date } from 'quasar'
const newDate = new Date(2017, 10, 2)
const adjustedDate = date.adjustDate(newDate, { year: 2010, month: 2 })
// `adjustedDate` is 2010-2-2
您可以传递第三个参数(一个布尔值)来设置 UTC 时间 (true
) 而不是本地时间。
提供的对象文字可以包含以下键(所有键都是可选的)
键 | 描述 |
---|---|
毫秒 | 用于日期/时间的毫秒部分 |
秒 | 用于日期/时间的秒部分 |
分钟 | 用于日期/时间的分钟部分 |
小时 | 用于日期/时间的时部分 |
day(s) / date | 用于日期/时间的日部分 |
月 | 用于日期/时间的月部分 |
年 | 用于日期/时间的年部分 |
查询日期
最小值/最大值
要获取日期集(例如数组)的最小/最大日期,请使用
import { date } from 'quasar'
let min = date.getMinDate(new Date(2017, 6, 24), new Date(2017, 5, 20), new Date(2017, 6, 26))
// `min` is 2017-5-20
let max = date.getMaxDate(new Date(2017, 6, 24), new Date(2017, 5, 20), new Date(2017, 6, 26))
// `max` is 2017-6-26
// Or use an array:
const dates = [ new Date(2017, 6, 24), new Date(2017, 5, 20), new Date(2017, 6, 26) ]
let min = date.getMinDate(...dates) // `min` is 2017-5-20
let max = date.getMaxDate(...dates) // `max` is 2017-6-26
请注意,返回值是时间戳。
console.log(max) // 1497906000000
console.log(new Date(max)) // Wed Jul 26 2017 00:00:00 GMT+0300 (Eastern European Summer Time)
时间范围
要检查日期是否在给定的日期/时间范围内,请使用
import { date } from 'quasar'
const dateTarget = new Date()
const dateFrom = new Date()
const dateTo = new Date()
// **strictly** (i.e. exclusive range)
if (date.isBetweenDates(dateTarget, dateFrom, dateTo)) {
// Do something with dateTarget
}
// including which margin you want
if (date.isBetweenDates(dateTarget, dateFrom, dateTo, { inclusiveFrom: true, inclusiveTo: true })) {
// Do something with dateTarget
}
// if you only care about comparing dates (year/month/day, regardless of time)
// then you could tip isBetweenDates() about it so it can perform best:
if (date.isBetweenDates(dateTarget, dateFrom, dateTo, { onlyDate: true })) {
// Do something with dateTarget
}
要将日期规范化为给定的日期/时间范围,请使用
import { date } from 'quasar'
const newDate = new Date()
const dateMin = new Date(2010, 2, 23)
const dateMax = new Date(2012, 4, 12)
const dateNormalized = date.getDateBetween(newDate, dateMin, dateMax)
// Returns `newDate` if it's between 2010-2-23 and 2012-4-12; `dateMin` if it's lower; `dateMax` if it's greater
相等性
要检查两个日期的单位是否**相等**,请使用
import { date } from 'quasar'
const date1 = new Date(2017, 2, 5)
const date2 = new Date(2017, 3, 8)
const unit = 'year'
if (date.isSameDate(date1, date2, /* optional */ unit)) {
// true because date1 and date2's year is the same
}
可以省略单位参数,在这种情况下将进行完整的日期/时间比较,否则它允许进行部分比较
单位 | 描述 |
---|---|
秒 | 测试是否仅相同秒 |
分钟 | 测试是否仅相同分钟 |
小时 | 测试是否仅相同小时 |
day(s) / date | 测试是否仅相同天 |
月 | 测试是否仅相同月 |
年 | 测试是否仅相同年 |
差异
要计算两个日期之间的差异,请使用
import { date } from 'quasar'
const date1 = new Date(2017, 4, 12)
const date2 = new Date(2017, 3, 8)
const unit = 'days'
const diff = date.getDateDiff(date1, date2, unit)
// `diff` is 34 (days)
单位参数指示度量单位,如果未指定,则默认情况下为天
单位 | 描述 |
---|---|
秒 | 以秒为单位的距离(不考虑毫秒) |
分钟 | 以分钟为单位的距离(不考虑秒等) |
小时 | 以小时为单位的距离(不考虑分钟、秒等) |
day(s) / date | 以日历天为单位的距离 |
月 | 以日历月为单位的距离 |
年 | 以日历年为单位的距离 |
日历
要获取给定日期对象的一年中的 ISO 周数,请使用
import { date } from 'quasar'
const newDate = new Date(2017, 0, 4)
const week = date.getWeekOfYear(newDate) // `week` is 1
要获取给定日期对象的年中的天数,请使用
import { date } from 'quasar'
const newDate = new Date(2017, 1, 4)
const day = date.getDayOfYear(newDate) // `day` is 35
要获取给定日期对象的一周中的天数,请使用
import { date } from 'quasar'
const newDate = new Date(2017, 1, 9)
const day = date.getDayOfWeek(newDate) // `day` is 4
要获取指定日期的月份中的天数,请使用
import { date } from 'quasar'
const newDate = new Date()
const days = date.daysInMonth(newDate) // e.g. 30
时间起点/终点
要通过将其设置为时间的单位的开始来修改原始日期对象,请使用
import { date } from 'quasar'
let newDate = new Date('2000')
// set to beginning of year 2000 (January 1st, 2000, 00:00:00.000)
newDate = date.startOfDate(newDate, 'year')
// set to end of year 2000 (December 31st, 2000, 23:59:59.999)
newDate = date.endOfDate(newDate, 'year')
第二个参数指示要重置的单位(它的开头或结尾)
单位 | 描述 |
---|---|
秒 | 重置秒 |
分钟 | 重置分钟 |
小时 | 重置小时 |
day(s) / date | 重置天 |
月 | 重置月 |
年 | 重置年 |
其他
获取格式
import { date } from 'quasar'
date.inferDateFormat(new Date()) // 'date'
date.inferDateFormat(35346363) // 'number'
date.inferDateFormat('Mon Feb 05 2018 23:05:29') // string
克隆日期
import { date } from 'quasar'
const newDate = new Date()
const clonedDate = date.clone(newDate)
date.addToDate(newDate, { days: 1 })
console.log(newDate.getDate() === clonedDate.getDate()) // false
提取日期
使用当前 Quasar 语言包设置的区域设置,这允许您根据传递的格式将任何字符串解析为日期对象
import { date } from 'quasar'
// Example 1
const date = date.extractDate('2019-10-29 --- 23:12', 'YYYY-MM-DD --- HH:mm')
// date is a new Date() object
// Example 2
const date = date.extractDate('21/03/1985', 'DD/MM/YYYY')
// date is a new Date() object
使用可选的自定义区域设置
import { date } from 'quasar'
const obj = date.extractDate('Month: Feb, Day: 11th, Year: 2018', '[Month: ]MMM[, Day: ]Do[, Year: ]YYYY', {
days: ['Duminica', 'Luni', /* and all the rest of days - remember starting with Sunday */],
daysShort: ['Dum', 'Lun', /* and all the rest of days - remember starting with Sunday */],
months: ['Ianuarie', 'Februarie', /* and all the rest of months */],
monthsShort: ['Ian', 'Feb', /* and all the rest of months */]
})
// obj is a new Date() object