Angular 2 - issues with datepicker functionality

Looking to add a datepicker to my application, I first attempted using bootstrap datepicker without success. Next, I tried ngBootstrap, but encountered the same issue - clicking the icon did not display the calendar. It seems as though the icon is not functioning properly.

Here is my code:

<form class="form-inline">
<div class="form-group">
    <div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd"
            name="dp" [(ngModel)]="modelDate" ngbDatepicker #d="ngbDatepicker">
    <div class="input-group-addon" (click)="d.toggle()" >
        <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
    </div>
    </div>
</div>

Model: {{ modelDate | json }}
javascripttwitter-bootstrapangulartypescriptbootstrap-4

Answer №1

If you're encountering an issue, it may be due to incorrect ngBootstrap library imports.

Assuming you have added the ngBootstrap dependency to your project:

npm install ng-bootstrap

In your index.html file, make sure to import the necessary Bootstrap css files:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="/css/bootstrap-reboot.min.css">

You can download these from:

After downloading, copy the css files into your project's css directory (/css/ matches the import statements above). No need for the js files since ng-bootstrap contains the necessary code.

In the component where nbgDatepicker is used, ensure you import the library at the beginning:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Following these steps should resolve any issues with the date picker functionality.

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 continuity of service value across parent and child components is not guaranteed

My goal is to update a value in a service from one component and retrieve it in another. The structure of my components is as follows: parent => child => grandchild When I modify the service value in the first child component, the parent receives t ...

angulartypescriptangular-services

Using jqgrid to generate a hyperlink that corresponds to the data's value

I am working with a grid setup similar to the one below: $("#list").jqGrid({ url:'listOpenQueryInXML.php', datatype: 'xml', colNames:['Id','name1', 'name2', 'status', 'type' ...

javascriptjqueryjsonjqgrid

Sending data to server using Ajax and jQuery

Hey there, experiencing a little hiccup in the back-end of my system when I try to submit my form. It keeps showing me an error saying Unidentified index: file1 . Can't seem to pinpoint where the issue lies in my code. Even though I'm no beginner ...

javascriptphpjqueryajaxcodeigniter

What could be causing cancelAnimationFrame to fail?

Take a look at this fiddle - http://jsfiddle.net/rnqLfz14/28/ [ The code provided isn't my own - ] //.... function stop() { running = false; started = false; cancelAnimationFrame(frameID); } //... function mainLoop(timestamp) { / ...

javascripthtmlanimationrequestanimationframe

Set the cookie to expire in 5 minutes using PHP, JavaScript, or jQuery

Is there a way to set a cookie in PHP that expires in 5 minutes? I am comfortable with the setcookie() function, but unsure about how to set the expiration time. Any explanation would be greatly appreciated. Could someone please guide me on how to achieve ...

phpjavascriptjquerycookiessetcookie

Updating ReactJS Context within a class-based component

I've been experimenting with various online tutorials on utilizing "Context" in ReactJS, but I'm encountering difficulties when attempting to update the context in child components. The foundation of my code is sourced from : I primarily use cla ...

javascriptreactjsreact-context

Configuring the date picker in Bootstrap to display one day before the actual date selection in a reactive form using Angular 8

After successfully saving the date using the Bootstrap date picker in a reactive form, I encountered a problem where the date displayed on the UI is always one day behind the actual date. Custom CODE: this.subjectPersonalform = this.formBuilder.group({d ...

angular

TypeScript: Unable to fetch the property type from a different type

Currently, I'm using create-react-app with its TypeScript template. However, I encountered an issue while attempting to retrieve the type of the property 'pending' in 'GenericAsyncThunk', similar to how it's done in the redux- ...

reactjstypescriptcreate-react-appredux-thunkredux-toolkit

I'm confused about what I did wrong with Node.js. The server.js is up and running, but I'm unable to view the

I have made some progress so far and I am currently running this code on Putty. var http = require('http'); var fs = require('fs'); const PORT = 8080; http.createServer(function(request, response) { var url = request.url; switc ...

javascripthtmlnode.js

Transform a string into an object using AngularJS $parse function

Imagine having a server that sends back a response in the form of: { multiply:function(x,y) { return x*y; }, divide:function(x,y) { return x/y; } } Can this be converted into a functional method? I attempted to convert ...

javascriptangularjs-1.5

Make an axios request multiple times equal to the number of items in the previous response

In my project, I am using the axios library to convert addresses into their respective coordinates. First, I fetch a list of addresses from an API. Next, I take the RESPONSE object and use Google API to convert each address to coordinates. Finally, I wan ...

javascriptnode.jsexpressaxios

Initialize React Native project

Which ruby command shows the path to Ruby: /Users/User/.rbenv/shims/ruby Ruby -v command displays the version of Ruby installed: ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-darwin21] Which bundle command reveals the path to Bundler: /Users/Us ...

javascriptreactjsrubyreact-native

An approach to concealing a search bar while scrolling down and revealing it while scrolling up in react-native

Looking for help with implementing a disappearing search bar functionality when scrolling? Check out the following code snippets and examples that demonstrate how to achieve this feature: showSearchBarIOS = () => { return ( <View style={st ...

javascriptreact-nativereact-redux

The Jest test is experiencing a failure as a result of an imported service from a .ts file

In my Jest test file with a .spec.js extension, I am importing an index.js file that I need to test. Here is the code snippet from the .spec.js file: var HttpService = require('./index.js').HttpService; The problem arises because the index.js f ...

typescriptjestjs

Mozilla browser experiencing issues with mouse move event functionality

Here, I have a background image on the body and with the following script, when the user moves the mouse, the image in the background also moves. body { background-image: url('../images/1.png'); background-size: 98%; background-posi ...

javascriptjqueryhtmlcss

Exploring the Intersection of jQuery and Rails in Dynamic Form Development

I am currently working on an interactive form for a Rails project and need some assistance with listing multiple jQuery functions in the same file. Whenever I try to add a second set of code language, it seems to break the entire file. Below is the Rails ...

javascriptjqueryruby-on-railsforms

Understanding the Difference Between WARN and ERR in npm Peer Dependency Resolution

I encountered a puzzling situation where two projects faced the same issue, yet npm resolved them differently: https://github.com/Sairyss/domain-driven-hexagon npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! W ...

javascriptnode.jsnpmnpm-install

Is it possible to add new values to a GraphQL query?

I am currently utilizing GraphQL and Typeorm in conjunction with an Oracle Database, specifically focusing on retrieving all data from a specific table. The query that is being executed is: SELECT "inventory"."id" AS "inventory_id", "inventory"."value" AS ...

typescriptoraclegraphqltypeorm

Obtain JSON data using jQuery

Hey there! I am currently working on understanding how to retrieve data using json/JQuery with the code below. After storing a php variable in a json variable (var ar), I confirmed its contents through console.log, although when I used document.write it d ...

javascriptphpjqueryjson

Using ES6 syntax to inject modules into an extended controller can result in the Unknown provider error

Currently, I am facing an issue with creating a child class ModalCtrlChild extends ModalCtrl from my controller class ModalCtrl. Whenever I attempt to do this, I encounter an unknown provider error related to the modules injected in ModalCtrl. The project ...

javascriptangularjswebpackecmascript-6babeljs