This plugin is a complementary to my previous one that converts from gregorian to hijri dates https://github.com/rkhayyat/nativescript-hijri
Moon Phase plugin allows you show the moon phase for a given date.
tns plugin add nativescript-moon-phase
<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>
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;
}
}
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);
}
Method | Return | Description |
---|---|---|
items |
Date |
Date passed to show the corseponding moon phase image. |
rkhayyat |