Issues with the uib-datepicker-popup component in my Angular application are causing functionality to

Having trouble with the uib-datepicker-popup in my Angular application. It works fine in other controllers.

<input ng-click="open($event, 'delivery_time_popup')" type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" show-weeks="false" ng-model="purchase_order.delivery_time" is-open="delivery_time_popup" datepicker-options="dateOptions" required close-text="Close" placeholder="Select Date">

JavaScript

$scope.open = function ($event, opened) {
        console.log(opened);
        $event.preventDefault();
        $event.stopPropagation();
        $scope[opened] = true;
    };

    $scope.delivery_time_popup = false;

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

Answer №1

To enable the $scope.delivery_time_popup value to be true, make sure to include it within the open function.

 $scope.open = function ($event, opened) {
    console.log(opened);
    $event.preventDefault();
    $event.stopPropagation();
    $scope[opened] = true;

    $scope.delivery_time_popup = true; //make sure this is added
};

In the HTML code, replace ng-click with ng-focus.

Check out this Plnkr example for reference.

HTML

<input ng-focus="open($event, 'delivery_time_popup')" type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" show-weeks="false" ng-model="purchase_order.delivery_time" is-open="delivery_time_popup" datepicker-options="dateOptions" required close-text="Close" placeholder="Select Date">

CONTROLLER

$scope.open = function ($event, opened) {
    console.log(opened);
    $event.preventDefault();
    $event.stopPropagation();
    $scope[opened] = true;

    $scope.delivery_time_popup = true;
};

   $scope.delivery_time_popup = false;

   $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
    };
});

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

One-time binding in AngularJS using ng-repeat

I recently implemented Bindonce to boost the performance of my ng-repeat feature. However, I encountered a problem: The collection used in the ng-repeat is empty initially because it takes some time to fetch the data from the API, and the update is preven ...

Can someone help me identify the issue with my JavaScript code?

Recently, I attempted to transfer data from JavaScript to HTML using Angular. Here is the code snippet: phonecatControllers.controller('start', ['$scope', function($scope){ $scope.lloadd=true; console.log('data - '+$ ...

What is the best way to save the data received from createApi into the Redux store?

Currently, I am faced with the challenge of storing user data (such as name, email, etc.) obtained through the createApi function into Redux store. However, I'm unsure of the best practice to achieve this. In my userApi.js file: export const userApi ...

Issue: Unable to find a compatible version of chokidar. Attempted chokidar@2 and chokidar@3 after updating npm to version 7.*.*

After using ejected CRA, it compiled successfully but then broke with the following error. The issue started to occur after updating npm from version 6 to 7. You can now view webrms in the browser. Local: http://localhost:3001 On Your Netw ...

I am having trouble with the $lookup in MongoDB and Node.js as it is not returning any results

I've been struggling to find a way to search for data with a foreign key in my model. Here is the structure of my model: const mongoose = require('mongoose'); const UserCGN = mongoose.Schema({ username: String, cours: String }) mod ...

Set up a Pinia store with a specific data type

Note: I am a beginner in JavaScript I am currently working on synchronizing an object with a Pinia store and a Python REST API. My goal is to define a type just once without having to duplicate it in the store. export const useTicketStore = defineStore(&a ...

Struggling to Align NAV buttons to the Right in React Framework

My current Mobile Header view can be seen here: https://i.stack.imgur.com/CcspN.png I am looking to achieve a layout similar to this, https://i.stack.imgur.com/pH15p.png. So far, I have only been able to accomplish this by setting specific left margins, ...

What is the best way to send data from client-side JavaScript to node.js using XMLHttpRequest?

I have some HTML input fields in my index.html file. <input type="text" id="handle" > <input type="text" id="message" > <button id="send">send</button> After filling in the information and clicking "send", I want to pass this data ...

Preventing further onClick events from occurring ensures that any new onClick events will not be triggered as well. To achieve

In the process of developing a script, I've encountered a situation where the original developers may have implemented event prevention or some other mechanism to block any additional clicks on certain table td elements. Even though their click trigge ...

"Exploring the Power of AngularJS ngBind and Leveraging Bootstrap Switch

I am attempting to incorporate HTML for a Bootstrap Switch radio button () from within an AngularJS controller using ngBind. When I run the following code, the Bootstrap Switch radio buttons that are already present in the HTML work as expected: $('. ...

Is combining form and fieldset causing issues?

My <form> for uploading an image and my <fieldset> for sending data via AJAX both work individually. However, when I try to merge them into one form, things get complicated. This is being done on a Node.JS server. Upload <form>: <for ...

"Utilize jQuery to create a dynamic animation by togg

Looking for guidance on how to add animation to gradually reveal the answer? Provided my code below. Any assistance in making this functional would be greatly appreciated. <div class="q-a-set"> <div class="licensing-question" id="q_1"> <i ...

Can you explain the key distinctions among Highland.js, Kefir.js, and Rx.js?

Given the emphasis on objective answers on SO, my inquiry is focused on understanding the distinct functional and performance characteristics of these three functional/reactive libraries. This knowledge will guide me in selecting the most suitable option ...

Exclude specific fields when updating a document in Firebase using the update()

Currently, I am storing a class in Firebase by using the update() function. Is there a way to stop specific fields (identified by name) of the object from being saved to the Firebase database? It's similar to how we use the transient keyword in Java ...

Dealing with click events for multiple divs in React: Strategies and Solutions

In my current scenario, I am dealing with multiple DIV elements that require a click event listener, similar to how a CSS accordion or memory match game functions (each tile reacting to a click event). Implementing this in JavaScript can be achieved like ...

Preserving the top line or heading while cutting through a table

In my HTML, I have a table with the following structure: <table id="table"> <tr> <td>ID</td> <td>Place</td> <td>Population</td> </t ...

How to retrieve an array from an object using React

In the context of my React application, I have a function called Query2 within a file named service.ts. The structure of this function is as follows: interface Result { products: number[]; } export async function Query2(molsSdf: string): Promise<Res ...

Using Jquery to dynamically load an aspx page into a specific div element

Yesterday, I posted a question about loading an aspx page in a div tag. I have been using the code below to try and accomplish this, but so far I have been unsuccessful. Can anyone provide assistance on how to successfully load the aspx page into the div ...

What sets apart a class from a service in NativeScript?

I am embarking on the journey of learning Nativescript + Angular2, and while reading through the tutorial, I came across this interesting snippet: We’ll build this functionality as an Angular service, which is Angular’s mechanism for reusable classes ...

What appears to be the issue with this AJAX code snippet?

I am new to programming and currently working on a code that involves retrieving text data from a file and replacing the existing text with new text. I have implemented AJAX to accomplish this task, but I am encountering an issue where an error message i ...