Disabling dates in the second datetimepicker depending on following days selected in the first one

I have implemented the bootstrap date picker and I am using two textboxes for searching by date range. I want the second textbox to display the days after the date selected in the first textbox. Any suggestions would be appreciated.

Here is the HTML code:

<form action="{{url('search/ticket')}}" method="get">
    <div class="col-md-6 col-sm-4">
        <input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
    </div>
    <div class="col-md-6 col-sm-4">
       <input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
       <button type="submit" class="basic-button">Submit</button>
    </div> 
</form>

And here is the JavaScript code:

<script type="text/javascript">
 $(document).ready(function () {
    $('.timepickerfrom').datetimepicker({
        format: 'YYYY-MM-DD',
    });

    $('.timepickerto').datetimepicker({
        format: 'YYYY-MM-DD',
    });
  });
  </script>  

Answer №1

To properly handle manual input, use the change event on the input rather than relying on the changeDate event which is specifically for datepicker changes.

Consider implementing the following code:

$(document).ready(function () {
    $('.timepickerfrom').datepicker({
        format: 'yyyy-mm-dd',

    }).on('changeDate', function(selected){

        var minDate = new Date(selected.date.getTime());
        $('.timepickerto').datepicker('setStartDate', minDate);
    });

    $('.timepickerto').datepicker({
        format: 'yyyy-mm-dd',
    });

});

Answer №2

If anyone needs assistance, I have discovered the answer.

It goes by the name of linked datepicker

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

Successful Ajax response notification

I am new to using ajax and I want to implement a .post method with an if condition to notify the user of its success or failure. Here is my code for .post: $.post("ajaxRegistering.php",{ name: name, lastname: lastname, ...

I am having an issue with my jQuery form submission not sending any POST variables

My code seems to be having issues as the PHP file is not receiving the POST-variables. I am unsure of what could be going wrong, so I am reaching out for some guidance. Here is the HTML: <div id="preloader" class="preload"></div> <div id=" ...

Is it possible to automatically refresh a webpage with the same URL when accessed on the same server?

Is there a way to trigger a URL page refresh using JS code located on the same server? For example, I have a URL page open on multiple devices connected to the same server. How can I ensure that when I click 'Update,' the page refreshes simultan ...

Having difficulty importing the WebRTCAdaptor from the antmedia package stored in the node modules directory into an Angular Typescript file

An error is appearing indicating that: There seems to be a problem finding a declaration file for the module '@antmedia/webrtc_adaptor/js/webrtc_adaptor.js'. The file 'D:/web/node_modules/@antmedia/webrtc_adaptor/js/webrtc_adaptor.js' ...

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS

Currently, I am working with a Material-UI's <Table> embedded within a <div>. My goal is to center the <Table> while maintaining a fixed width. I want the table to remain centered in the browser, but if the browser window is minimize ...

Returning a Response in HapiJS Routes from Incoming Requests

Currently, I am facing an issue with the request module where I am able to successfully make a request and receive a response. However, I am struggling to figure out how to pass this response back to my route in order to return it to my client. Here is th ...

Regular expressions: understanding greedy versus lazy quantifiers

Imagine this situation: a = 'one\\two\\three.txt'; The desired output is "three.txt". However, the attempted solution of: a.match(/\\(.+?)$/) is unsuccessful. What could be causing this issue? How can we successf ...

struggling to update an array with user inputs on my to-do list app

I'm currently in the process of creating a small to-do list with some specific functionality. I want each text input (or a copy of it) to be added to an empty string, ensuring that the original input remains unchanged. The goal is to have a function t ...

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

Changing the direction of scrolling in AngularJS

I'm currently working on an Ionic / Angular application and I've come across a situation where I need to change the scroll direction when scrolling. Usually, when you scroll down, the content moves down as well. However, I want to achieve the opp ...

React Timer App: The setInterval function is being reset after each render operation

I'm currently working on a straightforward timer application that will begin counting seconds when a button is clicked. To implement this, I am utilizing react hooks. import React, { useState } from 'react' function Timer() { const [sec ...

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 30px; } <p>Down arrow: <i class="arrow down"></i></p> Looking to ...

Selenium is encountering a validation error when selecting a value from a Drop Down menu

My current project involves automating website testing through selenium. I have encountered a scenario where I need to fill in a mandatory drop-down field. The code snippet I am using to select the drop-down value is as follows: select = Select(find_eleme ...

TabPanel with Grid component causes Error: The server-rendered UI does not match the initial UI, resulting in failed hydration

After completing all the necessary steps and transferring all the files from nextjs-with-typescript, everything seemed to be in order until I tried adding Grid inside the TabPanel in the code snippet below: import * as React from 'react'; Tabs fr ...

option for uploading various data to the database using (php, ajax)

I am using a foreach loop to display data from the database on the screen. However, when I click the button, I do not see any results. Can someone please help me identify where I may be making mistakes? <table class="table"> <thead class="the ...

What is the best way to extract the elements within a form using Angular and automatically add them to a list?

Recently, I started learning Angular and decided to create a simple list feature. The idea is to input an item name and price, then click "Add item" to see it added to the list below. I have all the code set up correctly, but for some reason the name and ...

Ways to showcase INPUT TYPE when making a Selection?

I've been struggling with a simple issue and despite trying multiple solutions, I can't seem to get it right. I have a form where I'm using the <select> tag with two options: coo and uh. What I want is for an additional input type fiel ...

What could be the reason for a Python server receiving a JSON message as None?

I'm a beginner in web programming and currently trying to grasp the concept of sending messages between a Python server and a JavaScript client. After stumbling upon a helpful guide at , I learned how to set up a Python server using Flask and send re ...

Is it possible to connect a JavaScript file to an HTML document within a React application?

I have been developing a React website with the following file structure: public: index.html second.html src: index.js second.js table.js forms.js The main page (index.js) contains both a form and a table. One of the columns in the table has a link t ...

Forwarding images from a server to a client using socket.io and node.js

I am encountering an issue where I am trying to receive an image via socket.io in node.js and then forward it to a client (browser). However, the image sent through the message to the browser is not being recognized or displayed. Interestingly, if I save ...