# Ion-datetime highlightedDates

**URL:** <https://forum.ionicframework.com/t/ion-datetime-highlighteddates/231870>\
**Category:** Ionic Framework\
**Created:** [March 20, 2023, 1:53am UTC](https://forum.ionicframework.com/t/ion-datetime-highlighteddates/231870 "2023-03-20T01:53:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![zsantiago8712](https://avatars.discourse-cdn.com/v4/letter/z/c0e974/32.png) [@zsantiago8712](https://forum.ionicframework.com/u/zsantiago8712)\
**Post date:** [March 20, 2023, 1:53am UTC](https://forum.ionicframework.com/t/ion-datetime-highlighteddates/231870/1 "2023-03-20T01:53:44Z")

</div>

I have been trying to use ion-datetime wit highlightedDates but it gives me ths error:  
PD: im following the documentation.

 ![CleanShot 2023-03-19 at 19.51.07@2x](https://global.discourse-cdn.com/ionicframework/original/3X/4/6/46527a05df8f7679dc20f817f8998628bd244149.png)  
How I can solve it?  
Ionic version: 6.20.9

This is my HTML code  
`<ion-popover #popover side="left" alignment="start" class="pop-over"> <ng-template> <ion-datetime [highlightedDates]="highlightedDates" id="calendar" presentation="date" preferWheel="false" value="2023-03-01" [showDefaultButtons]="false" multiple="true" ></ion-datetime> </ng-template> </ion-popover> `

My typescript Code:  
`  
import { Component, OnInit, ViewChild } from ‘@angular/core’;  
import { ItemReorderEventDetail, IonPopover } from ‘@ionic/angular’;  
export class DatesPage implements OnInit {

public trip: Trip;  
public selectedButton: number = 0;  
private calendarOpened: boolean = false;  
public rangesDates: any = ;  
highlightedDates = [  
{  
date: ‘2023-03-05’,  
textColor: ‘#800080’,  
backgroundColor: ‘#ffc0cb’,  
},  
{  
date: ‘2023-03-10’,  
textColor: ‘#09721b’,  
backgroundColor: ‘#c8e5d0’,  
},  
{  
date: ‘2023-03-20’,  
textColor: ‘var(–ion-color-secondary-contrast)’,  
backgroundColor: ‘var(–ion-color-secondary)’,  
},  
{  
date: ‘2023-03-23’,  
textColor: ‘rgb(68, 10, 184)’,  
backgroundColor: ‘rgb(211, 200, 229)’  
}  
];  
}  
`

---

<div class="post-metadata">

**Author:** ![jonz94](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jonz94/32/127746_2.png) [@jonz94](https://forum.ionicframework.com/u/jonz94)\
**Post date:** [March 20, 2023, 3:07am UTC](https://forum.ionicframework.com/t/ion-datetime-highlighteddates/231870/2 "2023-03-20T03:07:31Z")

</div>

Hi,

The `highlightedDates` was added in Ionic 6.6.0 ([Related PR](https://github.com/ionic-team/ionic-framework/pull/26775)), so you might check if your installed Ionic framework version is greater than 6.6.0

One thing to notice, **the `ionic -v` command will print the version of `@ionic/cli` (6.20.9), not the actual installed Ionic framework version**.

The proper way to check the version number is by using `ionic info` command.

- For example, the following project is using Ionic framework version 5.9.4:  
 ![Screenshot from 2023-03-20 10-48-24](https://global.discourse-cdn.com/ionicframework/original/3X/3/1/31a000345e1e5ad77d13e0f2d5824e0c95f600dc.jpeg)