https://github.com/rkhayyat/nativescript-moon-phase

Nativescript UI plugin to show the moon phase Image depending on the passed date
https://github.com/rkhayyat/nativescript-moon-phase

angular nativescript nativescript-plugin

Last synced: about 2 months ago
JSON representation

Nativescript UI plugin to show the moon phase Image depending on the passed date

• Host: GitHub
• URL: https://github.com/rkhayyat/nativescript-moon-phase
• Owner: rkhayyat
• License: other
• Created: 2017-10-10T07:15:42.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-08T14:24:23.000Z (about 7 years ago)
• Last Synced: 2024-11-13T12:40:55.308Z (about 2 months ago)
• Topics: angular, nativescript, nativescript-plugin
• Language: TypeScript
• Homepage:
• Size: 2.62 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/nativescript-moon-phase.svg)](https://www.npmjs.com/package/nativescript-moon-phase)

[![npm](https://img.shields.io/npm/dt/nativescript-moon-phase.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-moon-phase)

[![twitter: @rakhayyat](https://img.shields.io/badge/twitter-%40rakhayyat-2F98C1.svg)](https://twitter.com/rakhayyat)

[![NPM](https://nodei.co/npm/nativescript-moon-phase.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/nativescript-moon-phase/)

# Nativescript moon phase plugin

This plugin is a complementary to my previous one 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

```javascript

tns plugin add nativescript-moon-phase

```

## Usage 

## Typescript NativeScript

### XML

```xml

  

  

    

    

    

  

```

### main-view-model

```typescript

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

```typescript

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 = 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 🥖

[](https://github.com/rkhayyat) |

:---: |

[rkhayyat](https://github.com/rkhayyat)  |