feat: ion-datetime with date range

[Spinnenzunge]

Feature Request

It would be great if the new ion-datetime would support a range feature (like for example in a hotel booking webpage) where you can provide a start and enddate and it shows on the calendar component.

Ionic version:

[ ] 4.x
[ ] 5.x
[x] 6.x

[jonatanmartinbabel]

We really need this, as long as we don't have this feature I still need to use tools external to Ionic

[Coder7777]

it's a very useful feature. we need it also.

[reslear]

any news ?

[Weebsenpai]

We really need this, as long as we don't have this feature I still need to use tools external to Ionic

which external things are you using . I want to show multiple date range in same calendar is there any way you are aware about.

[j238]

We really need this, as long as we don't have this feature I still need to use tools external to Ionic

which external things are you using . I want to show multiple date range in same calendar is there any way you are aware about.

https://www.npmjs.com/package/ion2-calendar
It's cool

[phyr0s]

@liamdebeasi @willmartian almost one year from this request . Any news?

[reslear]

is for vue, use https://vcalendar.io/datepicker.html

[jeremyw189]

Not a great solution but this is what I am doing in Angular. It allows me to select one date or all dates between two selected dates.

HTML

<ion-datetime (ionChange)="dateChange()" [multiple]="true" [(ngModel)]="dateStrings" presentation="date"></ion-datetime>

TS

  // The value (one or multiple date strings).
  dateStrings: string[];

  // Cached values (used to prevent infinite date change events).
  private currentDateStrings: string[];

  dateChange() {
    // Detect changes (prevents an infinite loop).
    if (this.currentDateStrings === this.dateStrings) { return; }

    // Make sure we have at least two dates (otherwise nothing to do).
    if (!(this.dateStrings?.length > 1)) { return; }

    // Sort the dates so the earliest one is first.
    this.dateStrings.sort((a, b) => {
      if (a > b) { return 1; }
      else if (a < b) { return -1; }
      else { return 0; }
    });

    // Revert to single selection (if required).
    if (this.currentDateStrings?.length > 2) {
      for (const d of this.currentDateStrings) {
        if (this.dateStrings.indexOf(d) === -1) {
          // Make sure this is not the first or last date (those are handled natively).
          if (d === this.currentDateStrings[0]) { break; }
          if (d === this.currentDateStrings[this.currentDateStrings.length - 1]) { break; }

          this.dateStrings = [d];

          // No need to continue.
          break;
        }
      }
    }

    // Store the new value.
    const newValue = [];

    // Add all dates between the first and second dates.
    for (let d = new Date(this.dateStrings[0]); d <= new Date(this.dateStrings[this.dateStrings.length - 1]); d.setDate(d.getDate() + 1)) {
      newValue.push(this.getDateString(d));
    }

    // Update the values at the end so the UI gets updated only once.
    this.dateStrings = newValue;
    this.currentDateStrings = newValue;
  }

[Prabin1111]

any update about the ion-date-range range?

[enjoycod1ng]

Is there any update about this feature?

[reslear]

updates?

[liamdebeasi]

Hi everyone,

We do not have any updates regarding this feature. Any updates will be posted on this thread as we have them.

[enjoycod1ng]

Hi everyone,

We do not have any updates regarding this feature. Any updates will be posted on this thread as we have them.

Thanks, I have one question regarding a custom date range component which I'm making now.
I'm adding styles for the days in the range of dates but couldn't update UI when press the month next, prev buttons.
Could you possibly let me know how can I resolve this issue?

[codeforward101]

Also very interested in an update to this. Thanks.

[Ilijan91]

any update?

[extrordinaire]

Hello! Is there any update???

[jlaci87]

Hello! Is there any update???

[andres-espinoza]

At work we managed the range selection this way (using Ionic v7, Vue3 + TypeScript and Luxon):

Using the component

  <CustomDateRange
    id="datetime-filter" // Using a ion-datetime-button to open it
    min="2023-01-01T00:00:00"
    :start="startDate"
    :end="endDate"
    @update:start="(d) => (startDate = d)"
    @update:end="(d) => (endDate = d)"
  />
  
  const startDate = ref<string>('2023-10-01');
  const endDate = ref<string>('2023-10-23');

The component

<template>
  <ion-datetime
    class="clink-date-time-range"
    presentation="date"
    locale="es-ES"
    multiple
    :value="currentUserSelection"
    v-on:ion-change="handleDateChange"
    :highlighted-dates="defineHighlightStyle"
    v-bind="$attrs"
  />
</template>
<script setup lang="ts">
import { IonDatetime, DatetimeChangeEventDetail } from '@ionic/vue';
import { IonDatetimeCustomEvent, DatetimeHighlightCallback } from '@ionic/core';
import { onMounted, ref } from 'vue';
import { DateTime } from 'luxon';

interface ClinkDatetimeRange {
  start: string;
  end: string;
}

const props = defineProps<ClinkDatetimeRange>();
const emit = defineEmits<{
  (e: 'update:start' | 'update:end', date: string): void;
}>();

const currentUserSelection = ref<string[] | undefined>();
const previousUserSelection = ref<string[] | undefined>();

onMounted(() => {
  const initRange: string[] = [props.start, props.end];
  currentUserSelection.value = previousUserSelection.value = initRange;
});

const defineHighlightStyle: DatetimeHighlightCallback = (date: string) => {
  if (!currentUserSelection.value || currentUserSelection.value.length < 2)
    return;
  const startDateCurrentRange = DateTime.fromFormat(
    currentUserSelection.value[0],
    'yyyy-MM-dd'
  );
  const endDateCurrentRange = DateTime.fromFormat(
    currentUserSelection.value.at(-1) as string,
    'yyyy-MM-dd'
  );
  const formattedDate = DateTime.fromFormat(date, 'yyyy-MM-dd');
  const isDateWhithinRange =
    formattedDate > startDateCurrentRange &&
    formattedDate < endDateCurrentRange;

  if (isDateWhithinRange)
    return {
      backgroundColor: '#4818f717',
    };
};

const handleDateChange = (
  e: IonDatetimeCustomEvent<DatetimeChangeEventDetail>
) => {
  currentUserSelection.value = e.detail.value as string[] | undefined;

  if (!currentUserSelection.value && !previousUserSelection.value) return;

  if (!currentUserSelection.value || currentUserSelection.value.length < 2)
    return;

  currentUserSelection.value = [...currentUserSelection.value].sort((a, b) =>
    a > b ? 1 : -1
  );

  if (previousUserSelection.value && previousUserSelection.value.length >= 2) {
    const isSelectionWhithinPreviousRange =
      currentUserSelection.value.length < previousUserSelection.value.length;

    if (isSelectionWhithinPreviousRange) {
      const selectedDateWhithinPreviousRange =
        previousUserSelection.value.filter(
          (date) => !(currentUserSelection.value as string[]).includes(date)
        );
      currentUserSelection.value = selectedDateWhithinPreviousRange;
    } else {
      const lastUserSelection = [(e.detail.value as string[]).at(-1) as string];
      currentUserSelection.value = lastUserSelection;
    }
  }

  previousUserSelection.value = currentUserSelection.value;
  emit('update:start', currentUserSelection.value[0]);
  emit('update:end', currentUserSelection.value.at(-1) as string);
};
</script>

[lukasrgr]

did anybody manage to do this with angular 17?

[djabif]

did anybody manage to do this with angular 17?

I'm using the library @googlproxer/ion-range-calendar with Angular 17 and Ionic 7 and it works like a charm.

[lukasrgr]

@djabif is there a example to look at? cant seem to get it running

[djabif]

@lukasrgr sorry but I can't share the code of this app but I can help you with the integration if you have any specific question

[sabrio]

This is essential for a framework, please have this consider.

[jprules321]

This needs to be added.

[Valvillavel]

Realmente necesitamos esto, mientras no tengamos esta característica, todavía necesito usar herramientas externas a Ionic

¿Qué cosas externas estás usando? Quiero mostrar varios rangos de fechas en el mismo calendario, ¿hay alguna forma que usted sepa?

https://www.npmjs.com/package/ion2-calendar Es genial

Is that component available for Angular Ivy?

[invot]

We really need this, as long as we don't have this feature I still need to use tools external to Ionic

which external things are you using . I want to show multiple date range in same calendar is there any way you are aware about.

https://www.npmjs.com/package/ion2-calendar It's cool

Doesn't this one only have official support for ionic 2, 3 & 4? Can you get it working on ionic 8?

[LennonReid]

We really need this, as long as we don't have this feature I still need to use tools external to Ionic

which external things are you using . I want to show multiple date range in same calendar is there any way you are aware about.

https://www.npmjs.com/package/ion2-calendar It's cool

Doesn't this one only have official support for ionic 2, 3 & 4? Can you get it working on ionic 8?

Hey there, I've upgraded this component to work with Ionic 6 and beyond. Feel free to check out the preview and the source code.

[danyal-satti]

i ma using ionic with standalone and i am getting problem with dayjs,any comment on it

[moh4sa]

Do you have any tentative date for this feature?
It is an essential feature for a calendar component. even angular material supports it check it out here: link

[Weebsenpai]

I have solution for this range feature if you need please reply to mail with Need Solution I will share files using which I made this feature work Thankyou Mohit Chouhan

…

On Sun, 21 Jul 2024 at 3:22 PM, Mohammed Alshehri ***@***.***> wrote: Do you have any tentative date for this feature? It is an essential feature for a calendar component. even angular material supports it check it out here: link <https://material.angular.io/components/datepicker/examples> — Reply to this email directly, view it on GitHub <#23572 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AT7RRZCHPDFXIV5KBTPHVNLZNOAGFAVCNFSM47WJQOL2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMRUGE2TIOBYG44A> . You are receiving this because you commented.Message ID: ***@***.***>

[PaulliDev]

2024 Ionic 8 still no talks about this feature?

[reslear]

I think they don't want to support it because it's not in apple.

but I would pay attention to the design https://github.com/simla-tech/Fastis

[vicatcu]

Dang it, I would switch from ion7-calendar to this if only this feature were implemented. It seems like the localization features of the ionic component are better, but the inability to pick a range of dates is a deal-breaker. 👎

[muuvmuuv]

This one just saved me here, thanks @djabif https://github.com/HalleyAssist/ion-range-calendar. It is also compatible with latest Angular release, standalone etc woow!

[howlettga]

Creating a date range is super easy with the existing ion-datetime component (I guess released feb 22). You can just maintain a start and end date state and manipulate the highlightedDates array based on the user selection.

However, I can't figure out a way to manipulate the underlying CSS of the calendar day objects to "connect" the highlighted days like in some of the above screenshots. It would be awesome if Ionic could just expose radius and padding custom css properties or add some option in the DatetimeHighlightStyle interface.

[carlosflai]

Creating a date range is super easy with the existing ion-datetime component (I guess released feb 22). You can just maintain a start and end date state and manipulate the highlighted dates array based on the user selection.

Yes! I had the same idea with the "highlightedDates" after reading the documentation. The CSS part can be handled with CSS. Now I wonder why they haven't added a range prop to the datetime component being that easy.

[Yaaawei]

Happy new year! Is there any update?

[yhunglee]

It's so much people wanted. Can Ionic official make this feature-wish come true in ionic 8? 🙏

[daviozolin]

This is so important! Would be great to have this.

[WongSIuWing]

Need this.

[Saqib92]

May 2025 still waiting

[reslear]

for vue developer its easy use https://reka-ui.com/docs/components/range-calendar
nuxt: https://ui.nuxt.com/components/calendar#range

[djabif]

For angular, I'm using @googlproxer/ion-range-calendar with Angular 19 and Ionic 8 and it works like a charm. The integration is very straight forward if you follow their docs.

If you have any specific question let me know and I can try to help you.

[Saqib92]

For angular, I'm using @googlproxer/ion-range-calendar with Angular 19 and Ionic 8 and it works like a charm. The integration is very straight forward if you follow their docs.

If you have any specific question let me know and I can try to help you.

I am also using this package and it works well. But having a feature embedded in a Framework will be better