Method render

core/src/components/datetime/datetime.tsx:2744–2804

()

  }

  render() {
    const {
      name,
      value,
      disabled,
      el,
      color,
      readonly,
      showMonthAndYear,
      preferWheel,
      presentation,
      size,
      isGridStyle,
    } = this;
    const mode = getIonMode(this);
    const isMonthAndYearPresentation =
      presentation === 'year' || presentation === 'month' || presentation === 'month-year';
    const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
    const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
    const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
    const hasWheelVariant = hasDatePresentation && preferWheel;

    renderHiddenInput(true, el, name, formatValue(value), disabled);

    return (
      <Host
        aria-disabled={disabled ? 'true' : null}
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        class={{
          ...createColorClasses(color, {
            [mode]: true,
            ['datetime-readonly']: readonly,
            ['datetime-disabled']: disabled,
            'show-month-and-year': shouldShowMonthAndYear,
            'month-year-picker-open': monthYearPickerOpen,
            [`datetime-presentation-${presentation}`]: true,
            [`datetime-size-${size}`]: true,
            [`datetime-prefer-wheel`]: hasWheelVariant,
            [`datetime-grid`]: isGridStyle,
          }),
        }}
      >
        {/*
          WebKit has a quirk where IntersectionObserver callbacks are delayed until after
          an accelerated animation finishes if the "root" specified in the config is the
          browser viewport (the default behavior if "root" is not specified). This means
          that when presenting a datetime in a modal on iOS the calendar body appears
          blank until the modal animation finishes.

          We can work around this by observing .intersection-tracker and using the host
          (ion-datetime) as the "root". This allows the IO callback to fire the moment
          the datetime is visible. The .intersection-tracker element should not have
          dimensions or additional styles, and it should not be positioned absolutely
          otherwise the IO callback may fire at unexpected times.
        */}
        <div class="intersection-tracker" ref={(el) => (this.intersectionTrackerRef = el)}></div>
        {this.renderDatetime(mode)}