Skip to content

A set of value converters for time and moments in aurelia

License

Notifications You must be signed in to change notification settings

shahabganji/aurelia-time

Repository files navigation

aurelia-time

This package contains a set of value converters for date and time inspired by four existing libraries which are widely used amongst developers.

The documentation is targeted for the webpack as it is the most favorite module bundler, for other module loaders follow their instructions

We used jalali moment to support Persian/Jalali calendar

Installation

  1. install the package
npm install aurelia-time --save

yarn add aurelia-time
  1. register it as a plugin in the aurelia pipeline
    aurelia.use.standardConfiguration()
        .plugin(PLATFORM.moduleName('aurelia-time'));

Value converters

1. Moment: consists of four value converters :

  * date( value:string, format:string, locale:string )
  * time( value:string, show24Hours:string|boolean )
  * age( value:string )
  * relative( value:string , doAsJalali: boolean )
export class Home {

    languages: Array<any>;

    options: any;

    myDate: string = "1985/01/23";
    myFormat: string = "YYYY/MM/DD MMMM";

    constructor() {
        this.options = {
            locale: "fa" // This line will force value converters to use jalali-moment,locales/languages other than Farsi/Persian such as 'en', 'it', 'fr' etc. will use moment library.
        };
    }
}

Worth to mention than we will use jalali-moment only for Persian/Farsi locale/language, languages other than that will use moment library.

For persian users only: if you use 'fa' locale, you don't need to pass format as j-formats ( jYYYY/jMM/jDD ) to jalali-moment any more, just use like other locals.

<label>
    Date: 
    <input type="datetime" value.bind="myDate" />
</label>
<label>
    Format:
    <input type="text" value.bind="myFormat" />
</label>
<h1 style="direction:ltr">
    <span>
        ${myDate|date:myFormat:options.locale}
    </span>

    <span>
        ${myDate|time:false:options.locale}
    </span>

</h1>

2. Moment Timezone

export class Home {

    private selectedTimezone;
    private timezones:Array<string>;

    constructor(){
        this.timezones = [
                    "Asia/Tehran",
                    "Asia/Tokyo",
                    "Europe/London",
                    'America/Los_Angeles'
                ];
    }
}
 <label>
    Timezone:
    <select value.bind="selectedTimezone">
        <option repeat.for="tz of timezones" value.bind="tz">
            ${tz}
        </option>
    </select>
</label>

<br />

<label textcontent.bind="myDate|timezone:selectedTimezone">
</label>

3. Humanize Duration

<span>
    ${361000 |humanize:{language:options.locale}}
</span>

Custom Elements

1. Clock

Inspired by Codepen

 <au-clock font-size="40" be24-hours="false" date-format="YYYY MMMM DD" locale="fa"
     style="left: 300px; top:200px; position: absolute">
</au-clock>

This custom element consists of four one-time bindable properties:

  • text: string
  • color: string
  • shadowColor: string
  • fontSize: string | number

and six one-way bindable properties:

  • locale: string
  • dateFormat: string
  • be24Hours: string | boolean
  • showDate: string | boolean
  • showTime: string | boolean
  • showText: string | boolean

Any contribution will be welcome