Novice, Paragon, Master

    nativescript-moon-phase
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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

    Install

    npm i nativescript-moon-phase

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • rakhayyat