ionic 5 time picker code example
Example 1: ionic picker
<ion-button expand="block" onclick="openPicker()">Show Single Column Picker</ion-button>
const defaultColumnOptions = [
[
'Dog',
'Cat',
'Bird',
'Lizard',
'Chinchilla'
]
]
const multiColumnOptions = [
[
'Minified',
'Responsive',
'Full Stack',
'Mobile First',
'Serverless'
],
[
'Tomato',
'Avocado',
'Onion',
'Potato',
'Artichoke'
]
]
async function openPicker(numColumns = 1, numOptions = 5, columnOptions = defaultColumnOptions){
const picker = await pickerController.create({
columns: this.getColumns(numColumns, numOptions, columnOptions),
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Confirm',
handler: (value) => {
console.log(`Got Value ${value}`);
}
}
]
});
await picker.present();
}
function getColumns(numColumns, numOptions, columnOptions) {
let columns = [];
for (let i = 0; i < numColumns; i++) {
columns.push({
name: `col-${i}`,
options: this.getColumnOptions(i, numOptions, columnOptions)
});
}
return columns;
}
function getColumnOptions(columnIndex, numOptions, columnOptions) {
let options = [];
for (let i = 0; i < numOptions; i++) {
options.push({
text: columnOptions[columnIndex][i % numOptions],
value: i
})
}
return options;
}
Example 2: Datepicker ionic
import { DatePicker } from '@ionic-native/date-picker/ngx';
constructor(private datePicker: DatePicker) { }
...
this.datePicker.show({
date: new Date(),
mode: 'date',
androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
}).then(
date => console.log('Got date: ', date),
err => console.log('Error occurred while getting date: ', err)
);