npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-lux

v1.2.2

Published

Easy DateTime formatting & parsing in Vue using Luxon

Downloads

36

Readme

vue-lux

npm version npm downloads bundle

vue-lux is a Vue 3 library that simplifies DateTime formatting and parsing using the powerful Luxon library. Inspired by vue-luxon.

Install

yarn add vue-lux
pnpm i vue-lux
npm i vue-lux

Vue

import { createApp } from 'vue'
import VueLuxon from 'vue-lux'
import App from './App.vue'

const app = createApp(App)
app.use(VueLux, {
  input: {
    zone: 'utc',
    format: 'iso'
  },
  output: 'short'
})
app.mount('#app')

Nuxt

export default defineNuxtConfig({
  modules: ['vue-lux/nuxt'],
  lux: {
    input: {
      zone: 'utc',
      format: 'iso'
    },
    output: 'short'
  }
})

By default, vue-lux expect the given datetime string to be time zone utc and format iso . The output will be based on the client's locale.

Learn more about settings

Formatting

You can use the $lux or $lf method everywhere in your vue app to formate a date:

this.$lux('2020-10-05T14:48:00.000Z')
// October 5, 2020

You can change the output format:

this.$lux('2020-10-05T14:48:00.000Z', 'dd-MM-yyyy')
// 05-10-2020

this.$lux('2020-10-05 22:36', 'relative')
// 22 days ago

And other settings:

this.$lux('2020-10-05 22:36', 'full', { format: 'yyyy-MM-dd HH:mm', zone: 'Asia/Tokyo' })
// October 5, 2020, 3:36 PM GMT+2

These formats will be in the clients browser language, unless you set a [specific language].

Parsing

You can use the $lp method to parse a date and retrive a Luxon DateTime object:

this.$lp('2020-10-05T14:48:00.000Z')
// DateTime { 2020-10-05T14:48:00.000Z }

this.$lp('2020-10-05 22:36', 'yyyy-MM-dd HH:mm')
// DateTime { 2020-10-05T22:36:00.000Z }

Settings

You can define the default input and output settings in the plugin options.

{
  input: {
    zone: 'utc',
    format: 'iso',
  },
  output: {
    locale: 'en',
    format: 'short',
  },
  templates: {
    userDate: {
      zone: 'client',
      format: 'dd MM yyyy',
    },
    serverAMS: {
      zone: 'Europe/Amsterdam',
      format: 'dd-MM-yyyy HH:mm:ss',
    },
    client: {
      zone: 'local',
      format: 'short',
    },
  },
}

Templates

Templates are predefined formats that can be used to quickly format and parse.

// Will use the template userDate to format the date
this.$lux('2020-10-05T14:48:00.000Z', 'userDate')
// 05 10 2020

// Will use serverAMS template to parse the date
this.$lp('2020-10-05 22:36', 'serverAMS')
// DateTime { 2020-10-05T22:36:00.000Z }

// Will use serverAMS template to parse and userDate template to format the date
this.$lux('2020-10-05 22:36', 'userDate', 'serverAMS')
// 05 10 2020

By default there are these templates available:

| format | example (with locale en_US) | | ---------------- | ---------------------------------------------------------- | | short | 10/14/1983, 1:30 PM | | shorts | 10/14/1983, 1:30:23 PM | | med | Oct 14, 1983, 1:30 PM | | meds | Oct 14, 1983, 9:30:33 AM | | full | October 14, 1983, 9:30 AM EDT | | fulls | October 14, 1983, 9:30:33 AM EDT | | huge | Friday, October 14, 1983, 9:30 AM Eastern Daylight Time | | huges | Friday, October 14, 1983, 9:30:33 AM Eastern Daylight Time | | time | 9:30 AM | | times | 09:30:23 AM | | time24 | 09:30 | | time24s | 09:30:23 | | time24longoffset | 09:30:23 Eastern Daylight Time | | date_full | October 14, 1983 | | date_huge | Tuesday, October 14, 1983 | | date_med | Oct 14, 1983 | | date_medd | Fri, Oct 14, 1983 | | date_short | 10/14/1983 |

Input

The input can be one of the following types:

  • string: A string representation of a date or time.
  • number: A numeric representation of a date or time, such as a timestamp.
  • Date: A JavaScript Date object.
  • DateTime: A DateTime object from the Luxon library.

Along with the input, you can also specify the input format and zone.

import type { Zone } from 'luxon'

interface InputOptions {
  format: string
  zone?: string | Zone
}

Available formats are:

| format | description | example | | -------------- | ------------------------------------ | ----------------------------------------------------------- | | sql | SQL dates, times, and datetimes | 2017-05-15 09:24:15 | | iso | ISO 8601 date time string | 2018-01-06T13:07:04.054 | | rfc2822 | RFC 2822 | Tue, 01 Nov 2016 13:23:12 +0630 | | http | HTTP header specs (RFC 850 and 1123) | Sun, 06 Nov 1994 08:49:37 GMT | | seconds | Unix timestamp | 1542674993 | | millis | Unix timestamp milliseconds | 1542674993410 | | Date | JavaScript Date object | new Date('2020-10-05T14:48:00.000Z') | | DateTime | Luxon DateTime object | DateTime.fromISO('2020-10-05T14:48:00.000Z') | | tokens | see: Tokens | yyyy-MM-dd | | templateName | see: Templates | |

Output

import type { DateTimeFormatOptions, ToISOTimeOptions, ToRelativeOptions, ToSQLOptions, Zone } from 'luxon'

interface OutputOptions {
  locale?: string
  format?: string | DateTimeFormatOptions | Intl.DateTimeFormatOptions
  relative?: ToRelativeOptions
  sql?: ToSQLOptions
  iso?: ToISOTimeOptions
  zone?: string | Zone
}
  • format: The format to use for formatting.

    • Set of Tokens: You can use a set of tokens to define the output format. Tokens represent different parts of the date and time, such as year, month, day, hour, minute, etc. See Tokens for possible values.
    • Template Name: You can specify the name of a predefined template. Templates are predefined formats that can be used to quickly format dates and times. See Templates for possible values.
    • DateTimeFormatOptions: Options for the DateTime format. See DateTimeFormatOptions for possible values.
  • locale: The locale to use for formatting. If not set, the client's locale will be used.

  • relative: Options for the relative format. See Relative for possible values.

  • sql: Options for the SQL format. See SQL for possible values.

  • iso: Options for the ISO format. See ISO for possible values.

Zone

eg: UTC, America/New_York, Asia/Tokyo, ...

For the systems local zone you use local.

There is a list on wikipedia

Locale

Examples:

en: English (primary language). hi: Hindi (primary language). de-AT: German as used in Austria (primary language with country code). zh-Hans-CN: Chinese written in simplified

The client's locale will be used if not set.

Tokens

Tokens are useful for formatting and parsing.

You can use the following tokens:

| Standalone token | Format token | Description | Example | | ---------------- | ------------ | ------------------------------------------------------------ | ----------------------------------------------------------- | | S | | millisecond, no padding | 54 | | SSS | | millisecond, padded to 3 | 054 | | u | | fractional seconds, functionally identical to SSS | 054 | | s | | second, no padding | 4 | | ss | | second, padded to 2 padding | 04 | | m | | minute, no padding | 7 | | mm | | minute, padded to 2 | 07 | | h | | hour in 12-hour time, no padding | 1 | | hh | | hour in 12-hour time, padded to 2 | 01 | | H | | hour in 24-hour time, no padding | 9 | | HH | | hour in 24-hour time, padded to 2 | 13 | | Z | | narrow offset | +5 | | ZZ | | short offset | +05:00 | | ZZZ | | techie offset | +0500 | | ZZZZ | | abbreviated named offset | EST | | ZZZZZ | | unabbreviated named offset | Eastern Standard Time | | z | | IANA zone | America/New_York | | a | | meridiem | AM | | d | | day of the month, no padding | 6 | | dd | | day of the month, padded to 2 | 06 | | c | E | day of the week, as number from 1-7 (Monday is 1, Sunday is 7) | 3 | | ccc | EEE | day of the week, as an abbreviate localized string | Wed | | cccc | EEEE | day of the week, as an unabbreviated localized string | Wednesday | | ccccc | EEEEE | day of the week, as a single localized letter | W | | L | M | month as an unpadded number | 8 | | LL | MM | month as an padded number | 08 | | LLL | MMM | month as an abbreviated localized string | Aug | | LLLL | MMMM | month as an unabbreviated localized string | August | | LLLLL | MMMMM | month as a single localized letter | A | | y | | year, unpadded | 2014 | | yy | | two-digit year | 14 | | yyyy | | four- to six- digit year, pads to 4 | 2014 | | G | | abbreviated localized era | AD | | GG | | unabbreviated localized era | Anno Domini | | GGGGG | | one-letter localized era | A | | kk | | ISO week year, unpadded | 17 | | kkkk | | ISO week year, padded to 4 | 2014 | | W | | ISO week number, unpadded | 32 | | WW | | ISO week number, padded to 2 | 32 | | o | | ordinal (day of year), unpadded | 218 | | ooo | | ordinal (day of year), padded to 3 | 218 | | D | | localized numeric date | 9/4/2017 | | DD | | localized date with abbreviated month | Aug 6, 2014 | | DDD | | localized date with full month | August 6, 2014 | | DDDD | | localized date with full month and weekday | Wednesday, August 6, 2014 | | t | | localized time | 9:07 AM | | tt | | localized time with seconds | 1:07:04 PM | | ttt | | localized time with seconds and abbreviated offset | 1:07:04 PM EDT | | tttt | | localized time with seconds and full offset | 1:07:04 PM Eastern Daylight Time | | T | | localized 24-hour time | 13:07 | | TT | | localized 24-hour time with seconds | 13:07:04 | | TTT | | localized 24-hour time with seconds and abbreviated offset | 13:07:04 EDT | | TTTT | | localized 24-hour time with seconds and full offset | 13:07:04 Eastern Daylight Time | | f | | short localized date and time | 8/6/2014, 1:07 PM | | ff | | less short localized date and time | Aug 6, 2014, 1:07 PM | | fff | | verbose localized date and time | August 6, 2014, 1:07 PM EDT | | ffff | | extra verbose localized date and time | Wednesday, August 6, 2014, 1:07 PM Eastern Daylight Time | | F | | short localized date and time with seconds | 8/6/2014, 1:07:04 PM | | FF | | less short localized date and time with seconds | Aug 6, 2014, 1:07:04 PM | | FFF | | verbose localized date and time with seconds | August 6, 2014, 1:07:04 PM EDT | | FFFF | | extra verbose localized date and time with seconds | Wednesday, August 6, 2014, 1:07:04 PM Eastern Daylight Time | | q | | quarter, no padding | 9 | | qq | | quarter, padded to 2 | 13 |

Full list of tokens can be found here

License

MIT License © 2024-PRESENT Donald Shtjefni