Ensure that the Ajax calendar extender does not allow the selection of past dates

I'm currently using an ajax calendar extender along with JavaScript to prevent users from selecting past dates. However, I'm encountering a problem:

  • When the user selects a past date, it works correctly
  • If the user chooses a future date, it also works fine

However, if the user selects the current date, they still receive an alert, which is unnecessary.

My objective is to allow users to select the current date and future dates, but prohibit them from entering any prior dates. Can someone assist me in resolving this issue? Below is the code snippet for reference:

<div id="formload" >
    <!-- ============================== Fieldset 1 ============================== -->
    <fieldset>
        <legend>Enter Date</legend>
        <table>
        <tr>
        <td><label for="input-one" class="float"><strong>Date</strong></label>
        </td><br />
        <td><asp:TextBox ID="txtDate" runat="server" CssClass="inp-text" Width="300px"></asp:TextBox> </td>
        <td><asp:Image runat="server" ID="btnDate2" AlternateText="cal2" ImageUrl="~/App_Themes/Images/icon_calendar.jpg" />
            <ajaxtoolkit:calendarextender runat="server" ID="calExtender2" Format="dddd, MMMM dd, yyyy" PopupButtonID="btnDate2" TargetControlID="txtDate"  OnClientDateSelectionChanged="CheckDateEalier" /> </td>
        </tr></table>

    </fieldset>
    <!-- ============================== Fieldset 1 end ============================== -->

Javascript

    <script type="text/javascript">
        function CheckDateEalier(sender, args)
            {
                if (sender._selectedDate < new Date())
                 {
                    alert("Day earlier than today cannot be selected.");
                    sender._selectedDate = new Date();
                    sender._textbox.set_Value(sender._selectedDate.format(sender._format))
                }
            }

</script>

Answer №1

In order to resolve the issue where the date is the same but the time is different, it is crucial to set the hours, minutes, seconds, and milliseconds to zero. Only then will the solution work properly.

<script type="text/javascript>
            function VerifyDate(sender, args) {
                var currentDate = new Date();

                var selectedDate = sender._selectedDate;

                currentDate.setMinutes(0);
                currentDate.setSeconds(0);
                currentDate.setHours(0);
                currentDate.setMilliseconds(0);

                selectedDate.setMinutes(0);
                selectedDate.setSeconds(0);
                selectedDate.setHours(0);
                selectedDate.setMilliseconds(0);

                if (selectedDate > currentDate) {

                    alert("The issue date of the ticket must be later than the current date.");
                    sender._selectedDate = currentDate; // Return selected date to current date
                    sender._textbox.set_Value(sender._selectedDate.format(sender._format));

                }             
            }

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

Increase the width of the div to extend it to the right side of the

After analyzing the issue, it seems like the solution lies in extending the wrapper div to the right side of the page without any wrapping. Whenever I attempt to set the width to 100vw or 100%, the content within the div gets pushed below all the other ele ...

eslint is designed to not handle multiple package.json files

There are two package.json files in my project root folder └ app ---- /public └ /styles └ /src └ package.json └ eslintrc.json └ webpack.config.js └ server - /something └ /something ...

AngularJS directive error: Incorrect function invoked

I have two similar scenarios where I need to apply validators for specific files, even though I am aware that this goes against the DRY principle. However, being new to AngularJS, I am still learning the ropes. module.js var $moduleExample = angular.modu ...

Forwarding to another page following an AJAX post request to a Django view

I've been struggling to get this basic piece of code to work properly, despite trying numerous resources. I can't seem to pinpoint where I'm going wrong. Essentially, I have a javascript function submitData() that is supposed to make an ajax ...

Ways to execute multiple queries in ReactJS using AWS Amplify

I'm having trouble querying multiple Dynamo databases in React.js. I initially attempted to define each component in separate classes and import them, but that didn't work. Then I tried defining both components in the same class, which resulted i ...

When utilizing CKEditor in conjunction with ExpressJS, HTML tags may be displayed in the browser

Check out my app.js code below: <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0> <meta http-equiv="X-UA-Compatible" content="ie= ...

The error message "ReferenceError: obj is not defined using webcomponents & polymer" indicates that the object

I am diving into the world of web components for the first time with this project, and my knowledge of js/jquery is quite limited. I'm encountering an issue and I'm unsure why it's happening. I've created a custom element in "search-fo ...

Choose a Vue filter according to the variable selected

My Current Table Dilemma Creating a table from a 2D array in Vue2 has been successful for me, as I've managed to display all the values correctly. However, I am facing issues with formatting. The template code is structured like this: <table> ...

The RxJs Observer connected to a websocket only triggers for a single subscriber

Currently, I am encapsulating a websocket within an RxJS observable in the following manner: this.wsObserver = Observable.create(observer=>{ this.websocket.onmessage = (evt) => { console.info("ws.onmessage: " + evt); ...

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

I recently made a decision to develop a wizard form using HTML 5 (specifically ASP.NET MVC). Below is the structure of my HTML form: @using (Html.BeginForm()) { <div class="wizard-step"> <input type="text" name="firstname" placeholder ...

What is the recommended method for transmitting input data using AJAX to a controller in a post

I am facing an issue with my AJAX search input. Despite multiple attempts, it still fails to work. I suspect the problem lies in the data not being sent to the controller accurately, resulting in missing query details. How can I resolve this issue? I am u ...

Securing Angular 2+: Safeguarding Server-Side Lazy Loaded Modules

In my Angular 2+ application, users input personal data that is then analyzed in a different section of the app restricted to authorized personnel. The challenge lies in preventing unauthorized individuals from gaining insight into the analysis process. We ...

Update dynamically generated CSS automatically

Is there a way to dynamically change the CSS? The problem I'm facing is that the CSS is generated by the framework itself, making it impossible for me to declare or modify it. Here's the scenario at runtime: https://i.sstatic.net/IovGr.png I a ...

The Intersection Observer API is not compatible with using transform: translateX()

After successfully implementing the Intersection Observer API on my website and incorporating a few transitions from an example I came across, everything seemed to be working smoothly. You can view the scale-in transition in action here: https://jsfiddle.n ...

Inject the JSON data fetched through AJAX into Datatables

I have been successfully using the datatables plugin to populate multiple tables with data. However, I realized that instead of making separate AJAX calls for each table, I could optimize by fetching the data once and storing it in a variable to be used by ...

``on click of the back button of the browser, automatically submit the form

I'm facing a specific issue that I need help with. I have created a form with a hidden value, and I want it to be submitted when the user clicks the browser's back button. Although I've managed to control the backspace key, I haven't be ...

Implementing Material-UI’s FlatButton and Dialog in ReactJS for dynamic TableRow functionality

I am working with Material-UI and have implemented a <Table> component. Each dynamically rendered <TableRow> in the <TableBody> needs to include a button (<FlatButton>) within one of the columns. When this button is clicked, a <D ...

Unlocking the npm package event emitter on the client side in Meteor

Having some trouble with a seemingly basic issue. I came across an NPM package called LOG-WATCHER (used as an example) which keeps an eye on a specific log file on a client's local file system. This package emits events such as 'START', &apo ...

Recreate body content with JQuery Mobile

I've been attempting to duplicate the entire HTML content within the tags. However, even though the appearance on screen is correct, none of the links are functioning.</p> <p>To view the fiddle, click here: [Here is a fiddle][1]</p> ...

serializeArray encounters difficulty in locating certain input elements

I've created this HTML layout: <div class="col-md-12"> <div class="form-group"> <label>Mini description (displaying the latest added destinations and meta description)</label> <textarea class="for ...