Is there a way to prevent users from selecting dates and times prior to today, as well as blocking out the hours of 9:00am

Users are required to select a date within the range of today's date and one month in the future, and a time between 9:00am and 9:00pm. How can I implement validation to ensure this?

 <div class="row">
  <div class="col">
  <label class="item item-input item-stacked-label">
    <span class="input-label">Date</span>
    <input type="date"  ng-model="bookdate" name="bookdate" >
  </label> 
    
  </div>
  <div class="col">
   <label class="item item-input item-stacked-label">
    <span class="input-label" >Time</span>
    <input type="time" ng-model="booktime" name="booktime">
  </label>
   
   </div>  
 </div>

javascriptangularjsperformance

Answer №2

Take a look at the details below for understanding input[date] and input[time].

Date: input[date]:

Detailed parameters: min (optional) string - Specifies the minimum value allowed, triggering a validation error if the entered value is less than min. The value must be in the format of a valid ISO date string (yyyy-MM-dd).

Implementation:

<label class="item item-input item-stacked-label">
    <span class="input-label">Date</span>
    <input type="date" ng-model="bookdate" name="bookdate" max="{{bookdate | bookdate:'yyyy-MM-dd'}}" max="{today}">
  </label>

To set the current day as today, update your controller with:

var today = new Date();
$scope.today = today.toISOString();

Time: input[time]:

Implementation:

<label class="item item-input item-stacked-label">
    <span class="input-label">Time</span>
    <input type="time" ng-model="booktime" name="booktime" min="09:00:00" max="21:00:00">
  </label>

I trust this information proves to be beneficial for you.

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

Encountered an error while running npm run dev on a Laravel Vue 3 project: opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

I am facing an issue in my Laravel 9 Vue 3 project. When I run php artisan serve and then npm run dev, I encounter the following error: opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'di ...

javascriptvue.jsnpm

What is the best approach to decipher an obfuscated JavaScript file?

While browsing a site, I came across a javascript file that appears like this: eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,Str ...

javascript

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

javascripthtmlcss

Error with replacing regular expressions in IE11 for the variable $0

Having both a string and a message: str = "Test $0 $1 $2"; message = "Hi %2 Hello %2" ; The goal is to replace all occurrences of %2 with str in the message using RegExp, like so: message = message.replace(new RegExp("%2" , "g"), str); While this works ...

javascriptregexinternet-explorer-11

C# - Issue with Webbrowser failing to fully load pages

I am facing an issue with loading pages completely on the web browser, likely due to heavy usage of JavaScript. To address this problem, I have integrated another browser into the project called Awesomium. I am wondering if Awesomium supports using getEle ...

javascriptc#getelementbyidawesomiuminvokescript

"Clicking on the hamburger menu causes the webpage to reset its scroll

I recently integrated a mobile hamburger menu into my website, which is primarily built around a single page. However, I noticed that whenever I open the menu, it automatically scrolls to the top of the page regardless of where you were previously scrollin ...

javascriptjqueryhtml

Add video details to the database using the API

I currently have my own database of YouTube videos which includes the video IDs found in the video links. My goal is to find a way to insert both the title and description of these videos into the database using the YouTube API and MySQL. Although I have ...

javascriptmysqlnode.jsdatabaseyoutube-data-api

What could be causing my ajax post function to malfunction when triggered by a button click event?

My attempts to send variables to a PHP file via AJAX when a button is clicked have been unsuccessful. Upon checking my PHP page, I noticed that the variables were not being received. $(document).ready(function(){ $("#qryBtn").click(function(){ ...

javascriptphpjqueryajaxformshttp-post

Creating a Cubic Bezier Curve connecting two points within a 3D sphere using three.js

I'm currently working on a project where the user can click on two points on a sphere and I want to connect these points with a line along the surface of the sphere, following the great circle path. I have managed to obtain the coordinates of the sele ...

javascriptthree.jsbezier

Incorporate Object names and Variable names in Javascript programming

I have an object named res and a variable named lea. I need to concatenate. For example: let lea = "abc"; let res = { abc:'steve' }; console.log(res.lea); So my output should be steve. I tried it like this: console.log(res.`${lea}`); ...

javascriptjqueryobjectvariablesjavascript-objects

The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

Could someone please explain why I am unable to iterate through this array? Initially, everything seems to be working fine in the ngOnInit. I have an array that is successfully displayed in the template. However, when checking in ngAfterViewInit, the conso ...

javascriptangulartypescriptfor-loopforeach

Problems with Material UI autocomplete causing destruction of Redux-form values

I'm facing an issue with integrating Material UI's autocomplete component into a Redux wizard form. Although I successfully linked the autocomplete feature, I encountered a problem when navigating back to the second page where the autocomplete f ...

javascriptreactjsreact-reduxmaterial-uiredux-form

Is there a way to use fetch() to automatically redirect a user after logging in?

I'm currently working on a node.js application using express, and I am in the process of creating a login form for my users. I want to include a Javascript file that utilizes fetch() to send a POST request to my API for user authentication. However, I ...

javascriptnode.jsexpresshttp-redirectfetch

CSS positioning with absolute value + determine the number of elements positioned above

Is it feasible to adjust the position of an absolutely positioned element based on the height of the element above it? The objective is to align elements with the class "pgafu-post-categories" one line above an H2 heading, even when the lengths v ...

javascripthtmljquerycss

Filtering multiple rows in a table using Javascript

I'm currently working on creating a filter that can filter based on multiple inputs, with each input filtering in a separate column. Here is the JavaScript & code I am using: function myFunction(column, input) { var filter, table, tr, td, i, t ...

javascriptjqueryhtml-tabledom-events

"Enhancing website performance with JavaScript by leveraging DOM innerHTML scrollHeight

Here is a two-part question I have: The first part of the question: test A: t1 = new Date().getTime(); for (i=0; i<205; i++) { document.getElementById("divTest").innerHTML = sText; } t2 = new Date().getTime(); ...

javascriptperformancedominnerhtml

Iterating over an array of lists to tally the elements

I've been struggling to count the number of objects in an array using JavaScript. Below is the array I'm trying to work with: <script> var arr = [ {"gateways":["ccu1"],"manufacturer":["homematic"],"ir":["ir_no"],"ip":["ip_cam", ...

javascriptarraysjsonloopsif-statement

The variable _spPageContextInfo has not been defined, resulting in a ReferenceError

The code in my JavaScript file looks like this: var configNews = { url:_spPageContextInfo.webAbsoluteUrl, newsLibrary: 'DEMONews', listId: '' }; // Attempting to retrieve the List ID $.ajax({ url: configNews.url + "/_a ...

javascriptajaxangularjssharepoint-2013

Repurposing React key usage

section, I am curious to know if it is standard practice to reuse a React key from one component to another. For instance, in the Row component, the key obtained from the Column component is reused for mapping the children of Row. const Table = props =& ...

javascriptreactjs

Managing cookies with ReactJs: A guide to setting, storing, and updating cookies without deleting the existing ones

How can I create a cookie that stores input values when the user submits a form, and updates the cookie without removing previously saved data on subsequent submissions? export default function saveToCookie() { const [ name, setName ] = useState('&a ...

javascriptreactjscookies