Validating time selection for exceeding limits

I'm looking to implement time checking in my project but I'm unsure how to proceed. I have 3 different operation hours for my shop, outlined as follows: Operation hour 1: Open at 08:30 and close at 12:30 Operation hour 2: Open at 14:30 and close at 17:30 Operation hour 3: Open at 20:30 and close at 23:30

My goal is to create a validation system where the opening time cannot be greater than the closing time. Additionally, each subsequent operation hour should start after the previous one ends. You can view my code demo on StackBlitz

I would appreciate it if anyone could provide a clean and efficient method to achieve this.

HTML

<ion-content padding>
   // HTML code block here 
</ion-content>

Component

setDate() {
    console.log(this.open);
  
  }
angulartypescriptionic-frameworkdatepicker

Answer №1

index.html

<ion-row style="margin-top: 20px; ">
            <ion-col size="4">
                <ion-label style="color: blue; ">Session Time 1:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="time-range" (ionChange)="setTime(1)" displayFormat="HH:mm" [(ngModel)]="start1" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="blue"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="time-range" (ionChange)="setTime(1)" displayFormat="HH:mm" [(ngModel)]="end1" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
                </ion-col>
        </ion-row>
        <ion-row style="margin-top: 20px; ">
           
            <ion-col size="4">
                <ion-label style="color: blue; ">Session Time 2:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="time-range" (ionChange)="setTime(2)" displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="start2" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="blue"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="time-range" (ionChange)="setTime(2)" displayFormat="HH:mm"  pickerFormat="HH:mm" [(ngModel)]="end2" min="15:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
                </ion-col>
        </ion-row>
        <ion-row style="margin-top: 20px; ">
           
            <ion-col size="4">
                <ion-label style="color: blue; ">Session Time 3:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="time-range" (ionChange)="setTime(3)" displayFormat="HH:mm" [(ngModel)]="start3" min="17:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Start "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="blue"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="time-range" (ionChange)="setTime(3)" displayFormat="HH:mm" [(ngModel)]="end3" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="End "></ion-datetime>
                </ion-col>
        </ion-row>

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

Which rxjs operator functions similarly to concatmap, but delays the firing of the next request until the current one is completed?

Imagine if I need to make multiple api calls with a high risk of encountering race conditions. If I send 3 requests simultaneously to update the same data on the server, some of the information could be lost. In order to prevent this data loss, I want to ...

angularrxjsrxjs5

Keep an ear out for updates on object changes in Angular

One of my challenges involves a form that directly updates an object in the following manner: component.html <input type="text" [(ngModel)]="user.name" /> <input type="text" [(ngModel)]="user.surname" /> <input type="text" [(ngModel)]="use ...

javascriptangulartypescript

Issue - Unrecognized listen EADDRINUSE :::5432 detected in Windows Command Prompt

I encountered an issue when I tried running gulp serve --nobrowser, resulting in the following error: { Error: listen EADDRINUSE :::5432 at Object._errnoException (util.js:992:11) at _exceptionWithHostPort (util.js:1014:20) at Server.setupListenHandle [as ...

reactjstypescriptgulpnode-modules

Collaborate and apply coding principles across both Android and web platforms

Currently, I am developing a web version for my Android app. Within the app, there are numerous utility files such as a class that formats strings in a specific manner. I am wondering if there is a way to write this functionality once and use it on both ...

javascriptjavaandroidtypescriptweb

One component in Angular 4 facing difficulty in invoking a function from another component

I am currently working on incorporating a side navigation for a datatable in Angular 4. Here is the code snippet I have for this implementation: <mat-sidenav-container class="example-container"> <mat-sidenav #sidenav mode="over" position=" ...

angular

troubleshooting angular universal with HTTPS

My angular universal app is all set up and running smoothly for POST requests on the server-side using localhost to pre-render my app. An example of a working URL would be http://localhost:8000/api/get-info. However, things took a turn when I deployed the ...

node.jsapacheangularexpressuniversal

Unable to log in with password after hashing using React, NodeJS, and mySQL

I've implemented a salt and hash function to secure my password. Strange thing is, I can't log in using the original password, but it works when I use the hashed password from the database. Salt: "HashedPasswordCheck" Hash Function: function has ...

mysqlnode.jsreactjstypescriptredux

What events can cause all store states to be loaded when the page is altered?

I am currently utilizing ngrx/store, ngrx/effects, and ngrx/router. The implementation of my effects is structured as follows: @Effect() loadOneProduct$ = this.updates$ .whenAction(LOAD_ONE_PRODUCT) .switchMap(() => this.productService.loadOn ...

typescriptangularrxjs5ngrx

Angular Observable does not reflect updates automatically

I have a unique service that I utilize to pass on a particular value so that it is easily accessible to all components requiring it: setAnalysisStatus(statuses: AsyncAnalysis[]) { this.analysisStatus.next(statuses); } In ...

angularobservablebehaviorsubject

Angular successfully compiled without any issues despite the explicit cast of a number into a string variable

As I delve into the initial concepts of Angular, I have come across a puzzling situation. Here is the code snippet: import { Component } from '@angular/core'; @Component({ selector: 'sandbox', template: ` <h1>Hello {{ nam ...

javascriptangulartypescript

Display live updates in Angular that synchronize seamlessly on multiple devices

Currently developing an Angular app and seeking a way to display the latest list of users in table format in real time on all devices whenever a new user is added from any device. Any suggestions or tips would be greatly appreciated. Thank you ...

angularreal-timeangular6angular2-changedetection

Is there a specific event or callback in MSAL-Angular that can be triggered upon completion of the signup process

Incorporating MSAL-Angular into our application, we are curious if there is an event or callback that triggers once a user successfully signs up, similar to the "msal:loginSuccess" event. ...

angularazure-ad-msalmsal.js

Is there a way to solely expand the type declarations from a separate class?

Imagine we have two distinct classes X and Y with 77 property-type declarations in common, but their methods, including constructors, are different: class X { public prop1: number; public prop2: string; //... public prop77: "hello"; constructor(){ th ...

typescript

TypeScript does not pay attention to additional properties in the return type of the setState function

I'm completely lost here. I don't understand why typescript allows me to return anything in the setFormValidation call as long as I include the prevState spread in the return object. It seems to ignore all other properties that I return in the ob ...

reactjstypescriptsetstatetypechecking

What is the correct way to assign a property to a function's scope?

Lately, I've been delving into Typescript Decorators to address a specific issue in my application. Using a JS bridge to communicate TS code between Android and iOS, we currently define functions as follows: index.js import foo from './bar' ...

javascripttypescripttypescript-decorator

What is the best way to apply a consistent set of values when altering fields conditionally in dynamically generated fields within Angular?

I just finished developing a dynamic row that consists of 2 dropdowns and a text field. Users have the ability to add or remove additional rows as needed. There is a specific condition in place: if the first dropdown value is 'Date' and the seco ...

angularangular-reactive-forms

Ensure the validity of the dropdown selection by checking the Angular Material error in the object

Hello there, Typically, I usually store the drop down value as a string, like this: <mat-form-field> <mat-select name="searchReloadType2" placeholder="reload to" required #searchReloadType2="ngModel" [(ngMod ...

angularstringobjectmat-selectmat-error

Is it possible to configure TypeScript (or a tool similar to ESLint) to throw an error when a library returns undefined?

Currently working with knex and sometimes it returns any, for example when forgetting to specify the table type in the query. Are there any recommended tools available to avoid this issue, ensuring all knex queries are typed properly? ...

typescripteslint

Exploring Angular 5: Injecting a Service in Unconventional Places

I am attempting to utilize a service outside of a component. My main objective is to use my service within a function wrapped in a data object that I would then pass to my router for use by my Breadcrumb later on. Here is an example of what I envision: ...

angular

Exploring the Power of TextEncoding in TS 2.8 within the Angular 6 Environment

I'm facing a challenging issue while trying to import TextEncoding in TS 2.8. I have installed it using npm and attempted to import it like this: import { TextDecoder } from 'text-encoding'; Alternatively, import { } from 'text-encod ...

angularvisual-studiotypescript