DateTime formatting & parsing in Vue using Luxon

vue-luxon

Easy use of datetime with Luxon in Vue.

Install

npm install vue-luxon

Setup

import VueLuxon from "vue-luxon";
Vue.use(VueLuxon);

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

Change the default settings:

Vue.use(VueLuxon, {
    input: {
        zone: "utc",
        format: "iso"
    },
    output: "short"
});

Learn more about settings

Basic usage

You can use the $luxon method everywhere in your vue app:

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

Or use the luxon filter, as shown below:

{{ "2020-10-05T14:48:00.000Z" | luxon }}
// October 5, 2020

You can change the output format:

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

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

And other settings:

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

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

Settings

Default settings

You can change the default settings with the second argument of the Vue.use function.

Vue.use(VueLuxon, {
  templates: {},
    input: {
        zone: "utc",
        format: "iso"
    },
    output: {
        zone: "local",
        format: {
            year: "numeric",
            month: "long",
            day: "numeric"
        },
        lang: null,
        relative: {
            round: true,
            unit: null
        }
    }
});

You can also override the default settings per method/filter easily:

{{ datetimeString | luxon({ settings }) }}
this.$luxon({ settings })

Zone

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

For the systems local zone you use local.

There is a list on wikipedia

Formats

Input and Output formats

These formats can be used as input.format and output.format

Output formats

These formats can only be used as output.format

output.format can also be an object:

// using an object:
format: {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
}

settings.input

object or string

An objectcontaining a zone and format or a string of a template name.

{
	zone: "utc",
	format: "iso"
}

settings.output

object or string

An objectcontaining a zone and format or a string of a template name.

{
    zone: "local",
    format: "short",
    lang: "",
    relative: {} // see settings.relative
}

lang language tag set to null will use the client's language.

relative Read about the relative format below

settings.output.lang

string

null default value, this will use the client's language.

Or use a language tag to set a client location.

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

settings.output.relative

Set the output.format to relative to use the relative format. Or use the luxonRelative filter.

{{ datetime | luxonRelative }}
this.$luxon({ output: { format: "relative" } })

{{ datetime | luxonRelative({ style: "short" }) }}
this.$luxon({ output: { format: "relative", relative: { style: "short" } } })

You can change the behavior with the relative settings object in theoutput` .

{
    output: {
        format: "relative"
        relative: {
            style: "long",
            unit: null,
            round: true,
            padding: 0
        },
    }
}

Templates

You can predefine setting templates.

By default there is a server, client and a inputdate template, but you can add your own to the options object.

It's also possible to use a template in a template, as the inputdate uses the client template's zone for example.

templates: {
    server: {
        zone: "utc",
        format: "iso"
    },
    client: {
        zone: "local",
        format: "short"
    },
    inputdate: {
        zone: "client",
        format: "yyyy-MM-dd"
    }
}

There are multiple ways to use a template:

// This will use the templates zone and format
{{ "2020-10-05T14:48:00.000Z" | luxon({ input: "server" }) }}

// This will use the templates zone
{{ "2020-10-05T14:48:00.000Z" | luxon({ input: { zone: "client" } }) }}

Or you can set the default input and output in the Vue.use function to use these templates by default:

Vue.use(VueLuxon, {
    input: "server",
    output: "client",
});

Or create custom templates to use everywhere:

Vue.use(VueLuxon, {
	templates: {
		serverAMS: {
			zone: "Europe/Amsterdam",
			format: "dd-MM-yyyy HH:mm:ss"
		},
        serverUTC: {
			zone: "UTC",
			format: "yyyy-MM-dd HH:mm:ss"
		},
        clientAMS: {
            zone: "Europe/Amsterdam",
			format: "med"
        }
	},
    input: "serverUTC",
    output: "clientAMS",
});

Tokens

Tokens are useful for formatting and parsing.

You can use the following tokens:

Change the $luxon method name

Provide a methodName in the settings object.

GitHub