Angular Ionic calendar date selector

I'm encountering an issue while trying to implement a time picker with a minimum and maximum hour range from 10:00 am to 10:00 pm. Unfortunately, I have discovered that I cannot achieve this using the ion-datetime component. Are there any alternative solutions available? You can view my demo code on Stackblitz.

HTML

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="hh:mm A" 
                [(ngModel)]="myDate" 
                (ionChange)="setDate()" min="10:00" max="20:00"></ion-datetime>
</ion-item>

Component

myDate; minDate;maxDate;
  datesArray = [];

  constructor() {

      this.minDate = '2020-08-28 10:00';
      this.maxDate = '2020-08-28 20:00'
  }

  setDate() {

    this.minDate = this.myDate;
    this.datesArray.push(this.myDate);
  }
angulartypescriptionic-frameworkionic3ionic4

Answer №1

<ion-content padding>

<ion-item>
  <ion-label>Appointment Date</ion-label>
  <ion-datetime display-timezone="ist" displayFormat="MM/DD/YYYY hh:mm A" 
                [(ngModel)]="selectedDate" 
                (ionChange)="setAppointmentDate()"   hourValues="10,11,12,13,14,15,16,17,18,19,20"></ion-datetime>
</ion-item>


</ion-content>



import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { max } from 'rxjs/operator/max';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {

  selectedDate: any;
  minDate: any;
  maxDate: any;
  appointmentDates = [];

  constructor(private navController: NavController) {
    
  }
  ngOnInit() {
    this.selectedDate = new Date();
    const minDate = new Date();
    minDate.setHours(10, 0, 0, 0);
    this.minDate = minDate.toISOString();
    const maxDate = new Date();
    maxDate.setHours(22, 0, 0, 0);
    this.maxDate = maxDate.toISOString();
  }

  setAppointmentDate() {
    this.minDate = this.selectedDate;
    this.appointmentDates.push(this.selectedDate);
  }
}

Check out the live Demo https://stackblitz.com/edit/ionic-3y23qf

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inheritance of Type Member in TypeScript

My data structure looks like this: export abstract class Person { ... } export class FPerson extends Person { a: A; b: B; } export class JPerson extends Person { c: C; } export class User { person: Person; } When dealing with the s ...

genericsinheritancetypescriptangular

The Enum object in TypeScript has not been declared or defined

For my TypeScript application, I am utilizing WebPack to transpile and bundle the code. The final result is intended to be used in a pure JavaScript website. One of the components in my application is an enum defined as follows: export const enum ShapeTyp ...

javascripttypescriptwebpack

A specialized type that guarantees a string union includes a particular string literal

I need to define a Mapped type that specifies a field named status which can be either a string or the string value ready: This example works as expected: export type ValidServiceState = HasReady<{ status: "ready" }>; The following should ...

typescript

Defining RefObject effectively in TypeScript

Greetings everyone, I am a newcomer to TypeScript and currently attempting to create a type for a RefObject that is of type HTMLAudioElement. However, I have encountered an error message. The error states: Type 'MutableRefObject<HTMLAudioElement> ...

reactjstypescript

The issue persists in VSCode where the closing brackets are not being automatically added despite

Recently, I've noticed that my vscode editor is failing to automatically add closing brackets/parenthesis as it should. This issue only started happening recently. I'm curious if anyone else out there has encountered this problem with their globa ...

jsontypescriptvisual-studio-codegithub-copilot

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide

My basic component includes the following code snippet: import * as React from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; export interface Props { }; @withRouter export default class Movies extends R ...

javascripttypescript

Angular request accessing CoinMarketCap API

Currently, I am immersing myself in the world of the latest CoinMarketCap API and navigating through the waters of data. The Node.js example below demonstrates how to make a request. But how can I achieve the same in Angular? Any tips or suggestions would ...

javascriptnode.jsangularapicoinmarketcap

Is there a way to circumvent the Cors policy in my Spring Boot application once it has been deployed?

I have developed a small website that I am trying to deploy. The backend is built using Spring Boot 3 and the frontend uses Angular 15. However, I am facing an issue where my frontend cannot communicate with the backend due to Cors restrictions. Despite re ...

javaangularspring-bootjwtcors

tsc will automatically incorporate additional files

I'm grappling with a frustrating issue related to tsc that's really getting to me. The problem involves having a file b.ts in the src folder, and another file a.ts in the project root folder. Here is an excerpt of my tsconfig file: { "comp ...

typescripttsctsconfig

Unable to locate the specified nested module during the import process

Imagine a scenario where we have two packages, namely package1 and package2. When package2 attempts to import the module from package1, an error is thrown stating that the module is not found. The import statement in question looks like this: import { ... ...

node.jstypescriptlerna

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Recently, I have been working on implementing a dark mode toggle switch in React Typescript. In the past, I successfully built one using plain JavaScript along with useState and window.matchmedia('(prefers-color-scheme dark)').matches. However, w ...

javascriptreactjstypescriptnext.js

Using the currency pipe with a dynamic variable in Angular 2

My application utilizes CurrencyPipe, The current implementation is functional, <div class="price">{{123 | currConvert | currency:'USD':true:'3.2-2'}}</div> Now, I need to dynamically pass the currency from a model varia ...

angulartypescriptcurrency-pipe

Is it necessary to 'type assert' the retrieved data in Axios if I have already specified the return type in the function declaration?

Consider the code snippet below: import axios from 'axios' async function fetchAPI<T>(path: string, data: any): Promise<T> { return (await axios.get(path, data)).data as T } async function getSomething(): Promise<SomeType> { ...

node.jstypescripttypesaxios

What is the difference between TypeScript's import/as and import/require syntax?

In my coding project involving TypeScript and Express/Node.js, I've come across different import syntax options. The TypeScript Handbook suggests using import express = require('express');, while the typescript.d.ts file shows import * as ex ...

javascriptnode.jsexpresstypescript

When defining functions in Typescript, the new() syntax is used

Can you explain the purpose of the type declaration for dialogComponent in this specific Typescript code snippet? createDialog(dialogComponent: { new(): DialogComponent }) : Promise<ComponentRef<DialogComponent>> { ... } (Referenced from ...

angulartypescript

Making an Angular 6 HTTP GET call using HTTP-Basic authentication

When attempting to access a URL that requires Basic Authentication, and returns JSON data, what is the proper way to include my username and password in the following HTTP request? private postsURL = "https://jsonExample/posts"; getPosts(): Observable& ...

javascriptjsonangulartypescriptrest

Despite providing a type, Typescript continues to display an error claiming that the property 'children' does not exist on the type 'FC<ProvidersProps>'

I have set up the props interface, but I am still encountering an error. Property 'children' does not exist on type 'FC'. 'use clilent' import React, { FC, ReactNode } from 'react' import { Toaster } from 'rea ...

reactjstypescriptnext.js

The operation of multiplying values is not functioning properly in the output field

I'm currently working on a functionality where an output field needs to multiply its value based on the input entered into another field. For example, if the input field is set to 2, then the output field should display the result of multiplying that ...

angularangular-material

sass: node_modules/ionic-angular/themes/ionic.variables.scss

Encountered error during the execution of Ionic Cordova build command sass: node_modules/ionic-angular/themes/ionic.functions.scss Full Error: [11:34:50] sass started ... [11:34:51] sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 35 ...

androidangularionic-framework

The function '() => Promise<T>' cannot be assigned to type 'Promise<T>'

Here is an interface I have: export interface ITreeViewItem { getChildren: Promise<ITreeViewItem[]>; ... Now, let's take a look at the implementation of it: export class MyClass implements ITreeViewItem { public async getChildren() ...

typescriptasync-await