Update the month in the second date picker to align with the selection made in the first date picker within the Angular framework

Is it possible to dynamically change the month of the second datepicker based on the selection made in the first date picker? Currently, it is displaying the current date by default. For example: If I select 15-10-2104 from the first date picker, the second date picker should automatically start with the date 15-10-2014. All previous dates should be disabled.

I am using Angular Bootstrap Datepicker and below is the code snippet:

<label>Start Date <span class="required"></span></label>

<div class="seldate startdate calender-icon nopadding">
    <input type="text" datepicker-popup="dd-MMMM-yyyy"
           ng-model="info.startDate"
           required
           name="startDate" tabindex="4" 
           placeholder="dd/mm/yyyy"
           is-open="startDate.open"
           ng-click="startDate.open = true"
           min-date="minDate" datepicker-options="dateOptions"
           date-disabled="disabled(date, mode)"
           close-text="Close" class="form-control"/>
</div>
</div>

<div class="col-sm-6 form-group">
    <label>End Date <span class="required"></span></label>

    <div class="seldate startdate calender-icon nopadding">
        <input type="text" datepicker-popup="dd-MMMM-yyyy"
               ng-model="info.endDate"
               required

               name="endDate" tabindex="5"
               placeholder="dd/mm/yyyy"
               is-open="endDate.open"
               ng-click="endDate.open = true"
               min-date="scheduleInfo.startDate" datepicker-options="dateOptions"
               date-disabled="disabled(date, mode)"
               close-text="Close" class="form-control"/>
    </div>

</div>

Answer №1

Implement ng-change on the initial datepicker to establish the minimum date for the second datepicker.

ng-change="setMinEndDate()"

$scope.setMinEndDate = function() {
    var endDate = angular.copy($scope.info.startDate);
    endDate.setDate(endDate.getDate());
    $scope.scheduleInfo.startDate = endDate;
};

Trust this information proves useful.

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 transforming promise function into rxjs Observables in Angular 10

As a beginner in typescript and angular, I am trying to understand observables. My query is related to a method that fetches the favicon of a given URL. How can I modify this method to use observables instead of promises? getFavIcon(url: string): Observ ...

Display a list of dates within a specified range using the ng

Utilizing the ng-repeat directive to connect data with a filter for name search: <div ng-repeat='myoldrecs in myoldrec | filter:q as results '>......</div> $scope.myoldrec = [{name:ccc,date:13-02-2016},{name:ddd,date:14-02-2016}]; &l ...

Having trouble with PHP not receiving data when using a $.ajax POST request?

I'm facing an issue where my code seems to be correctly passing a JavaScript variable to PHP. On the JavaScript side, everything works fine - I receive success messages and see the data in the network tab. However, on the PHP side, I am unable to retr ...

The Magic of jQuery Cross Site Fetch

It seems like this should be simple, but I am having trouble figuring it out... I'm using jQuery to fetch a remote page from a different server, grab the HTML content, and then insert that content into a hidden DIV. However, when I try to do this wit ...

Encountering RangeError with the Number() function on my express.js server

I'm working with an HTML form that looks like this: <form class="" action="/" method="post"> <input type="text" name="num1" placeholder="First Number"> <input type= ...

Steps for transforming an array into a complex array

Here is an array I have: [2, 1, 2, 1, 1, 1, 1, 1] I am looking for a way to create new arrays within the original array when the sum of values exceeds four. The desired result should look like this: [[2,1],[2,1,1],[1,1,1]] ...

Exploring the possibilities of utilizing JavaScript within TypeScript

My dynamic javascript object holds all the resources (translation strings) for my app. Here's how it is structured: var ResourceManager = (function () { function ResourceManager() { var currentLanguage = $('#activeLanguage').htm ...

Challenges with managing controllers within Directives

Currently, I am in the process of updating some code within a personal project that utilizes Angular to adhere to best practices. I have come across suggestions that the future direction of Angular involves incorporating a significant amount of functionali ...

Is Window.navigator malfunctioning on different browsers in Mac OS?

I'm attempting to access the navigator function in my project to share a specific URL, but I'm facing difficulties accessing it on Mac OS when using browsers other than Safari. Is there a solution to this issue? Below is the function I created f ...

Modify the name of the document

I have a piece of code that retrieves a file from the clipboard and I need to change its name if it is named image.png. Below is the code snippet where I attempt to achieve this: @HostListener('paste', ['$event']) onPaste(e: ClipboardE ...

Using jQuery to iterate through rendered HTML with the ForEach function

I am utilizing JS/jQuery code to extract the cell value of an ASP DetailsView control (rendered HTML), validate it against a condition, and hide a specific div based on the result. Specifically, the code is examining whether the cell value is formatted lik ...

Tips for verifying blank form fields

Is there a way to validate empty form fields before submission and show an alert? This validation is important as some fields are hidden using v-show. Here is an example: <!DOCTYPE html> <header> <script src="https://unpkg.com/vue@n ...

Utilizing local storage functionality within AngularJS

I've been encountering challenges while trying to integrate local storage using ngStorage in my ongoing AngularJS project. Despite fixing what seems to be the root cause of data type problems and errors during debugging, issues persist. Here is the P ...

Manage image placement using CSS object-position

I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

"The Material-UI ListItem component acts as a link, updating the URL but failing to render the expected

Seeking help for the first time on this platform because I am completely perplexed. I'm working on coding a navbar for my school project website using Material-UI's List component within the Appbar component. However, I have encountered two issu ...

Pressing the "Enter" key in a .Net WinForm Browser Control

How can I simulate the Enter key press event on a web page using the GeckoFX Web Control? I am unable to use SendKeys.Send({ENTER}) Is there a method to trigger the Enter key using JavaScript within a webpage? ...

Storing an array within an AngularJS service for better performance

As someone who is relatively new to AngularJS, I am still in the process of understanding how to utilize services for fetching data in my application. My aim here is to find a method to store the output of a $http.get() call that returns a JSON array. In ...

Issue with Type-Error when accessing theme using StyledComponents and TypeScript in Material-UI(React)

I attempted to access the theme within one of my styled components like this: const ToolbarPlaceholder = styled('div')((theme: any) => ({ minHeight: theme.mixins.toolbar.minHeight, })); This information was found in the documentation: htt ...

The frequency of database updates exceeds expectations - involving vue.js this.$router.push and express operations

Having some trouble updating a MongoDB with this code. It seems to be updating three times instead of just once due to having three dates in the posts.date field. Utilizing Vue, Mongo, and Express for this project, I have the following data structure: { ...

Pressing the ENTER key does not submit the text box data in Rails/Bootstrap, but clicking the SUBMIT button does

I need assistance with my Rails 4 and Bootstrap 3 project. I have implemented an email address field on my page (localhost:3000) where users can enter their email and click the SUBMIT button to send it to the MongoDB database. However, pressing the ENTER k ...