Display only months and years in the NgbDatepicker

Struggling with configuring the NgbDatepicker directive in my Bootstrap 4 and Angular 4 powered app. I only want to display months and years, similar to credit cards.

Selecting a specific day is not important to me, I just need to choose the month and year.

This is how my input is set up:

<input id="demodate" type="text" name="demodate" ngbDatepicker
#startDateDp="ngbDatepicker" [(ngModel)]="modelDate"/>

I have tried all the available properties for the NgbDatepicker directive as listed here, but none of them seem to be working for my case. Any suggestions?

angularng-bootstrap

Answer №1

Unfortunately, there isn't a built-in feature for this specific functionality, but you can achieve it by leveraging CSS and the navigate event. While not the most elegant solution, it will get the job done.

<ngb-datepicker (navigate)="dateNavigate($event)" 
[showWeekdays]="false" class="datepicker-only-month-select"></ngb-datepicker>

In your component, listen for the navigate event which provides both the previous and new values:

dateNavigate($event: NgbDatepickerNavigateEvent) {
    console.log($event.next.month);
    console.log($event.next.year);
    ...
    // Access old value with $event.current
  }

For further customization, you can utilize global scope CSS to hide the day calendar and apply additional styling:

.datepicker-only-month-select {
  border: 0 !important;
  .ngb-dp-months {
    display: none !important;
  }
}

Answer №3

The current version of the datepicker component in ng-bootstrap does not have the capability to select months and years separately - it only functions as a date picker.

If you need this feature, consider submitting a request on GitHub

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

Add the component view to the webpage's body section

Using Angular 7 and ngx-bootstrap 4.0.1 Dependencies: "bootstrap": "3.3.7", "bootstrap-colorpicker": "2.5.1", "bootstrap-duallistbox": "3.0.6", "bootstrap-markdown": "2.10.0", "bootstrap-progressbar": "0.9.0", "bootstrap-slider": "9.8.0", "bootstrap-tags ...

javascripthtmlangularangular7

What is the process of organizing information with http in Angular 2?

Currently, I am working through a heroes tutorial and have made progress with the code so far. You can view the code <a href="https://plnkr.co/edit/YHzyzm6ZXt4ESr76mNuB?preview" rel="nofollow noreferrer">here</a>. My next goal is to implement ...

angulartypescriptangular-cliangular-http

Facing issues using Angular 5 for PUT requests due to 401 errors

When attempting to update data using the PUT Method in my angular service and express routes, I encountered a 401 error. Here is my service code: //401 makeAdmin(_id) { this.loadToken() let headers = new Headers() headers.append('Authorization& ...

javascriptangularexpress

Ways to transmit additional arguments to RxJS map function

When working with an Angular application, I utilize HttpClient along with RxJS operators to execute various API calls. One example of this is shown below: return this.httpClient.put(url, JSON.stringify(treeOptions)) .pipe( map(this.extract ...

angularrxjs

The Angular Universal client side appears to be inactive

My server-side rendered application is up and running, but I'm encountering an issue where the client-side functionality seems to be missing. Despite the routes rendering properly, none of the click events or console logs are working on the client sid ...

angularangular5angular-universal

Showing live reactive form elements simultaneously in Angular

Is there a way to display form elements/values individually as they are being entered by the user, rather than all at once using the JSON pipe? I'm struggling to figure out how to show each element separately in the HTML code. {{commentForm.value ...

formsangularreactiveangular-forms

Showing a 2D array in HTML using ngFor loop

I need to display a list of arrays in an HTML p-table. Here is the array list: [Array(2), Array(2), Array(2), Array(2), Array(1)] 0: (2) ["abc", "def"] 1: (2) ["ghi", "jkl"] 2: (2) ["mno", "pqr"] ...

javascripthtmlarraysangular

Unable to personalize map controls in OpenLayer mapping system

Having trouble styling custom map controls with CSS selectors .ol-zoom-in and .ol-zoom-out. Any suggestions on how to customize them? export class CustomMapControlsComponent implements OnInit { map: Map | undefined; constructor() {} ngOnInit() ...

angularopenlayers

Angular 4's OrderBy Directive for Sorting Results

I've been working on implementing a sorting pipe based on the code provided in this resource: The issue I'm facing revolves around handling undefined values within my data. The sorting pipe functions correctly when there are no undefined values ...

angularsortingtypescript

Storing service data within Angular2 components

As I work on creating a login service called AuthService for my Angular 2 application, I'm facing unexpected challenges. My main goal is to have a single user object that remains consistent throughout the entire application after a user logs in. This ...

angular

The Angular2 Router directs the user to the main Component

After configuring the Angular2 router and setting up the server (asp.net core) to redirect unknown paths to /index.html, the routing appears to be functioning properly. However, I am encountering an issue where visiting a specific URL (i.e. www.sitename.co ...

routesangular

Understanding the process of retrieving form data files sent from Angular to TYPO3/PHP via a Post request

I've been working on uploading an image from Angular to the TYPO3 backend, but I'm struggling to read the request body in the Controller. Here's the code snippet from my Angular side: HTML: <input multiple type="file" (change ...

phpangularuploadtypo3

SSR Angular application facing compatibility issues with Plotly.js

I'm facing an issue while developing an Angular app with server-side rendering (SSR) related to plotly.js functionality. The error message I encountered is as follows: C:\Users\x\Desktop\Angularapp\ngseo\dist\server ...

angularangular7plotlyserver-side-rendering

Error in Angular ESLint: The key parameter is mandatory

I'm attempting to download a file using the Angular code below, but I consistently receive an error stating Parameter "key" required const headerValues = new HttpHeaders({ 'Content-Type': contentType!, 'Accept': contentTy ...

angularjsangulareslint

Angular 2 failing to recognize service variable changes initiated from component

Hello there, I'm currently facing a challenge with updating my component to reflect the correct value of a service variable whenever it changes. Here's what I have so far: Snippet from Component1 HTML {{icons | json}} Component1 Code icons: ...

angulartypescriptrxjsobservable

Angular has a built-in function to determine the next ID after deletion of some items

I am currently facing a situation where I have a list of contacts in a detailed view and navigating through them using the following code: <nav> <a [routerLink]="['/details', friend.id - 1 ]" *ngIf="!(friend.id == 1)"> P ...

angulartypescript

RxJS: Ensure Observables emit values sequentially, waiting for the completion of the previous Observable

In my current project, I have been working on implementing a unique Angular structural directive. This directive is designed to read and store the text content of an HTML element along with all its children, remove the contents upon AfterViewInit, and then ...

angularrxjsreactive-programmingangular-directive

What is a way to incorporate two ngClass directives within a single div element?

Is it possible to include two ng-class directives within a single div element? If so, how should we go about writing them together? Thank you for your help. <div [ngClass]={'white-background': policyNumber.length <= 0} [ngClass]="getS ...

angularng-classangular-ng-class

The Ionic project compilation was unsuccessful

Issue: This module is defined using 'export =', and can only be utilized with a default import if the 'allowSyntheticDefaultImports' flag is enabled. Error found in the file: 1 import FormData from "form-data"; ~~~~~~~~ node ...

javascriptangulartypescriptionic-framework

The filter pipe encounters an issue where it shows an error message indicating that the data is undefined once the service returns the

I have encountered an issue while using Angular 6 and creating a custom filter pipe. It was working perfectly fine with static data, but when I started fetching data from a service, it threw an error saying "Cannot read property toLowerCase of null." Below ...

angular