Date input using manual typing format

I've implemented the ng-pick-datetime package for handling date selection and display. By using

dateTimeAdapter.setLocale('en-IN')
in the constructor, I have successfully changed the date format to DD/MM/YYYY. However, I'm facing an issue where even though the calendar picker displays dates in the correct format, manually typing a date such as 03/28/2019 is still accepted. I want to restrict input to only accept the DD/MM/YYYY format whether it's typed or selected from the calendar. Can someone help me with this?

Code:

<input (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>
<owl-date-time class="" [pickerType]="'calendar'" [startView]="'multi-years'" #dt1></owl-date-time>

import { DateTimeAdapter } from 'ng-pick-datetime';
constructor(dateTimeAdapter: DateTimeAdapter<any>){dateTimeAdapter.setLocale('en-IN');}

Answer №1

If you're looking to validate your input, there are a variety of methods you can use. I have come up with a solution for your specific issue.

https://example.com/validation-solution

In order to address your requirements, I have set the type of input as "text", defined the pattern as "DD/MM/YYYY", and implemented background CSS to indicate the validity status of the input field.

<input type="text" pattern="^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$" (ngModelChange)="onUpdateDate($event)" [(ngModel)]="dateOfBirth" name="dob" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>

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

Tips for implementing and utilizing onclick functions in EJS

My goal is to develop a trivia game with interactive features. I aim to enable users to click on an answer, which will trigger a border effect and increase the points variable. Below is the layout of the entire page: <% include ../partials/boilerp ...

What is the best method for transmitting additional information to an API?

Hey everyone, I'm currently struggling to send the shipping address to api/checkout. I attempted to send the body as an object with the cart details and shipping address as object properties, but that approach didn't yield any results. Is there a ...

In order to utilize the componentDidUpdate lifecycle method, I passed props to the Outlet component while nesting it

I am currently using react-router-v6 and encountering some issues with my configuration. I have implemented nested routing with layouts according to the following settings. App.js <BrowserRouter> <Routes> <Route exact pat ...

Reduce the amount of time it takes for a Google AdWords Script to generate a

According to Google Script best practices, it is recommended to store operations in an array and then call the methods once all the operations have been constructed. This helps minimize response time each time a service is called. For example, let's ...

Expanding the Number of Arguments Sent to a Callback Function

I have a scenario where I am using a method that sends a POST request and then triggers a specific callback function to manage the response: myService.verify(id, verificationCallback); function verificationCallback(err, response) { ... } My query is two ...

Challenge with JWT Tokens

In my application, I am utilizing a Node.JS express backend along with an Angular 4 frontend. The user ID is stored in JWT tokens, which do not expire. Here is the scenario: The user logs in. A JWT Token is generated and signed (containing the user ID). ...

Assign a variable with the value returned by a function

Can you help me with this question I have about validating fields with a function using AbstractControl? errorVar: boolean = false function(c: AbstractControl): {[key: string]: string } | null { // validation if 'test' is true or not goes here ...

Setting up a reverse proxy in Angular 2: A step-by-step guide

My project setup includes: "start": "gulp serve.dev --color", In my service class, I have the following code snippet: this.mapUrl = @apiproxy return this.http.post(this.mapUrl, body, { headers: this.headers }) The Proxy.config.json file contains: { "/ ...

Encountering repeated requests (duplicating calls) for each API request while using AngularJS with a JWT authentication token

I'm experiencing a problem with AngularJS(2/4) while attempting to make API calls. The issue arises when each API request contains a JWT Auth Token header, resulting in duplicate API calls. The first request returns no response (despite receiving a 20 ...

Exploring the Response Object in Express JS: A Comprehensive Guide

I'm currently using Express version 4.13.4. My goal is to access and examine the res object. However, when I try to use console.log() on it, the output is too lengthy to display properly in a command window. I attempted to utilize jsonfile to save i ...

Having difficulty accessing the 'makeCurrent' property of an undefined object in Angular mobile application

I have followed the steps outlined in the Angular mobile toolkit guide found at https://github.com/angular/mobile-toolkit/blob/master/guides/cli-setup.md My Node version is v4.4.3 NPM version is 2.15.1 The issue arises when I run the command $ ng serve, ...

There seems to be an issue with node.js - headers cannot be set after they have already been sent to

As I work on developing my blog, I've encountered an issue with rendering different paths using the router parameter. Each time I attempt to display another route, an error surfaces. Unfortunately, I'm unable to provide more details at this momen ...

Issue with accessing custom read/write location during runtime in ngx-translate HTTP loader

After logging in, I need to load JSON files and then download a file at a specific location using a custom HTTP loader (TranslateHttpLoader). The assets/i18n/ folder is not writable with fileSystemModule.knownFolders.currentApp(), so I tried using fileSyst ...

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

Divergent functionality of Angular's ng-content when the select attribute is employed

While it is common knowledge that using ng-content projects content only in the last matched ng-content, what baffles me is why it behaves differently when using select and projects content only into the first one. First Child Component 1 <ng-content s ...

Utilizing JavaScript for loops to extract the final element from an array

I am facing an issue with the second loop within a function that goes through a JSON file. The problem is that it only returns the last item in the array. I need to figure out how to fix this because the chart object should be created on each iteration, ...

View the selected radio buttons and checkboxes next to each other in real-time before finalizing and submitting

Within my form, individuals have the option to select from radio buttons and checkboxes. The challenge is that I need to display the chosen data on the page before they enter their email and submit! Since I cannot refresh the page, PHP won't work for ...

Updating a d3.js force-directed graph may retain previous JSON data during the reloading process

Having a d3.js force-directed graph that pulls data from a JSON feed, I encounter an issue when clicking on a node. Although the updated JSON is correct, the displayed graph does not reflect this new data. It seems like the graph is retaining previous info ...

An action in redux-toolkit has detected the presence of a non-serializable value

When I download a file, I store it in the payload of the action in the store as a File type. This file will then undergo verification in the saga. const form = new FormData(); if (privateKey && privateKey instanceof Blob) { const blob = new Blo ...

What is the best way to toggle the visibility of my menu using JavaScript?

I recently implemented a script to modify a CSS property in my nav bar as I scroll down, triggering the change after reaching 100px. $(window).scroll(function() { var scroll = $(window).scrollTop(); //console.log(scroll); if ...