如何从NativeScript的日期选择器中获取日期

Question

这是我的观点:

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

我想知道如何从这个日期选择器中获取日期，我尝试了以下方法：

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() {

    });
};

但是它没有起作用。

感谢您的回答。

- EmmaLat

Answer 1

Nativescript和Ang.2的代码如下。请注意，此代码适用于模态框中的2个日期选择器。

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);
        }

    }
}

- Bhail

---

这看起来非常有帮助。你能否添加一个如何使用该组件的示例吗？ - Ross Bradbury

Answer 2

尝试在您的页面变量上使用getViewById方法。 您的DatePicker位于页面变量内，根据文档，它是View类的派生类型，其中包含getViewById方法。

这样更改您的“see”方法可能有效（我自己没有测试过）：

exports.see = function() {
    dialogs.alert(page.getViewById("date").year).then(function() {

    });
};

- Robert Kruis

---

它没有起作用，我什么也没得到。当我执行“page.getViewById（“date”）。toString（）”时，我得到了日期选择器，但是年份属性没有被获取。如果我理解正确，日期选择器继承自视图类，但是当我们调用“page.getViewById（“date”）”时，我们获取的是一个视图对象，不是吗？ - EmmaLat

我已经找到解决方案，我需要执行以下操作："page.getViewById("date").year.toString()" 来获取日期。 - EmmaLat

顺便说一句，它起作用了，但要在警告框中显示它，我必须使用toString。 - EmmaLat

Answer 3

提醒 - {N} 已经更新，因此此帖子不再适用于1.0+版本

文档中有一个不错的示例：绑定示例

   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;

- Brad Martin