How to get date from datepicker in NativeScript
Here is my view:
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
<StackLayout>
<DatePicker day="15" month="5" year="2015" verticalAlignment="center" id="date"/>
<Label text="Saisissez une heure : " verticalAlignment="center"/>
<TextField verticalAlignment="center" width="300" hint="Enter text..."/>
<Button text="Valider" tap="see"></Button>
</StackLayout>
</Page>
I wanted to know how to get the date from this datepicker, I tried this:
var viewModule = require("ui/core/view");
var dialogs = require("ui/dialogs");
var page;
exports.onPageLoaded = function(args) {
page = args.object;
};
exports.see = function() {
dialogs.alert(viewModule.getViewById( page, "date" ).year).then(function() {
});
};
but it didn't work.
Thanks for answering.
+3
source to share
3 answers
Try using getViewById method on page variable. Your DatePicker is inside your page variable, which - according to the docs - is a derived type of the View class that contains the getViewById method.
Changing your "see" method how this should probably work (haven't tested it myself):
exports.see = function() {
dialogs.alert(page.getViewById("date").year).then(function() {
});
};
+3
source to share
The code for Nativescript and Ang.2 looks like this. Note that the code is for 2 datepickers per modal.
import {Component, OnInit, ElementRef, ViewChild} from "@angular/core";
import {ModalDialogParams} from "nativescript-angular/modal-dialog";
import {DatePicker} from "ui/date-picker";
import {Page} from "ui/page";
import {View} from "ui/core/view";
import {Label} from "ui/label";
import {DialogOptions} from "ui/dialogs";
@Component({
selector: 'modal-content',
template: `
<StackLayout>
<StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center" orientation="vertical">
<Label text="From"></Label>
<DatePicker #datePickerID [year]="dtyear2" month="2" day="2" verticalAlignment="center" horizontalAlignment="center"> </DatePicker>
</StackLayout>
<StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center" orientation="vertical">
<Label text="To"></Label>
<DatePicker #datepicker [year]="dtyear" [month]="dtmonth" [day]="dtday" verticalAlignment="center" horizontalAlignment="center"></DatePicker>
</StackLayout>
<StackLayout orientation="horizontal" horizontalAlignment="center" verticalAlignment="center" marginTop="12">
<Button text="Save" (tap)="close('Save')"></Button>
<Button text="Cancel" (tap)="close('Cancel')"></Button>
</StackLayout>
</StackLayout>
`
})
export class DateControlComponent {
// <DatePicker id="datePicker" [(ngModel)]='datePicker' verticalAlignment="center" horizontalAlignment="center"></DatePicker>
public dtyear = 1970;
public dtmonth = 1;
public dtday = 18;
dtyear2 = 1970;
@ViewChild("datePickerID") datePicker: ElementRef;
//public datePicker: datePickerModule.DatePicker = new datePickerModule.DatePicker();
//prompt: string;
constructor(private params: ModalDialogParams) {
//this.prompt = params.context.promptMsg;
}
ngOnInit() {
}
public close(result: string) {
if (result == "Save") {
let datePickerView = <DatePicker>this.datePicker.nativeElement;
console.log("Year " + this.dtyear);
console.log("Year from NGModel Year " + datePickerView.year);
this.params.closeCallback(new Date(datePickerView.year, datePickerView.month, datePickerView.day));
}
else {
this.params.closeCallback(null);
}
}
}
+3
source to share
FYI - {N} updated from this post and this no longer works from 1.0+
There is a decent example in the docs: Binding Example
var count = 0;
function buttonTap(args) {
count++;
var sender = args.object;
/// ****IMPORTANT var ****///
var parent = sender.parent;
if (parent) {
///*** ref the parent var above ****///
var lbl = view.getViewById(parent, "Label1");
if (lbl) {
lbl.text = "You tapped " + count + " times!";
}
}
}
exports.buttonTap = buttonTap;
0
source to share