nativescript-timepicker-slider
A nativescript api for TimePickerSlider cocoapods ios control
npm i --save nativescript-timepicker-slider
  • Version: 0.1.2
  • GitHub:
  • Downloads:
    • Last Day:   6
    • Last Week:  8
    • Last Month: 31

NativeScript date picker slider plugin

A plugin that enables you to use the cocoapod at https://github.com/rajivnarayana/TimePickerSlider in your native script app.

Installation

Run the following command from the root of your project

$ tns plugin add https://github.com/rajivnarayana/NativeScriptTimePickerSliderPlugin.git

This command automatically install the necessary ios files from the cocoapod github repository and adds as a dependency in your package.json file

Examples

There is an sample application at the folder "Example". To run it (assuming you have nativescript plugin installed globally)

$ sudo npm install typescript -g
$ tsc
$ cd Example
$ tns plugin add ../

Run the application from your mac onto your iOS simulator by typing

$ tns emulate ios --device=iPhone\ 5s

The following code from Example/app/main.xml show you a way to add Time picker to your layout

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:tools="nativescript-timepicker-slider">
<DockLayout stretchLastChild="false" style="background-color: gray">
<tools:TimeIntervalSlider
hour="8"
minute="30"
dock="bottom"
fillColor="#e00000"
strokeColor="#0000e0"
loaded="onSliderLoaded"
/>

</DockLayout>
</Page>

Following code from Exaple/app/main.js shows a way to listen to value changes

function onSliderLoaded(args) {
var slider = args.object;
slider.on(observableModule.Observable.propertyChangeEvent, (args) => {
if (args.propertyName == sliderModule.Slider.valueProperty.name) {
console.log('Do something with the data '+slider.value);
}
}, this);
}

exports.onSliderLoaded = onSliderLoaded;