nativescript-moon-phase

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