uib-datepicker-popup allowing for changing minimum mode dynamically

Is there a way to dynamically set the minMode of an Angular Bootstrap Datepicker?

I managed to achieve this using the following code:

<input type="text" ng-model="myDate"
       uib-datepicker-popup="{{datepickerFormat}}"
       datepicker-options="{'minMode': minMode}"/>

In my Controller:

...
$scope.minMode='day';

While this method works well initially, I encountered a $compile:nonassignNon-Assignable error in the browser console when changing the minMode and reopening the datepicker. I attempted to simplify it by modifying the input code like so:

<input type="text" ng-model="myDate"
       uib-datepicker-popup="{{datepickerFormat}}"
       min-mode="minMode"/>

Unfortunately, this approach no longer works as expected.

Angular version: 1.5.9
Bootstrap version: 3.3.7
angular-bootstrap version: 1.2.5

Check out the Plunker for more details

Answer №1

Ensure the minMode value is correctly placed

To properly handle options in your datepicker and update them with buttons, it's important to define the options object in your controller and reference it in both instances.

<div class="input-group">
    <input type="text"
        ng-model="myDate"
        is-open="showDatePicker"
        uib-datepicker-popup="mm-dd-yyyy"
        datepicker-options="options"/>
</div>

Within the controller

$scope.options = {'showWeeks': false, 'minMode': 'month'};

Now you can modify the minMode property using your ng-click expressions

<button ng-click="options.minMode = 'day'" class="btn">Day</button>
<button ng-click="options.minMode = 'month'" class="btn" >Month</button>

Updated plunk

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

Avoid excessive clicking on a button that initiates an ajax request to prevent spamming

When using two buttons to adjust the quantity of a product and update the price on a digital receipt via ajax, there is an issue when users spam the buttons. The quantity displayed in the input box does not always match what appears on the receipt. For in ...

Transfer data from a file to a PHP file using the XMLHttpRequest object in JavaScript and receive

I'm attempting to use AJAX to send an image file to a PHP file. The issue is that even though the script sends the object, my parser isn't able to retrieve the $_FILES["avatar"]["name"] and tmp_name values. Is there a method to transfer the file ...

What's the most effective method for updating the title of the date header on MUI Date Picker?

Does anyone know how to customize the title of the Calendar in MUI Date Picker? I want to add a specific string to the display that shows the month and year, like "August 2014." https://i.stack.imgur.com/qgMun.png I've searched the API but couldn&ap ...

Switch out the keyup event action for a click event action

http://jsfiddle.net/2q8Gn/23/ I am looking to modify the provided fiddle so that instead of having computedPageLinks update with each key press in the search input, it updates only when a button is clicked and does not change when the search input loses f ...

Automate the login process for a website and programmatically fill out and submit a form

I am currently trying to automate the login process on Skype's website using Selenium in C#. Everything goes smoothly until I reach the password field, which seems to be elusive to Selenium. I have tried various methods to locate the password field bu ...

How can the execution of a directive within another directive's template be triggered?

Is there a way to declare a directive within another custom directive template? The goal is for the inner directive to utilize a field from the outer directive's scope: angular.module('core.directives') .directive('containertable&apos ...

React Material UI - All radio buttons within a list can be individually selected

I'm looking to create a set of Radio Buttons for each element in my array. While my project is functioning well overall, I'm having issues with the radio buttons as they are all selectable at once. ...

Is it feasible to establish a factory or service using $provider outside of the config() function in Angular JS?

Just had a couple of questions on my mind... Regarding Angular JS - Can we create a factory or service using $provider outside of the config() function? Is it feasible to instantiate a $Provider instance with the injector, like angular.injector([&apo ...

Easier JavaScript for numerous HTML elements

I am an aspiring JavaScript learner seeking advice. Currently, I am working on a website that features numerous items with multiple images for each. I am utilizing JQuery to display a larger image when the user hovers over a thumbnail image. My query is ...

Are there any JS/jQuery plugins available for sliding animations that include slideLeft and slideRight functions, similar to the slideUp and slideDown functions?

Does anyone know of a jQuery/JS plugin that combines fading and sliding effects, specifically with slideLeft and slideRight functions similar to jQuery's slideUp and slideDown? I'm hoping to find something ready-made rather than having to build i ...

Innovative HTML5 Video Canvas Shapes

I'm currently working on creating a circular frame or canvas for live HTML5 Video. While I am able to round the corners using keyframes radius property, it results in an oval shape rather than a circle. My preference would be to utilize a div object ...

Updating MongoDB with an unknown object can be a challenging task, but there

In my current project, I have set up a Mongoose model as follows: const userSchema = new mongoose.Schema({ userID: { type: String, require: true, unique: true }, username: { type: String }, serverID: { type: String, require: true }, roles: ...

What causes the Error: ENOENT open error to occur when attempting to render a doT.js view?

My first experience with doT.js led me to create a basic server setup: 'use strict'; var express = require('express'); var app = express(); var doT = require('express-dot'); var pub = __dirname+'/public'; var vws ...

What strategies can I employ to optimize this code in RXJS and Angular?

Is it possible to streamline these nested arrays for more efficient execution after all subscriptions have been completed? I believe there may be a solution involving the use of pipes, mergeMaps, concatMaps, etc. this.teams = [ { Assignments: [{Id: ...

Overlapping problem with setInterval

I am currently working on a project that requires the use of both setInterval and setTimeout. I am using setTimeout with dynamic delays passed to it. While elements are not timed out, I have implemented setInterval to print out numbers. Here is the code ...

Encountering difficulty in interpreting angular function in JSON

Here is an example of my Json data: "review": { { "message_bar_text": "Please review your transaction details carefully. If you need to make changes after confirming, please call <a ng-click=\"callCSC(number)\">1-800-325-6000</a>. } ...

Ways to launch the React Material date picker while hiding the date input field

I am working with the react material (MUI-X) date picker and my specific requirement is to have the date picker open on button click without displaying the date text field. I simply want to show the calendar and allow users to select a date. I have explore ...

Tips for retaining the original size of an image in HTML5 canvas drawImage

function getBase64ImageData(_id) { var canv = document.createElement('CANVAS'); var context = canv.getContext("2d"); var imageElem = document.getElementById(_id); context.drawImage(imageElem, 0, 0); var dataURL = canv.toDat ...

Decoding the information received from Socket.IO within the Flash client

When utilizing server node.js and module Socket.IO, data transmission is handled as shown below: var tests = [555, 777]; client.send("Test string"); //first message client.send({tests:tests}); //second message If the data sent is a text string (fi ...

Combining Data in React Arrays

I have an array with different group types and I need to merge the results if the grouptype is the same. const locationss = [ { grouptype: "Name1", id: "1", servicetype: [ { name: "Morning", price: "5& ...