https://github.com/shahabganji/aurelia-time
A set of value converters for time and moments in aurelia
https://github.com/shahabganji/aurelia-time
aurelia aurelia-plugins jalali jalali-moment moment moment-timezone momentjs
Last synced: 4 months ago
JSON representation
A set of value converters for time and moments in aurelia
- Host: GitHub
- URL: https://github.com/shahabganji/aurelia-time
- Owner: shahabganji
- License: mit
- Created: 2017-10-29T05:29:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-28T15:05:42.000Z (about 7 years ago)
- Last Synced: 2025-02-06T19:57:01.201Z (4 months ago)
- Topics: aurelia, aurelia-plugins, jalali, jalali-moment, moment, moment-timezone, momentjs
- Language: JavaScript
- Size: 128 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
* [momentjs](https://github.com/moment/moment)
* [jalali-moment](https://github.com/fingerpich/jalali-moment)
* [moment-timezone](https://github.com/moment/moment-timezone)
* [humanizeDuration](https://github.com/EvanHahn/HumanizeDuration.js)
***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
```
2. 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 )
```
``` typescript
export class Home {
languages: Array;
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.*
``` html
Date:
Format:
${myDate|date:myFormat:options.locale}
${myDate|time:false:options.locale}
```
## *2. Moment Timezone*
``` typescript
export class Home {
private selectedTimezone;
private timezones:Array;
constructor(){
this.timezones = [
"Asia/Tehran",
"Asia/Tokyo",
"Europe/London",
'America/Los_Angeles'
];
}
}
```
``` html
Timezone:
${tz}
```
## 3. Humanize Duration
``` html
${361000 |humanize:{language:options.locale}}
```
# Custom Elements
## 1. *Clock*
Inspired by [Codepen](https://codepen.io/gau/pen/LjQwGp)
``` html
```
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**