如何在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中顯示日期選擇器？

回答

相關問題