Enable users to choose either today's date or a future date by implementing AngularJS UI Bootstrap

I am currently utilizing the ui-bootstrap directive for a datepicker. My goal is to restrict the selection of dates to today's date or any future dates. Below is the HTML code snippet for the datepicker:

 <div class="input-group">
                                <input type="text" class="form-control"
                                       uib-datepicker-popup="yyyy-MM-dd"
                                       name="start_date"
                                       ng-model="loan.start_date"
                                       is-open="popup1.opened"
                                       datepicker-options="dateOptions"
                                       ng-required="true"
                                       close-text="Close"
                                       alt-input-formats="altInputFormats"
                                 />
                          <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>

The corresponding JavaScript implementation is as follows: 

  $scope.inlineOptions = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
};

$scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
   maxDate: new Date("2020-04-1"),
    minDate: new Date() ,
    startingDay: 1
};

If you have any insights on how I can achieve this, I would greatly appreciate your assistance. Thank you.

javascriptangularjstwitter-bootstrapdatepicker

Answer №1

Your JavaScript code seems fine, but there might be some issues with your markup. Check out this modified plunker example (based on Angular original) for a working demonstration.

 $scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
    minDate: new Date(),
    startingDay: 1
  };


  <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>

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

Activate a tooltip in Vuetify

I'm utilizing vuetify and have implemented a tooltip feature on a button. However, I do not want the tooltip to be displayed on hover or click; instead, I would like it to appear when a specific event is triggered. translate.vue <v-tooltip v-model ...

javascriptvue.jsvuetify.js

When I try to send data from my Node.js application to my MySQL database, the information does not

I am currently working on developing a registration and login page, where the user details are stored in a database for authentication during login. The registration button is meant to store user data in the database to complete the sign-up process. For t ...

javascriptmysqlnode.jsreactjsexpress

Harnessing the power of JavaScript functions to display an image when clicked

Looking for help with making an image appear when clicking on one of three images? Despite trying different approaches, the desired result is still not achieved. I'm aware of using if else statements but exploring other methods. Any insights on what m ...

javascripthtmlcssonclick

Navigating through directory paths in JavaScript can be a daunting task for many

In my app.js file, I've included the following code: app.use(multer({dest:'./uploads'})) What does './uploads' refer to here? It is located in the same directory as app.js. In what way does it differ from simply using uploads? I ...

javascriptnode.js

Ways to match a string against a numeric value

I have a span id with textContent which have their own time(hour/minutes) <div class="here"> <span class="time" >8 min</span> </div> <div class="here"> <span class="time" >22 min&l ...

javascripthtmlcss

Ben Kamens has developed a new feature in jQuery Menu Aim where the sub menu will not reappear once it

While exploring Ben Kemens’ jquery-menu-aim, I came across a demonstration on codepen. The code on codepen allows smooth transition from the main menu to the sub menu, but if you move away completely, the submenu remains visible and doesn't disappe ...

javascriptjqueryhtmlmenu

Selenium Python not generating event when clicking on element (Key event missing from datafile)

One issue I am facing is that clicking on a button element does not trigger the event. Specifically, while attempting to add an item to the cart, a size must be selected before clicking the "add to cart" button. This problem occurs when using the Chrome he ...

javascriptpythonseleniumselenium-webdriverdata-files

Using ReactJS to send formData to an Express API and retrieving a JSON response

Attempting to have the ReactJS frontend send a username and password from a form to my express API via a proxy, with the intention of having the API return a JSON file containing a user id. While the proxy connection is working as expected, the issue arise ...

javascriptnode.jsreactjsexpressjsx

Guide to utilizing the THREE.OBJExporter

I've come across this post, however, when I am utilizing var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); var mesh = new THREE.Mesh( totalGeom, material ); THREE.OBJExporter.parse( mesh ); Error message shown is: Uncaught Typ ...

javascriptthree.jsexport

What methods can be used in VueJS to restrict users from entering numeric values?

I am struggling to create a validation that prevents users from inputting numeric values into a textbox. I have tried using a native JavaScript solution, but it does not seem to be working on my end. In my textbox, I have set up this trigger v-on:keyup=" ...

javascriptvue.jsvuejs2

linking ng-style through live html

I am encountering an issue with dynamic data stored in the database. When trying to apply a style to a div element retrieved from the server response, I am facing difficulties with implementing it using ng-style. If the data is static, everything works fi ...

javascriptcssangularjs

Looking for a logo placed in the center with a top fixed navigation using Bootstrap

I am in need of a Centered Logo using Bootstrap fixed top navigation. The goal is to have the brand centered within the navigation. Check out my Sample Fiddle .LandPageNavLinks { list-style-type:none; margin:0; padding:0; } .LandPageNavLin ...

htmlcsstwitter-bootstrap

What steps can be taken to effectively build a test suite architecture using Jest?

After exploring all the available resources on the Jest documentation website, including various guides and examples, I have yet to find a solution to my specific question. I am in search of a methodology that would enable me to individually run test case ...

javascriptnode.jstypescriptunit-testingjestjs

jquery is showing up in the browserify bundle.js file, however, it is not functioning properly

Currently, I am trying to follow a brief tutorial on how to use Browserify. Despite following the instructions precisely, jQuery seems to not be working properly when bundled. Specifically, the button element in my app.js code is not appended to the body. ...

javascriptjquerynode.jsnpmbrowserify

The Facebook Messenger chat widget appears to be malfunctioning and failing to

I've gone ahead and whitelisted the domains on our Facebook page, as well as generated the chat widget. However, despite disabling all content blockers, the code seems to have no visible effect on the page. Unfortunately, due to limitations with our ...

javascriptfacebook

Performing an AJAX call with JQuery when clicking on multiple anchor elements

I have a set of anchor tags created dynamically through PHP from a database query, like the following: <a href="#" id="reply_doc" data-doc_value="1"></a> <a href="#" id="reply_doc" data-doc_value="2"></a> <a href="#" id="reply_d ...

javascriptjqueryajax

What is the best way to transmit data via $router.push in Vue.js?

I am currently working on implementing an alert component for a CRUD application using Vue.js. My goal is to pass a message to another component once data has been successfully saved. I attempted to achieve this by passing the data through $router.push lik ...

javascriptvue.jsvuejs2vue-componentvue-router

Tips for Customizing the Appearance of Material UI Select Popups

My React select component is functioning properly, but I am struggling to apply different background colors and fonts to the select options. https://i.stack.imgur.com/kAJDe.png Select Code <TextField fullWidth select size="small" nam ...

javascriptreactjsdrop-down-menumaterial-ui

Guide on retrieving the mouse button press from a command event using XUL

There appears to be a difference between the XUL command and click events. While my function is called when using the command event, the event object does not include the button property. I'm trying to figure out: how can I determine which mouse but ...

javascriptxul

`How can I manage my electron.js application effectively?`

As a newcomer to electron.js, I have successfully created a game using html, css, and javascript that currently runs offline on the client side. However, I am now looking for a way to access, analyze, and make changes to this app. One solution could be lo ...

javascriptelectron