vue-use-date-format 1.0.1 → 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 +13 -96
- package/README.md +13 -96
- package/README.npm.md +13 -96
- package/banner.svg +48 -0
- package/logo.svg +13 -0
- package/package.json +9 -15
package/README.github.md
CHANGED
|
@@ -4,15 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-use-date-format</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center"></p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/v/vue-use-date-format.svg" alt="npm version" /></a>
|
|
11
11
|
<a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/dm/vue-use-date-format.svg" alt="npm downloads" /></a>
|
|
12
|
-
<a href="https://github.com/vuefrag/vue-use-date-format/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-use-date-format.svg" alt="license" /></a>
|
|
13
12
|
</p>
|
|
14
13
|
|
|
15
|
-
|
|
16
14
|
## Installation
|
|
17
15
|
|
|
18
16
|
```bash
|
|
@@ -21,105 +19,24 @@ npm install vue-use-date-format
|
|
|
21
19
|
|
|
22
20
|
## Usage
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
import { useDateFormat } from 'vue-use-date-format';
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
Get the formatted date according to the string of tokens passed in, inspired
|
|
29
|
-
by [dayjs](https://github.com/iamkun/dayjs).
|
|
30
|
-
|
|
31
|
-
**List of all available formats (HH:mm:ss by default):**
|
|
32
|
-
|
|
33
|
-
| Format | Output | Description |
|
|
34
|
-
| ------ | ------------------------ | --------------------------------------- |
|
|
35
|
-
| `Yo` | 2018th | Ordinal formatted year |
|
|
36
|
-
| `YY` | 18 | Two-digit year |
|
|
37
|
-
| `YYYY` | 2018 | Four-digit year |
|
|
38
|
-
| `M` | 1-12 | The month, beginning at 1 |
|
|
39
|
-
| `Mo` | 1st, 2nd, ..., 12th | The month, ordinal formatted |
|
|
40
|
-
| `MM` | 01-12 | The month, 2-digits |
|
|
41
|
-
| `MMM` | Jan-Dec | The abbreviated month name |
|
|
42
|
-
| `MMMM` | January-December | The full month name |
|
|
43
|
-
| `D` | 1-31 | The day of the month |
|
|
44
|
-
| `Do` | 1st, 2nd, ..., 31st | The day of the month, ordinal formatted |
|
|
45
|
-
| `DD` | 01-31 | The day of the month, 2-digits |
|
|
46
|
-
| `H` | 0-23 | The hour |
|
|
47
|
-
| `Ho` | 0th, 1st, 2nd, ..., 23rd | The hour, ordinal formatted |
|
|
48
|
-
| `HH` | 00-23 | The hour, 2-digits |
|
|
49
|
-
| `h` | 1-12 | The hour, 12-hour clock |
|
|
50
|
-
| `ho` | 1st, 2nd, ..., 12th | The hour, 12-hour clock, sorted |
|
|
51
|
-
| `hh` | 01-12 | The hour, 12-hour clock, 2-digits |
|
|
52
|
-
| `m` | 0-59 | The minute |
|
|
53
|
-
| `mo` | 0th, 1st, ..., 59th | The minute, ordinal formatted |
|
|
54
|
-
| `mm` | 00-59 | The minute, 2-digits |
|
|
55
|
-
| `s` | 0-59 | The second |
|
|
56
|
-
| `so` | 0th, 1st, ..., 59th | The second, ordinal formatted |
|
|
57
|
-
| `ss` | 00-59 | The second, 2-digits |
|
|
58
|
-
| `SSS` | 000-999 | The millisecond, 3-digits |
|
|
59
|
-
| `A` | AM PM | The meridiem |
|
|
60
|
-
| `AA` | A.M. P.M. | The meridiem, periods |
|
|
61
|
-
| `a` | am pm | The meridiem, lowercase |
|
|
62
|
-
| `aa` | a.m. p.m. | The meridiem, lowercase and periods |
|
|
63
|
-
| `d` | 0-6 | The day of the week, with Sunday as 0 |
|
|
64
|
-
| `dd` | S-S | The min name of the day of the week |
|
|
65
|
-
| `ddd` | Sun-Sat | The short name of the day of the week |
|
|
66
|
-
| `dddd` | Sunday-Saturday | The name of the day of the week |
|
|
67
|
-
| `z` | GMT, GMT+1 | The timezone with offset |
|
|
68
|
-
| `zz` | GMT, GMT+1 | The timezone with offset |
|
|
69
|
-
| `zzz` | GMT, GMT+1 | The timezone with offset |
|
|
70
|
-
| `zzzz` | GMT, GMT+01:00 | The long timezone with offset |
|
|
71
|
-
|
|
72
|
-
- Meridiem is customizable by defining `customMeridiem` in `options`.
|
|
73
|
-
|
|
74
|
-
### Basic
|
|
75
|
-
|
|
76
|
-
```vue
|
|
77
|
-
<script setup lang="ts">
|
|
78
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
79
|
-
|
|
80
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
|
|
81
|
-
</script>
|
|
82
|
-
|
|
83
|
-
<template>
|
|
84
|
-
<div>{{ formatted }}</div>
|
|
85
|
-
</template>
|
|
86
|
-
```
|
|
22
|
+
> **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
|
|
87
23
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
```vue
|
|
91
|
-
<script setup lang="ts">
|
|
92
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
93
|
-
|
|
94
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })
|
|
95
|
-
</script>
|
|
96
|
-
|
|
97
|
-
<template>
|
|
98
|
-
<div>{{ formatted }}</div>
|
|
99
|
-
</template>
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
### Use with custom meridiem
|
|
103
|
-
|
|
104
|
-
```vue
|
|
105
|
-
<script setup lang="ts">
|
|
24
|
+
```ts
|
|
106
25
|
import { useDateFormat } from 'vue-use-date-format'
|
|
26
|
+
import { ref } from 'vue'
|
|
107
27
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
return hasPeriod ? m.split('').reduce((acc, current) => acc += `${current}.`, '') : m
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
const am = useDateFormat('2022-01-01 05:05:05', 'hh:mm:ss A', { customMeridiem })
|
|
114
|
-
// am.value = '05:05:05 ΠΜ'
|
|
115
|
-
const pm = useDateFormat('2022-01-01 17:05:05', 'hh:mm:ss AA', { customMeridiem })
|
|
116
|
-
// pm.value = '05:05:05 Μ.Μ.'
|
|
117
|
-
</script>
|
|
118
|
-
```
|
|
28
|
+
const date = ref(new Date('2024-01-28 15:30:00'))
|
|
29
|
+
const formatted = useDateFormat(date, 'YYYY-MM-DD HH:mm:ss')
|
|
119
30
|
|
|
120
|
-
|
|
31
|
+
console.log(formatted.value) // '2024-01-28 15:30:00'
|
|
121
32
|
|
|
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'
|
|
36
|
+
```
|
|
122
37
|
|
|
123
38
|
## License
|
|
124
39
|
|
|
125
40
|
MIT
|
|
41
|
+
|
|
42
|
+
Extracted from [VueUse](https://vueuse.org/) for standalone use.
|
package/README.md
CHANGED
|
@@ -4,15 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-use-date-format</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center"></p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/v/vue-use-date-format.svg" alt="npm version" /></a>
|
|
11
11
|
<a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/dm/vue-use-date-format.svg" alt="npm downloads" /></a>
|
|
12
|
-
<a href="https://github.com/vuefrag/vue-use-date-format/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-use-date-format.svg" alt="license" /></a>
|
|
13
12
|
</p>
|
|
14
13
|
|
|
15
|
-
|
|
16
14
|
## Installation
|
|
17
15
|
|
|
18
16
|
```bash
|
|
@@ -21,105 +19,24 @@ npm install vue-use-date-format
|
|
|
21
19
|
|
|
22
20
|
## Usage
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
import { useDateFormat } from 'vue-use-date-format';
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
Get the formatted date according to the string of tokens passed in, inspired
|
|
29
|
-
by [dayjs](https://github.com/iamkun/dayjs).
|
|
30
|
-
|
|
31
|
-
**List of all available formats (HH:mm:ss by default):**
|
|
32
|
-
|
|
33
|
-
| Format | Output | Description |
|
|
34
|
-
| ------ | ------------------------ | --------------------------------------- |
|
|
35
|
-
| `Yo` | 2018th | Ordinal formatted year |
|
|
36
|
-
| `YY` | 18 | Two-digit year |
|
|
37
|
-
| `YYYY` | 2018 | Four-digit year |
|
|
38
|
-
| `M` | 1-12 | The month, beginning at 1 |
|
|
39
|
-
| `Mo` | 1st, 2nd, ..., 12th | The month, ordinal formatted |
|
|
40
|
-
| `MM` | 01-12 | The month, 2-digits |
|
|
41
|
-
| `MMM` | Jan-Dec | The abbreviated month name |
|
|
42
|
-
| `MMMM` | January-December | The full month name |
|
|
43
|
-
| `D` | 1-31 | The day of the month |
|
|
44
|
-
| `Do` | 1st, 2nd, ..., 31st | The day of the month, ordinal formatted |
|
|
45
|
-
| `DD` | 01-31 | The day of the month, 2-digits |
|
|
46
|
-
| `H` | 0-23 | The hour |
|
|
47
|
-
| `Ho` | 0th, 1st, 2nd, ..., 23rd | The hour, ordinal formatted |
|
|
48
|
-
| `HH` | 00-23 | The hour, 2-digits |
|
|
49
|
-
| `h` | 1-12 | The hour, 12-hour clock |
|
|
50
|
-
| `ho` | 1st, 2nd, ..., 12th | The hour, 12-hour clock, sorted |
|
|
51
|
-
| `hh` | 01-12 | The hour, 12-hour clock, 2-digits |
|
|
52
|
-
| `m` | 0-59 | The minute |
|
|
53
|
-
| `mo` | 0th, 1st, ..., 59th | The minute, ordinal formatted |
|
|
54
|
-
| `mm` | 00-59 | The minute, 2-digits |
|
|
55
|
-
| `s` | 0-59 | The second |
|
|
56
|
-
| `so` | 0th, 1st, ..., 59th | The second, ordinal formatted |
|
|
57
|
-
| `ss` | 00-59 | The second, 2-digits |
|
|
58
|
-
| `SSS` | 000-999 | The millisecond, 3-digits |
|
|
59
|
-
| `A` | AM PM | The meridiem |
|
|
60
|
-
| `AA` | A.M. P.M. | The meridiem, periods |
|
|
61
|
-
| `a` | am pm | The meridiem, lowercase |
|
|
62
|
-
| `aa` | a.m. p.m. | The meridiem, lowercase and periods |
|
|
63
|
-
| `d` | 0-6 | The day of the week, with Sunday as 0 |
|
|
64
|
-
| `dd` | S-S | The min name of the day of the week |
|
|
65
|
-
| `ddd` | Sun-Sat | The short name of the day of the week |
|
|
66
|
-
| `dddd` | Sunday-Saturday | The name of the day of the week |
|
|
67
|
-
| `z` | GMT, GMT+1 | The timezone with offset |
|
|
68
|
-
| `zz` | GMT, GMT+1 | The timezone with offset |
|
|
69
|
-
| `zzz` | GMT, GMT+1 | The timezone with offset |
|
|
70
|
-
| `zzzz` | GMT, GMT+01:00 | The long timezone with offset |
|
|
71
|
-
|
|
72
|
-
- Meridiem is customizable by defining `customMeridiem` in `options`.
|
|
73
|
-
|
|
74
|
-
### Basic
|
|
75
|
-
|
|
76
|
-
```vue
|
|
77
|
-
<script setup lang="ts">
|
|
78
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
79
|
-
|
|
80
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
|
|
81
|
-
</script>
|
|
82
|
-
|
|
83
|
-
<template>
|
|
84
|
-
<div>{{ formatted }}</div>
|
|
85
|
-
</template>
|
|
86
|
-
```
|
|
22
|
+
> **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
|
|
87
23
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
```vue
|
|
91
|
-
<script setup lang="ts">
|
|
92
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
93
|
-
|
|
94
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })
|
|
95
|
-
</script>
|
|
96
|
-
|
|
97
|
-
<template>
|
|
98
|
-
<div>{{ formatted }}</div>
|
|
99
|
-
</template>
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
### Use with custom meridiem
|
|
103
|
-
|
|
104
|
-
```vue
|
|
105
|
-
<script setup lang="ts">
|
|
24
|
+
```ts
|
|
106
25
|
import { useDateFormat } from 'vue-use-date-format'
|
|
26
|
+
import { ref } from 'vue'
|
|
107
27
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
return hasPeriod ? m.split('').reduce((acc, current) => acc += `${current}.`, '') : m
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
const am = useDateFormat('2022-01-01 05:05:05', 'hh:mm:ss A', { customMeridiem })
|
|
114
|
-
// am.value = '05:05:05 ΠΜ'
|
|
115
|
-
const pm = useDateFormat('2022-01-01 17:05:05', 'hh:mm:ss AA', { customMeridiem })
|
|
116
|
-
// pm.value = '05:05:05 Μ.Μ.'
|
|
117
|
-
</script>
|
|
118
|
-
```
|
|
28
|
+
const date = ref(new Date('2024-01-28 15:30:00'))
|
|
29
|
+
const formatted = useDateFormat(date, 'YYYY-MM-DD HH:mm:ss')
|
|
119
30
|
|
|
120
|
-
|
|
31
|
+
console.log(formatted.value) // '2024-01-28 15:30:00'
|
|
121
32
|
|
|
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'
|
|
36
|
+
```
|
|
122
37
|
|
|
123
38
|
## License
|
|
124
39
|
|
|
125
40
|
MIT
|
|
41
|
+
|
|
42
|
+
Extracted from [VueUse](https://vueuse.org/) for standalone use.
|
package/README.npm.md
CHANGED
|
@@ -4,15 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-use-date-format</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center"></p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/v/vue-use-date-format.svg" alt="npm version" /></a>
|
|
11
11
|
<a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/dm/vue-use-date-format.svg" alt="npm downloads" /></a>
|
|
12
|
-
<a href="https://github.com/vuefrag/vue-use-date-format/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-use-date-format.svg" alt="license" /></a>
|
|
13
12
|
</p>
|
|
14
13
|
|
|
15
|
-
|
|
16
14
|
## Installation
|
|
17
15
|
|
|
18
16
|
```bash
|
|
@@ -21,105 +19,24 @@ npm install vue-use-date-format
|
|
|
21
19
|
|
|
22
20
|
## Usage
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
import { useDateFormat } from 'vue-use-date-format';
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
Get the formatted date according to the string of tokens passed in, inspired
|
|
29
|
-
by [dayjs](https://github.com/iamkun/dayjs).
|
|
30
|
-
|
|
31
|
-
**List of all available formats (HH:mm:ss by default):**
|
|
32
|
-
|
|
33
|
-
| Format | Output | Description |
|
|
34
|
-
| ------ | ------------------------ | --------------------------------------- |
|
|
35
|
-
| `Yo` | 2018th | Ordinal formatted year |
|
|
36
|
-
| `YY` | 18 | Two-digit year |
|
|
37
|
-
| `YYYY` | 2018 | Four-digit year |
|
|
38
|
-
| `M` | 1-12 | The month, beginning at 1 |
|
|
39
|
-
| `Mo` | 1st, 2nd, ..., 12th | The month, ordinal formatted |
|
|
40
|
-
| `MM` | 01-12 | The month, 2-digits |
|
|
41
|
-
| `MMM` | Jan-Dec | The abbreviated month name |
|
|
42
|
-
| `MMMM` | January-December | The full month name |
|
|
43
|
-
| `D` | 1-31 | The day of the month |
|
|
44
|
-
| `Do` | 1st, 2nd, ..., 31st | The day of the month, ordinal formatted |
|
|
45
|
-
| `DD` | 01-31 | The day of the month, 2-digits |
|
|
46
|
-
| `H` | 0-23 | The hour |
|
|
47
|
-
| `Ho` | 0th, 1st, 2nd, ..., 23rd | The hour, ordinal formatted |
|
|
48
|
-
| `HH` | 00-23 | The hour, 2-digits |
|
|
49
|
-
| `h` | 1-12 | The hour, 12-hour clock |
|
|
50
|
-
| `ho` | 1st, 2nd, ..., 12th | The hour, 12-hour clock, sorted |
|
|
51
|
-
| `hh` | 01-12 | The hour, 12-hour clock, 2-digits |
|
|
52
|
-
| `m` | 0-59 | The minute |
|
|
53
|
-
| `mo` | 0th, 1st, ..., 59th | The minute, ordinal formatted |
|
|
54
|
-
| `mm` | 00-59 | The minute, 2-digits |
|
|
55
|
-
| `s` | 0-59 | The second |
|
|
56
|
-
| `so` | 0th, 1st, ..., 59th | The second, ordinal formatted |
|
|
57
|
-
| `ss` | 00-59 | The second, 2-digits |
|
|
58
|
-
| `SSS` | 000-999 | The millisecond, 3-digits |
|
|
59
|
-
| `A` | AM PM | The meridiem |
|
|
60
|
-
| `AA` | A.M. P.M. | The meridiem, periods |
|
|
61
|
-
| `a` | am pm | The meridiem, lowercase |
|
|
62
|
-
| `aa` | a.m. p.m. | The meridiem, lowercase and periods |
|
|
63
|
-
| `d` | 0-6 | The day of the week, with Sunday as 0 |
|
|
64
|
-
| `dd` | S-S | The min name of the day of the week |
|
|
65
|
-
| `ddd` | Sun-Sat | The short name of the day of the week |
|
|
66
|
-
| `dddd` | Sunday-Saturday | The name of the day of the week |
|
|
67
|
-
| `z` | GMT, GMT+1 | The timezone with offset |
|
|
68
|
-
| `zz` | GMT, GMT+1 | The timezone with offset |
|
|
69
|
-
| `zzz` | GMT, GMT+1 | The timezone with offset |
|
|
70
|
-
| `zzzz` | GMT, GMT+01:00 | The long timezone with offset |
|
|
71
|
-
|
|
72
|
-
- Meridiem is customizable by defining `customMeridiem` in `options`.
|
|
73
|
-
|
|
74
|
-
### Basic
|
|
75
|
-
|
|
76
|
-
```vue
|
|
77
|
-
<script setup lang="ts">
|
|
78
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
79
|
-
|
|
80
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
|
|
81
|
-
</script>
|
|
82
|
-
|
|
83
|
-
<template>
|
|
84
|
-
<div>{{ formatted }}</div>
|
|
85
|
-
</template>
|
|
86
|
-
```
|
|
22
|
+
> **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
|
|
87
23
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
```vue
|
|
91
|
-
<script setup lang="ts">
|
|
92
|
-
import { useDateFormat, useNow } from 'vue-use-date-format'
|
|
93
|
-
|
|
94
|
-
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })
|
|
95
|
-
</script>
|
|
96
|
-
|
|
97
|
-
<template>
|
|
98
|
-
<div>{{ formatted }}</div>
|
|
99
|
-
</template>
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
### Use with custom meridiem
|
|
103
|
-
|
|
104
|
-
```vue
|
|
105
|
-
<script setup lang="ts">
|
|
24
|
+
```ts
|
|
106
25
|
import { useDateFormat } from 'vue-use-date-format'
|
|
26
|
+
import { ref } from 'vue'
|
|
107
27
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
return hasPeriod ? m.split('').reduce((acc, current) => acc += `${current}.`, '') : m
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
const am = useDateFormat('2022-01-01 05:05:05', 'hh:mm:ss A', { customMeridiem })
|
|
114
|
-
// am.value = '05:05:05 ΠΜ'
|
|
115
|
-
const pm = useDateFormat('2022-01-01 17:05:05', 'hh:mm:ss AA', { customMeridiem })
|
|
116
|
-
// pm.value = '05:05:05 Μ.Μ.'
|
|
117
|
-
</script>
|
|
118
|
-
```
|
|
28
|
+
const date = ref(new Date('2024-01-28 15:30:00'))
|
|
29
|
+
const formatted = useDateFormat(date, 'YYYY-MM-DD HH:mm:ss')
|
|
119
30
|
|
|
120
|
-
|
|
31
|
+
console.log(formatted.value) // '2024-01-28 15:30:00'
|
|
121
32
|
|
|
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'
|
|
36
|
+
```
|
|
122
37
|
|
|
123
38
|
## License
|
|
124
39
|
|
|
125
40
|
MIT
|
|
41
|
+
|
|
42
|
+
Extracted from [VueUse](https://vueuse.org/) for standalone use.
|
package/banner.svg
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 640" width="1280" height="640">
|
|
2
|
+
<defs>
|
|
3
|
+
<linearGradient id="banner-bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
4
|
+
<stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
|
|
5
|
+
<stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
|
|
6
|
+
</linearGradient>
|
|
7
|
+
</defs>
|
|
8
|
+
|
|
9
|
+
<!-- Background -->
|
|
10
|
+
<rect width="1280" height="640" fill="url(#banner-bg)"/>
|
|
11
|
+
|
|
12
|
+
<!-- Decorative elements -->
|
|
13
|
+
<circle cx="200" cy="150" r="120" fill="#e67e22" opacity="0.06"/>
|
|
14
|
+
<circle cx="1150" cy="500" r="100" fill="#e67e22" opacity="0.06"/>
|
|
15
|
+
|
|
16
|
+
<!-- Top accent bar -->
|
|
17
|
+
<rect x="0" y="0" width="1280" height="8" fill="#e67e22"/>
|
|
18
|
+
|
|
19
|
+
<!-- Vuefrag badge -->
|
|
20
|
+
<g transform="translate(80, 80)">
|
|
21
|
+
<rect width="140" height="50" rx="8" fill="#e67e22"/>
|
|
22
|
+
<text x="70" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="700" fill="white">Vuefrag</text>
|
|
23
|
+
</g>
|
|
24
|
+
|
|
25
|
+
<!-- Package name -->
|
|
26
|
+
<text x="80" y="280" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">vue-use-date-format</text>
|
|
27
|
+
|
|
28
|
+
<!-- Description -->
|
|
29
|
+
<text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3 composable utility</text>
|
|
30
|
+
|
|
31
|
+
<!-- Install command -->
|
|
32
|
+
<g transform="translate(80, 420)">
|
|
33
|
+
<rect width="513.6" height="60" rx="8" fill="#0f172a"/>
|
|
34
|
+
<text x="20" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#94a3b8">npm install</text>
|
|
35
|
+
<text x="200" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#e67e22">vue-use-date-format</text>
|
|
36
|
+
</g>
|
|
37
|
+
|
|
38
|
+
<!-- Category badge -->
|
|
39
|
+
<g transform="translate(80, 520)">
|
|
40
|
+
<rect width="88" height="40" rx="20" fill="#e67e22" opacity="0.2"/>
|
|
41
|
+
<text x="44" y="27" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#e67e22">Time</text>
|
|
42
|
+
</g>
|
|
43
|
+
|
|
44
|
+
<!-- Category icon (top right corner) -->
|
|
45
|
+
<g>
|
|
46
|
+
<circle cx="1080" cy="150" r="70" fill="none" stroke="#e67e22" stroke-width="15"/><path d="M1080 90v60h40" fill="none" stroke="#e67e22" stroke-width="12" stroke-linecap="round"/>
|
|
47
|
+
</g>
|
|
48
|
+
</svg>
|
package/logo.svg
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
|
|
2
|
+
<!-- Background -->
|
|
3
|
+
<rect width="96" height="96" rx="16" fill="#2c3e50"/>
|
|
4
|
+
|
|
5
|
+
<!-- Primary shape -->
|
|
6
|
+
<circle cx="48" cy="42" r="20" fill="#e67e22"/>
|
|
7
|
+
|
|
8
|
+
<!-- Function name -->
|
|
9
|
+
<text x="48" y="72" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="7" fill="#e67e22" opacity="0.85">Time</text>
|
|
10
|
+
|
|
11
|
+
<!-- Bottom accent line -->
|
|
12
|
+
<rect x="28" y="82" width="40" height="2" rx="1" fill="#e67e22" opacity="0.5"/>
|
|
13
|
+
</svg>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-use-date-format",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Vue 3
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "Vue 3 composable utility",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -13,7 +13,10 @@
|
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
16
|
-
"dist"
|
|
16
|
+
"dist",
|
|
17
|
+
"logo.svg",
|
|
18
|
+
"banner.svg",
|
|
19
|
+
"README.md"
|
|
17
20
|
],
|
|
18
21
|
"scripts": {
|
|
19
22
|
"build": "unbuild",
|
|
@@ -21,23 +24,14 @@
|
|
|
21
24
|
"postpublish": "cp README.github.md README.md"
|
|
22
25
|
},
|
|
23
26
|
"keywords": [
|
|
24
|
-
"vue",
|
|
25
|
-
"vue3",
|
|
26
|
-
"vue-3",
|
|
27
|
-
"composable",
|
|
28
|
-
"composition-api",
|
|
29
|
-
"vueuse",
|
|
30
|
-
"time",
|
|
31
27
|
"date",
|
|
32
|
-
"datetime",
|
|
33
|
-
"timer",
|
|
34
|
-
"use",
|
|
35
28
|
"format",
|
|
36
29
|
"reactive",
|
|
30
|
+
"time",
|
|
37
31
|
"tokens",
|
|
38
32
|
"strftime",
|
|
39
33
|
"localize",
|
|
40
|
-
"
|
|
34
|
+
"datetime"
|
|
41
35
|
],
|
|
42
36
|
"author": "VueFrag",
|
|
43
37
|
"license": "MIT",
|
|
@@ -57,4 +51,4 @@
|
|
|
57
51
|
"typescript": "^5.0.0",
|
|
58
52
|
"vue": "^3.4.0"
|
|
59
53
|
}
|
|
60
|
-
}
|
|
54
|
+
}
|