vue-use-date-format 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.github.md +10 -86
- package/README.md +10 -86
- package/README.npm.md +10 -86
- package/package.json +1 -1
package/README.github.md
CHANGED
|
@@ -19,96 +19,20 @@ npm install vue-use-date-format
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
by [dayjs](https://github.com/iamkun/dayjs).
|
|
22
|
+
> **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
| Format | Output | Description |
|
|
28
|
-
| ------ | ------------------------ | --------------------------------------- |
|
|
29
|
-
| `Yo` | 2018th | Ordinal formatted year |
|
|
30
|
-
| `YY` | 18 | Two-digit year |
|
|
31
|
-
| `YYYY` | 2018 | Four-digit year |
|
|
32
|
-
| `M` | 1-12 | The month, beginning at 1 |
|
|
33
|
-
| `Mo` | 1st, 2nd, ..., 12th | The month, ordinal formatted |
|
|
34
|
-
| `MM` | 01-12 | The month, 2-digits |
|
|
35
|
-
| `MMM` | Jan-Dec | The abbreviated month name |
|
|
36
|
-
| `MMMM` | January-December | The full month name |
|
|
37
|
-
| `D` | 1-31 | The day of the month |
|
|
38
|
-
| `Do` | 1st, 2nd, ..., 31st | The day of the month, ordinal formatted |
|
|
39
|
-
| `DD` | 01-31 | The day of the month, 2-digits |
|
|
40
|
-
| `H` | 0-23 | The hour |
|
|
41
|
-
| `Ho` | 0th, 1st, 2nd, ..., 23rd | The hour, ordinal formatted |
|
|
42
|
-
| `HH` | 00-23 | The hour, 2-digits |
|
|
43
|
-
| `h` | 1-12 | The hour, 12-hour clock |
|
|
44
|
-
| `ho` | 1st, 2nd, ..., 12th | The hour, 12-hour clock, sorted |
|
|
45
|
-
| `hh` | 01-12 | The hour, 12-hour clock, 2-digits |
|
|
46
|
-
| `m` | 0-59 | The minute |
|
|
47
|
-
| `mo` | 0th, 1st, ..., 59th | The minute, ordinal formatted |
|
|
48
|
-
| `mm` | 00-59 | The minute, 2-digits |
|
|
49
|
-
| `s` | 0-59 | The second |
|
|
50
|
-
| `so` | 0th, 1st, ..., 59th | The second, ordinal formatted |
|
|
51
|
-
| `ss` | 00-59 | The second, 2-digits |
|
|
52
|
-
| `SSS` | 000-999 | The millisecond, 3-digits |
|
|
53
|
-
| `A` | AM PM | The meridiem |
|
|
54
|
-
| `AA` | A.M. P.M. | The meridiem, periods |
|
|
55
|
-
| `a` | am pm | The meridiem, lowercase |
|
|
56
|
-
| `aa` | a.m. p.m. | The meridiem, lowercase and periods |
|
|
57
|
-
| `d` | 0-6 | The day of the week, with Sunday as 0 |
|
|
58
|
-
| `dd` | S-S | The min name of the day of the week |
|
|
59
|
-
| `ddd` | Sun-Sat | The short name of the day of the week |
|
|
60
|
-
| `dddd` | Sunday-Saturday | The name of the day of the week |
|
|
61
|
-
| `z` | GMT, GMT+1 | The timezone with offset |
|
|
62
|
-
| `zz` | GMT, GMT+1 | The timezone with offset |
|
|
63
|
-
| `zzz` | GMT, GMT+1 | The timezone with offset |
|
|
64
|
-
| `zzzz` | GMT, GMT+01:00 | The long timezone with offset |
|
|
65
|
-
|
|
66
|
-
- Meridiem is customizable by defining `customMeridiem` in `options`.
|
|
67
|
-
|
|
68
|
-
### Basic
|
|
69
|
-
|
|
70
|
-
```vue
|
|
71
|
-
<script setup lang="ts">
|
|
72
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
73
|
-
|
|
74
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
|
|
75
|
-
</script>
|
|
76
|
-
|
|
77
|
-
<template>
|
|
78
|
-
<div>{{ formatted }}</div>
|
|
79
|
-
</template>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
### Use with locales
|
|
83
|
-
|
|
84
|
-
```vue
|
|
85
|
-
<script setup lang="ts">
|
|
86
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
87
|
-
|
|
88
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })
|
|
89
|
-
</script>
|
|
90
|
-
|
|
91
|
-
<template>
|
|
92
|
-
<div>{{ formatted }}</div>
|
|
93
|
-
</template>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
### Use with custom meridiem
|
|
97
|
-
|
|
98
|
-
```vue
|
|
99
|
-
<script setup lang="ts">
|
|
24
|
+
```ts
|
|
100
25
|
import { useDateFormat } from 'vue-use-date-format'
|
|
26
|
+
import { ref } from 'vue'
|
|
27
|
+
|
|
28
|
+
const date = ref(new Date('2024-01-28 15:30:00'))
|
|
29
|
+
const formatted = useDateFormat(date, 'YYYY-MM-DD HH:mm:ss')
|
|
101
30
|
|
|
102
|
-
|
|
103
|
-
const m = hours > 11 ? (isLowercase ? 'μμ' : 'ΜΜ') : (isLowercase ? 'πμ' : 'ΠΜ')
|
|
104
|
-
return hasPeriod ? m.split('').reduce((acc, current) => acc += `${current}.`, '') : m
|
|
105
|
-
}
|
|
31
|
+
console.log(formatted.value) // '2024-01-28 15:30:00'
|
|
106
32
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
// pm.value = '05:05:05 Μ.Μ.'
|
|
111
|
-
</script>
|
|
33
|
+
// Change the date
|
|
34
|
+
date.value = new Date('2024-12-25 00:00:00')
|
|
35
|
+
console.log(formatted.value) // '2024-12-25 00:00:00'
|
|
112
36
|
```
|
|
113
37
|
|
|
114
38
|
## License
|
package/README.md
CHANGED
|
@@ -19,96 +19,20 @@ npm install vue-use-date-format
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
by [dayjs](https://github.com/iamkun/dayjs).
|
|
22
|
+
> **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
| Format | Output | Description |
|
|
28
|
-
| ------ | ------------------------ | --------------------------------------- |
|
|
29
|
-
| `Yo` | 2018th | Ordinal formatted year |
|
|
30
|
-
| `YY` | 18 | Two-digit year |
|
|
31
|
-
| `YYYY` | 2018 | Four-digit year |
|
|
32
|
-
| `M` | 1-12 | The month, beginning at 1 |
|
|
33
|
-
| `Mo` | 1st, 2nd, ..., 12th | The month, ordinal formatted |
|
|
34
|
-
| `MM` | 01-12 | The month, 2-digits |
|
|
35
|
-
| `MMM` | Jan-Dec | The abbreviated month name |
|
|
36
|
-
| `MMMM` | January-December | The full month name |
|
|
37
|
-
| `D` | 1-31 | The day of the month |
|
|
38
|
-
| `Do` | 1st, 2nd, ..., 31st | The day of the month, ordinal formatted |
|
|
39
|
-
| `DD` | 01-31 | The day of the month, 2-digits |
|
|
40
|
-
| `H` | 0-23 | The hour |
|
|
41
|
-
| `Ho` | 0th, 1st, 2nd, ..., 23rd | The hour, ordinal formatted |
|
|
42
|
-
| `HH` | 00-23 | The hour, 2-digits |
|
|
43
|
-
| `h` | 1-12 | The hour, 12-hour clock |
|
|
44
|
-
| `ho` | 1st, 2nd, ..., 12th | The hour, 12-hour clock, sorted |
|
|
45
|
-
| `hh` | 01-12 | The hour, 12-hour clock, 2-digits |
|
|
46
|
-
| `m` | 0-59 | The minute |
|
|
47
|
-
| `mo` | 0th, 1st, ..., 59th | The minute, ordinal formatted |
|
|
48
|
-
| `mm` | 00-59 | The minute, 2-digits |
|
|
49
|
-
| `s` | 0-59 | The second |
|
|
50
|
-
| `so` | 0th, 1st, ..., 59th | The second, ordinal formatted |
|
|
51
|
-
| `ss` | 00-59 | The second, 2-digits |
|
|
52
|
-
| `SSS` | 000-999 | The millisecond, 3-digits |
|
|
53
|
-
| `A` | AM PM | The meridiem |
|
|
54
|
-
| `AA` | A.M. P.M. | The meridiem, periods |
|
|
55
|
-
| `a` | am pm | The meridiem, lowercase |
|
|
56
|
-
| `aa` | a.m. p.m. | The meridiem, lowercase and periods |
|
|
57
|
-
| `d` | 0-6 | The day of the week, with Sunday as 0 |
|
|
58
|
-
| `dd` | S-S | The min name of the day of the week |
|
|
59
|
-
| `ddd` | Sun-Sat | The short name of the day of the week |
|
|
60
|
-
| `dddd` | Sunday-Saturday | The name of the day of the week |
|
|
61
|
-
| `z` | GMT, GMT+1 | The timezone with offset |
|
|
62
|
-
| `zz` | GMT, GMT+1 | The timezone with offset |
|
|
63
|
-
| `zzz` | GMT, GMT+1 | The timezone with offset |
|
|
64
|
-
| `zzzz` | GMT, GMT+01:00 | The long timezone with offset |
|
|
65
|
-
|
|
66
|
-
- Meridiem is customizable by defining `customMeridiem` in `options`.
|
|
67
|
-
|
|
68
|
-
### Basic
|
|
69
|
-
|
|
70
|
-
```vue
|
|
71
|
-
<script setup lang="ts">
|
|
72
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
73
|
-
|
|
74
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
|
|
75
|
-
</script>
|
|
76
|
-
|
|
77
|
-
<template>
|
|
78
|
-
<div>{{ formatted }}</div>
|
|
79
|
-
</template>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
### Use with locales
|
|
83
|
-
|
|
84
|
-
```vue
|
|
85
|
-
<script setup lang="ts">
|
|
86
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
87
|
-
|
|
88
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })
|
|
89
|
-
</script>
|
|
90
|
-
|
|
91
|
-
<template>
|
|
92
|
-
<div>{{ formatted }}</div>
|
|
93
|
-
</template>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
### Use with custom meridiem
|
|
97
|
-
|
|
98
|
-
```vue
|
|
99
|
-
<script setup lang="ts">
|
|
24
|
+
```ts
|
|
100
25
|
import { useDateFormat } from 'vue-use-date-format'
|
|
26
|
+
import { ref } from 'vue'
|
|
27
|
+
|
|
28
|
+
const date = ref(new Date('2024-01-28 15:30:00'))
|
|
29
|
+
const formatted = useDateFormat(date, 'YYYY-MM-DD HH:mm:ss')
|
|
101
30
|
|
|
102
|
-
|
|
103
|
-
const m = hours > 11 ? (isLowercase ? 'μμ' : 'ΜΜ') : (isLowercase ? 'πμ' : 'ΠΜ')
|
|
104
|
-
return hasPeriod ? m.split('').reduce((acc, current) => acc += `${current}.`, '') : m
|
|
105
|
-
}
|
|
31
|
+
console.log(formatted.value) // '2024-01-28 15:30:00'
|
|
106
32
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
// pm.value = '05:05:05 Μ.Μ.'
|
|
111
|
-
</script>
|
|
33
|
+
// Change the date
|
|
34
|
+
date.value = new Date('2024-12-25 00:00:00')
|
|
35
|
+
console.log(formatted.value) // '2024-12-25 00:00:00'
|
|
112
36
|
```
|
|
113
37
|
|
|
114
38
|
## License
|
package/README.npm.md
CHANGED
|
@@ -19,96 +19,20 @@ npm install vue-use-date-format
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
by [dayjs](https://github.com/iamkun/dayjs).
|
|
22
|
+
> **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
| Format | Output | Description |
|
|
28
|
-
| ------ | ------------------------ | --------------------------------------- |
|
|
29
|
-
| `Yo` | 2018th | Ordinal formatted year |
|
|
30
|
-
| `YY` | 18 | Two-digit year |
|
|
31
|
-
| `YYYY` | 2018 | Four-digit year |
|
|
32
|
-
| `M` | 1-12 | The month, beginning at 1 |
|
|
33
|
-
| `Mo` | 1st, 2nd, ..., 12th | The month, ordinal formatted |
|
|
34
|
-
| `MM` | 01-12 | The month, 2-digits |
|
|
35
|
-
| `MMM` | Jan-Dec | The abbreviated month name |
|
|
36
|
-
| `MMMM` | January-December | The full month name |
|
|
37
|
-
| `D` | 1-31 | The day of the month |
|
|
38
|
-
| `Do` | 1st, 2nd, ..., 31st | The day of the month, ordinal formatted |
|
|
39
|
-
| `DD` | 01-31 | The day of the month, 2-digits |
|
|
40
|
-
| `H` | 0-23 | The hour |
|
|
41
|
-
| `Ho` | 0th, 1st, 2nd, ..., 23rd | The hour, ordinal formatted |
|
|
42
|
-
| `HH` | 00-23 | The hour, 2-digits |
|
|
43
|
-
| `h` | 1-12 | The hour, 12-hour clock |
|
|
44
|
-
| `ho` | 1st, 2nd, ..., 12th | The hour, 12-hour clock, sorted |
|
|
45
|
-
| `hh` | 01-12 | The hour, 12-hour clock, 2-digits |
|
|
46
|
-
| `m` | 0-59 | The minute |
|
|
47
|
-
| `mo` | 0th, 1st, ..., 59th | The minute, ordinal formatted |
|
|
48
|
-
| `mm` | 00-59 | The minute, 2-digits |
|
|
49
|
-
| `s` | 0-59 | The second |
|
|
50
|
-
| `so` | 0th, 1st, ..., 59th | The second, ordinal formatted |
|
|
51
|
-
| `ss` | 00-59 | The second, 2-digits |
|
|
52
|
-
| `SSS` | 000-999 | The millisecond, 3-digits |
|
|
53
|
-
| `A` | AM PM | The meridiem |
|
|
54
|
-
| `AA` | A.M. P.M. | The meridiem, periods |
|
|
55
|
-
| `a` | am pm | The meridiem, lowercase |
|
|
56
|
-
| `aa` | a.m. p.m. | The meridiem, lowercase and periods |
|
|
57
|
-
| `d` | 0-6 | The day of the week, with Sunday as 0 |
|
|
58
|
-
| `dd` | S-S | The min name of the day of the week |
|
|
59
|
-
| `ddd` | Sun-Sat | The short name of the day of the week |
|
|
60
|
-
| `dddd` | Sunday-Saturday | The name of the day of the week |
|
|
61
|
-
| `z` | GMT, GMT+1 | The timezone with offset |
|
|
62
|
-
| `zz` | GMT, GMT+1 | The timezone with offset |
|
|
63
|
-
| `zzz` | GMT, GMT+1 | The timezone with offset |
|
|
64
|
-
| `zzzz` | GMT, GMT+01:00 | The long timezone with offset |
|
|
65
|
-
|
|
66
|
-
- Meridiem is customizable by defining `customMeridiem` in `options`.
|
|
67
|
-
|
|
68
|
-
### Basic
|
|
69
|
-
|
|
70
|
-
```vue
|
|
71
|
-
<script setup lang="ts">
|
|
72
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
73
|
-
|
|
74
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
|
|
75
|
-
</script>
|
|
76
|
-
|
|
77
|
-
<template>
|
|
78
|
-
<div>{{ formatted }}</div>
|
|
79
|
-
</template>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
### Use with locales
|
|
83
|
-
|
|
84
|
-
```vue
|
|
85
|
-
<script setup lang="ts">
|
|
86
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
87
|
-
|
|
88
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })
|
|
89
|
-
</script>
|
|
90
|
-
|
|
91
|
-
<template>
|
|
92
|
-
<div>{{ formatted }}</div>
|
|
93
|
-
</template>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
### Use with custom meridiem
|
|
97
|
-
|
|
98
|
-
```vue
|
|
99
|
-
<script setup lang="ts">
|
|
24
|
+
```ts
|
|
100
25
|
import { useDateFormat } from 'vue-use-date-format'
|
|
26
|
+
import { ref } from 'vue'
|
|
27
|
+
|
|
28
|
+
const date = ref(new Date('2024-01-28 15:30:00'))
|
|
29
|
+
const formatted = useDateFormat(date, 'YYYY-MM-DD HH:mm:ss')
|
|
101
30
|
|
|
102
|
-
|
|
103
|
-
const m = hours > 11 ? (isLowercase ? 'μμ' : 'ΜΜ') : (isLowercase ? 'πμ' : 'ΠΜ')
|
|
104
|
-
return hasPeriod ? m.split('').reduce((acc, current) => acc += `${current}.`, '') : m
|
|
105
|
-
}
|
|
31
|
+
console.log(formatted.value) // '2024-01-28 15:30:00'
|
|
106
32
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
// pm.value = '05:05:05 Μ.Μ.'
|
|
111
|
-
</script>
|
|
33
|
+
// Change the date
|
|
34
|
+
date.value = new Date('2024-12-25 00:00:00')
|
|
35
|
+
console.log(formatted.value) // '2024-12-25 00:00:00'
|
|
112
36
|
```
|
|
113
37
|
|
|
114
38
|
## License
|