Answers for "time picker ionic"

3

ion input date

<ion-datetime 
	displayFormat="MM/DD/YYYY" 
    min="1994-03-14" 
    max="2012-12-09">
</ion-datetime>
Posted by: Guest on September-21-2020
2

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;
    }
Posted by: Guest on May-11-2020
2

ionic datetime

<ion-item>
  <ion-label>MMMM</ion-label>
  <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>MM DD YY</ion-label>
  <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>YYYY</ion-label>
  <ion-datetime [pickerOptions]="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="stacked">MMMM YY</ion-label>
  <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-item>
Posted by: Guest on May-11-2020
0

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)
);
Posted by: Guest on November-04-2020

Browse Popular Code Answers by Language