Concluding the use of angular-bootstrap-datetimepicker when selecting a date

I am currently utilizing the UI Bootstrap drop-down component to display the angular-bootstrap-datetimepicker calendar upon clicking. Although it works well for the most part, I have encountered an issue where the calendar block does not close when clicked on the calendar itself, only when clicking away.

Is there a way to ensure that the calendar block closes upon clicking on the date within the calendar, without relying on jQuery?

Plunker
GIF

<div uib-dropdown>
  <h4>
    <a uib-dropdown-toggle href="">Select Date <b class="caret"></b>
    </a>
  </h4>
  <ul uib-dropdown-menu>
    <datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"></datetimepicker>
  </ul>
</div>
javascriptangularjstwitter-bootstrapangular-ui-bootstrap

Answer №1

Forget about jQuery! Utilize $scope.$watch and angular.element to conveniently close when needed:

  $scope.$watch('date',function(newValue){
    newElement=angular.element(document.getElementsByClassName('.uib-dropdown'))
    if(!newValue) return
    angular.element(document.getElementsByClassName('dropdown')).removeClass('open')
  })

For a demonstration of this technique, check out this Plnkr: https://plnkr.co/edit/tJr7XO5dJUrIWshyfKX6?p=preview

Important tip: Using tag id is preferable over class name (especially with multiple dropdowns).

The toggling of the open class achieves the same effect as clicking the dropdown arrow (revealing or hiding the calendar)

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

The Vue.js component appears to be hidden within the Swal.fire HTML

Here is how I use Swal.Fire in my file1.js: import TextModuleComponent from "../components/TextModuleComponent"; export default { components: {TextModuleComponent} } Swal.fire({ title: 'Sending the offer via email?', ...

javascriptvue.jssweetalert2

Ways of converting a negative lookbehind into an ES5-friendly expression

In my code, I have a RegExp that works perfectly, but it only functions with ES2018 due to its use of negative lookbehinds. The problem is that a library is using this RegExp function, so modifying how it's used is not an option. I attempted to add n ...

javascriptregexregex-lookarounds

There was an issue encountered while attempting to utilize orgchart: The property '_aZ' of null could not be read

I've been exploring the use of an organization chart library from Everything goes smoothly with a few nodes, but when I attempt to load the entire organization (approximately 1100 subjects with multiple nested levels), I encounter this console error: ...

javascriptjqueryhtmlorgchart

Errors are raised when trying to watch a formatted date string in Angular

Within one of my Angular 1.x controllers, I have implemented a watch statement as follows: $scope.$watch($scope.someData.timestamp, doSomething); The timestamp attribute can be either null, undefined, or a timestamp formatted string like "2016-05-31T09: ...

angularjsangularjs-scope

Received Status Code 405 when attempting to utilize Google OAuth2

Currently, I am working on integrating Django with Angular JS to access the Google Drive API. My approach is based on referencing the documentation provided by Google which can be found here. However, I have encountered an issue where the FLOW.step1_get_au ...

angularjsdjangogoogle-oauthhttp-status-code-405

JavaScript prototype error: caught TypeError - attempting to call undefined function

I am facing challenges while attempting to create a Factory in AngularJS. I have moved the code from the controller to the factory and made a few adjustments for it to function properly. Here is the error that I am encountering: "El objeto no acepta la p ...

javascriptangularjs

Transmitting information from JavaScript to a PHP script

I am currently using a function that grabs text from a PHP file on our server and inserts it into an HTML page. However, I now need to modify this function in order to SEND data (specifically a couple of JavaScript variables) to the PHP file instead of si ...

javascriptphpajax

Using <span> tags to wrap sentences within <p> tags while maintaining the rest of the HTML formatting

In order to achieve my goal, I have utilized the following code to extract content within tags and encapsulate each sentence in tags for easier interaction. $('p').each(function() { var sentences = $(this) .text() ...

javascriptjqueryregexparsinghtml-parsing

I attempted to increase the value in an array by using the push() method, but I am uncertain about the proper way to do

I have this code that I'm using to organize the staff members in company1, but it seems to be creating a new list of arrays. Can someone assist me with this issue? Once I add the name and ID of the staff, the array will appear as follows: [{compan ...

javascriptarraysangularjs

Distinguishing a button based on its class

I am currently designing a website to showcase personalized store products. Each product info box includes a button, as shown in the screenshot below: https://i.sstatic.net/hiXiY.png Upon clicking on the "Options" button, users can view information about ...

javascriptjquery

What is the best way to align the button correctly beside the cluster of checkboxes within bootstrap framework?

Here is a snippet of HTML code that I am working with: <div class="container"> <form name ="queryForm"> <div class="form-group"> <p class="checkbox-inline"> <input type="checkbox" name="optionsRadios" id="checkOne" ...

htmlcsstwitter-bootstrap

Combining various data types within a single field in BigQuery

Is it feasible to specify a table schema with a field that allows for multiple data types? For instance: BIGQUERY TABLE SCHEMA schema: [{ name: 'field1', type: 'string', }, { name: 'field2', type: &apo ...

javascriptnode.jsgoogle-bigqueryschema

Using Express and Node.js to implement the Google Maps API

Currently working on creating a simple web application using the Google Maps API with express/node. At the moment, I have three main files that make up my project: server.js const express = require('express'); const bodyParser = require(' ...

javascripthtmlnode.jsgoogle-mapsexpress

How can I clear my object so that new Dates() can be added to my calendar?

I am working on updating my program to seamlessly replace old JSON data from a holidays API with new data as soon as it is received. Initially, I attempted to declare the array as empty at the start, but this approach did not yield the desired results. Si ...

javascriptjqueryarraysobjectcalendar

Having trouble displaying a background image on a React application

Public>images>img-2.jpg src>components>pages>Services.js> import React from 'react'; import '../../App.css'; export default function Services() { return <h1 className='services ...

javascriptcssreactjsimagebackground

No input value provided

I can't figure out what's going wrong. In other js files, this code works fine. Here is my HTML code: <table class='table'> <tr> <th>Event</th><td><input class='for ...

javascriptjqueryhtml

How can I insert my URL into the webPDFLoader feature of LangChain platform?

I need help figuring out how to load a PDF from a URL using the webPDFLoader. Can someone explain how to implement this? Any assistance would be greatly appreciated. I am working on this task in nextjs. Where should I place the pdfUrl variable within the ...

javascriptpdfnext.jslangchain

Having trouble locating the objects in the parent scope of an Angular directive

My custom directive needs to access the object $scope.$parent.users. When I use console.log $scope.$parent: myDirective.directive('scheduleItem', function(){ return { restrict: 'EA', link: function($sco ...

javascriptangularjs

When filtering an array in JavaScript, ensure to display a notification if no items match the criteria

In React/Next, I have an array that is being filtered and sorted before mapping through it. If nothing is found after the filters run, I want to display a simple message in JSX format. The message should be contained within a span element. Here is the str ...

javascriptreactjsnext.js

How can a JavaScript file interact with a backend without needing to specify the URL in the compiled code, thanks to webpack?

Currently, I am working on a React application with webpack. After compiling the code using the command webpack --mode production && webpack --config webpack.config.prod.js I utilize a .env.prod file to specify the variable REACT_APP_BASE_URL, wh ...

javascriptreactjswebpack