proceed to another page after choosing specific dates for submission

Question

proceed to another page after choosing specific dates for submission

I have created the following code to build a booking calendar. I would like it so that when I click on submit, it will redirect to a different page by navigating. The function should check if the start date is greater than the current date and the end date is greater than the start date - if true, then navigate to a different page.

Thank you in advance!

<div class="container">
  <div class="row-center">
    <div class="jumbotron">
      <div class="row">
        <div class="col-md-4 col-sm-4">
          <h4 class="red">Start Date</h4>
          <input name="start" type="date" class="form-control " placeholder="Start date">
        </div>
        <div class="col-md-4 col-sm-4">
          <h4 class="red">End Date</h4>
          <input name="end" type="date" class="form-control" placeholder="End date">
        </div>
        <div class="col-md-3 col-sm-2">
          <input id="btnOpen" class="btn btn1 btn-success" type="submit" value="Submit">
        </div>
      </div>
    </div>
  </div>
</div>

angular typescript angular5

Answer 1

Answer №1

I couldn't locate any click-triggered method in the example you provided.

If you're unsure how to implement it, I can guide you through it.

Revise your HTML as follows:

<input id="btnOpen" class="btn btn1 btn-success" type="submit" value="Submit" (click)="submitClicked()">

In your .ts file, create a function that will execute upon button click. This function is named submitClicked(). Here's an example of what the code could look like:

submitClicked() {
  // Implement the logic for this function to execute when the submit button is clicked
  // You may need something along these lines
  if(todayDate > start && todayDate < end){
    // Redirect to another page
  }
}

If you're uncertain about comparing dates or navigating to another page, consider searching online for more information.

Given the lack of clarity in the question and considering your experience level, I've broken down the steps to help you grasp the concept and proceed independently.

Answer 2

I couldn't locate any click-triggered method in the example you provided.

If you're unsure how to implement it, I can guide you through it.

Revise your HTML as follows:

<input id="btnOpen" class="btn btn1 btn-success" type="submit" value="Submit" (click)="submitClicked()">

In your .ts file, create a function that will execute upon button click. This function is named submitClicked(). Here's an example of what the code could look like:

submitClicked() {
  // Implement the logic for this function to execute when the submit button is clicked
  // You may need something along these lines
  if(todayDate > start && todayDate < end){
    // Redirect to another page
  }
}

If you're uncertain about comparing dates or navigating to another page, consider searching online for more information.

Given the lack of clarity in the question and considering your experience level, I've broken down the steps to help you grasp the concept and proceed independently.

proceed to another page after choosing specific dates for submission

Answer №1

Similar questions

Unraveling the Mysteries Behind the .next() Method in Angular

tips for fetching information from sources beyond observable patterns

Issue: The parameter "data" is not recognized as a valid Document. The input does not match the requirements of a typical JavaScript object

Pass the identical event to multiple functions in Angular 2

Adding an Icon in p-autoComplete with PrimeNG in Angular 10

Tips for implementing a reusable component in Angular 2

Tricks for simulating e.preventDefault in Angular

Can you explain the mechanics behind the functionalities of @angular and @type dependencies?

Issue with displaying selected value and options in Mat-select when using formarray - Reactive forms in Angular

The alignment of navbar links to the right is off in Bootstrap 4 and Angular 5

What is the best way to extract and display data from an API response object in my

What is the best way to customize column width in AG-Grid?

What are the necessary peer dependencies for Angular-compatible projects?

Troubleshooting the issue with mocking the useTranslation function for i18n in JEST

Choose all the checkboxes that use Knockout JS

I'm perplexed as to why I'm receiving null for my context. Could it be due to a TypeError

Incorporating a skeletal design effect into a table featuring sorting and pagination options

Unexpected expression after upgrading to TypeScript 3.7.2 was encountered, file expected.ts(1109)

When attempting to retrieve information from the API, an error occurred stating that property 'subscribe' is not found in type 'void'

Deploying an Angular-cli project to Digital Ocean