Ng-model does not reflect changes made in the datepicker

Question

Ng-model does not reflect changes made in the datepicker

Hey there! I've whipped up a simple datepicker for you to check out:

Code Snippet:

<div ng-controller="DatepickerCtrl">

<div style="display:inline-block; min-height:290px;">
    <datepicker min-date="minDate" show-weeks="false" class="well well-lg" ng-model="dt">    </datepicker>
</div>

<p>Selected Date: {{dt}}.</p>

Javascript Part:

angular.module('services', ['ui.bootstrap']);
angular.module('services').controller('DatepickerCtrl', function ($scope) {
$scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
});

The datepicker seems to be loading fine, however, the ng-model does not update with the selected date and the end paragraph in the code shows a blank value for "dt".

I spotted some similar problems reported on GitHub (https://github.com/angular-ui/bootstrap/issues/808, https://github.com/angular-ui/bootstrap/issues/784) but none of their fixes seem to address this specific issue.

Any suggestions or ideas on how to resolve this? Let me know!

javascript angularjs twitter-bootstrap angularjs-directive datepicker

Answer 1

Answer №1

Whenever I come across ng-model referencing something without a dot (.), it always raises my suspicions. To improve your controller code, consider updating $scope.dt to:

$scope.form = {};
$scope.form.dt = null;

Subsequently, in your html code, make sure to change any references from "dt" to "form.dt". Remember what Misko says - if you're using ng-model without a dot, you might be making a mistake.

Wishing you the best of luck,

Jerry

Answer 2

Whenever I come across ng-model referencing something without a dot (.), it always raises my suspicions. To improve your controller code, consider updating $scope.dt to:

$scope.form = {};
$scope.form.dt = null;

Subsequently, in your html code, make sure to change any references from "dt" to "form.dt". Remember what Misko says - if you're using ng-model without a dot, you might be making a mistake.

Wishing you the best of luck,

Jerry

Answer 3

Answer №2

I encountered a similar issue in the past! Dealing with this kind of thing always frustrates me. In Angular, the way data-binding functions and how views get updated isn't very well explained. But one important lesson I've learned is that whenever you need to update the view using something not supported by Angular, it's best to $watch the variable that's changing. This way, when the value changes, Angular will execute $digest(), going through the modifications and updating the view.

To learn more about $watch, visit: https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Returning to your situation:

Consider using $watch() on the variable set to change (or utilizing $watchGroup for multiple changing variables). For example:

$scope.$watch('minDate'), function(newVal, oldVal, scope){
    if(newVal != oldVal){
        scope.minDate = newVal;
    }
}

I hope this information proves helpful!

Answer 4

I encountered a similar issue in the past! Dealing with this kind of thing always frustrates me. In Angular, the way data-binding functions and how views get updated isn't very well explained. But one important lesson I've learned is that whenever you need to update the view using something not supported by Angular, it's best to $watch the variable that's changing. This way, when the value changes, Angular will execute $digest(), going through the modifications and updating the view.

To learn more about $watch, visit: https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Returning to your situation:

Consider using $watch() on the variable set to change (or utilizing $watchGroup for multiple changing variables). For example:

$scope.$watch('minDate'), function(newVal, oldVal, scope){
    if(newVal != oldVal){
        scope.minDate = newVal;
    }
}

I hope this information proves helpful!

Answer 5

Answer №3

Give this code a shot, I find [(ngModel)] to be quite effective:

    <datepicker min-date="minDate" show-weeks="false" class="well well-lg" [(ngModel)]="dt">    </datepicker>

Answer 6

Give this code a shot, I find [(ngModel)] to be quite effective:

    <datepicker min-date="minDate" show-weeks="false" class="well well-lg" [(ngModel)]="dt">    </datepicker>

Ng-model does not reflect changes made in the datepicker

Answer №1

Answer №2

Answer №3

Similar questions

Card image floating to the right using Bootstrap

Debugger pause following Meteor.call, maybe client/server debugging

Container holding a Material-UI drawer

Tips for hiding the calendar icon once a form has been submitted

Unable to stop submission as a result of ajax verification

When accessing tagName in Internet Explorer 11, the name will be returned in uppercase with the namespace included. However, in Internet Explorer 7,

Implement functionality in JS to track the number of clicks on an element

Sharing data between controllers in AngularJS is a common challenge for many developers. There are various

What is the best way to encapsulate multiple Bluebird promises within a single promise?

if the response from the AJAX request contains

Proper method for executing a synchronous AJAX POST request and subsequently submitting a form

Sign up for and run a JavaScript function within an ASP.NET Page_Load event

Livereload in Gulp fails to automatically restart the server

Enhanced Bootstrap Carousel with White Background Transitions

Error: Unable to access 'map' property of an undefined variable in NextJS while using getStaticPaths

reduce the width and adjust the top margin

What could be causing the "Undefned Jquery-ajax" error to pop up

What is the best way to shut down a browser using C#?

Tips for streamlining the array filtering process

Tips on customizing the appearance of React rendering components