如何在IONIC 2中显示日期选择器？

我想在页面加载后立即显示DatePicker。如何在IONIC 2中显示日期选择器？

<DatePicker 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/datePicker" 
     android:layout_gravity="center_horizontal|top" 
     android:headerBackground="?attr/colorPrimary" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     />

我用Android的工作室和上面的代码写来获取输出下面的形象。

我想使用离子2来实现同样的事情，并写下面的代码来获取日期选择器。

import {Component} from '@angular/core'; 
import {DatePicker} from 'ionic-native'; 
import {Calendar} from 'ionic-native'; 
import {Platform} from 'ionic-angular'; 

@Component({ 
    templateUrl: 'build/pages/hello-ionic/hello-ionic.html' 
}) 
export class HelloIonicPage { 



constructor(platform: Platform) { 
    platform.ready().then(() => { 
     let options = { 
     date: new Date(), 
     mode: 'date' 
     } 

    DatePicker.show(options).then(
    date => { 
     alert('Selected date: ' + date); 
    }, 
    error => { 
     alert('Error: ' + error); 
    } 
); 
}); 


} 
}

而即时获取DatePicker如下图所示。

现在我的问题是如何获得与第一张图片相同的DatePicker？

来源

2016-08-10 Santosh Hegde

对不起，我无法缩小图片的大小 –

你可以请你提供一个应用程序，你做只是日历部分将帮助 –

您正在使用Ionic-Native的DataPicker。您可以研究更多关于Ionic-Native的知识，但简单的想法是它包装了用户需要的所有不同的cordova插件以使其更容易。

对于DataPicker，如果您查看源代码，它使用的是cordova-plugin-datapicker的插件。（https://github.com/VitaliiBlagodir/cordova-plugin-datepicker）

在README下，有许多选项可以在初始化DataPicker时选择。该插件只接待定义的Android主题：

androidTheme - Android 
Choose the theme of the picker 
Type: Int 
Values: THEME_TRADITIONAL | THEME_HOLO_DARK | THEME_HOLO_LIGHT | THEME_DEVICE_DEFAULT_DARK | THEME_DEVICE_DEFAULT_LIGHT 
Default: THEME_TRADITIONAL

有关主题的更多信息，你可以看看这个问题，这是在DatePicker的插件打开。（https://github.com/VitaliiBlagodir/cordova-plugin-datepicker/issues/180）由于所有这些主题都基于Android API，因此我还没有看到如何手动更改颜色的任何建议。在插件页面上发布你的问题会很好。

来源

2016-08-12 05:39:16 Huiting

它几乎接近我要找的东西。但它显示为弹出。有什么办法让它在页面上而不是弹出？ –

使用日历从Ionic-Native而不是DatePicker怎么样？ – Huiting

它将用户从当前应用程序导航到日历应用程序。 –

如何在IONIC 2中显示日期选择器？

回答

相关问题