nativescript-moon-phase
Nativescript Plugin to show photo of the moon phase according to the passed date
npm i --save nativescript-moon-phase
- Version: 1.0.0
- GitHub:
- NPM: https://www.npmjs.com/package/nativescript-moon-phase
- Downloads:
- Last Day: 0
- Last Week: 0
- Last Month: 0
Nativescript moon phase plugin
This plugin is a complementary to my previous plugin that converts from gregorian to hijri dates https://github.com/rkhayyat/nativescript-hijri
Nativescript-moon-phase
Moon Phase plugin allows you show the moon phase for a given date.
Installation
tns plugin add nativescript-moon-phase
Usage
Typescript NativeScript
XML
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:customControls="nativescript-moon-phase"
loaded="pageLoaded" class="page">
<StackLayout class="p-20">
<customControls:MoonPhase items="{{ DateValue }}" />
<DatePicker id="date" loaded="onPickerLoaded" dateChange="onDateChanged" verticalAlignment="center">
</DatePicker>
<Button text="Valider" tap="see"></Button>
</StackLayout>
</Page>
main-view-model
import {Observable} from 'tns-core-modules/data/observable';
import {Hijri} from 'nativescript-moon-phase';
export class HelloWorldModel extends Observable {
public monthText : string;
public DateValue: Date;
constructor(currentDate) {
super();
this.DateValue = currentDate;
}
}
main-page
import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { DatePicker } from "tns-core-modules/ui/date-picker";
import {HelloWorldModel} from './main-view-model';
var view = require("ui/core/view");
var MainViewModel = require("./main-view-model");
let page;
// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
page = <pages.Page>args.object;
page.bindingContext = new HelloWorldModel(new Date());
}
exports.see = function(args) {
var sender = args.object;
var parent = sender.parent;
var year = view.getViewById(parent,"date").year;
var month = view.getViewById(parent,"date").month
var day = view.getViewById(parent,"date").day;
var convertDate = new Date(year, month-1, day);
page.bindingContext = new HelloWorldModel(convertDate);
}
API
Methods
Method | Return | Description |
---|---|---|
items |
Date |
Date passed to show the corseponding moon phase image. |
NativeBaguette 🥖
rkhayyat |