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

install the package

npm install aurelia-time --save

yarn add aurelia-time

    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

shahabganji/aurelia-time