Angular Datepicker - Prev and Next

Question

I am using the following calendar in my project:

https://angular-ui.github.io/bootstrap/#/datepicker

I need to customize the back and forward calendar buttons, I disabled these default calendar buttons (searched the class and gave a None display), but need to use them elsewhere in the project, does anyone have any function I can use through any div? For example:

 $('.voltar_calendario').click(function() {
            $('.datepicker').pickadate('prev');
        });
        $('.avancar_calendario').click(function() {
            $('.datepicker').pickadate('next');
        });

Note: this does not work, is an example;

I need the current date that is displayed at the top of the calendar as well.

The only html to activate the calendar is as follows:

<uib-datepicker ng-model="dt" class="well-sm no_right" datepicker-options="inlineOptions" style="float:left; width: 100%;"></uib-datepicker>

Here’s a screenshot of why I needed to hide the calendar header with css, because I need to use it in the title:

Same calendar link in plunker: http://plnkr.co/edit/ZrfDlSROZxKrOAiA0PXp?p=preview

Answer 1

You can via jQuery force a click on the next and Prev buttons that are inside the controller.

$('#mydt-uib-left').click(function() {
	$('div[ng-controller="DatepickerCtrl"] .uib-left').click();
});

$('#mydt-uib-right').click(function() {
	$('div[ng-controller="DatepickerCtrl"] .uib-right').click();
});

<button type="button" id="mydt-uib-left"> <- </button>
<button type="button" id="mydt-uib-right"> -> </button>

Answer 2

Try using the jquery click event without indicating ng-controller or div.

Ex:

$('.uib-left'). click();