nativescript-moon-phase
Nativescript Plugin to show photo of the moon phase according to the passed date
npm i --save nativescript-moon-phase

npm npm twitter: @rakhayyat

NPM

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 🥖

Rachid Al Kayat
rkhayyat