To reset or clear the selected date from an md-datepicker (AngularJS Material Datepicker), you can use two different approaches depending on your use case:

  1. Using ngModel: If you are using ngModel to bind the selected date, you can clear the selected date by setting the ngModel value to null. This will effectively reset the md-datepicker to its initial state with no selected date.

    In your controller or component, define a variable to hold the selected date:

    javascript
    angular.module('app', ['ngMaterial']) .controller('AppController', function($scope) { $scope.selectedDate = null; // Initially, no date is selected });

    In your HTML template, bind the ngModel of the md-datepicker to the selectedDate variable:

    html
    <md-datepicker ng-model="selectedDate"></md-datepicker> <md-button ng-click="selectedDate = null">Clear Date</md-button>

    The ng-click event handler sets the selectedDate to null, effectively clearing the selected date.

  2. Using ng-change: If you want to handle the clear action without using ngModel, you can use ng-change to capture the date selection and handle the clearing logic:

    html
    <md-datepicker ng-model="selectedDate" ng-change="onDateSelected()"></md-datepicker> <md-button ng-click="clearDate()">Clear Date</md-button>

    In your controller, define the onDateSelected() and clearDate() functions:

    javascript
    angular.module('app', ['ngMaterial']) .controller('AppController', function($scope) { $scope.selectedDate = null; // Initially, no date is selected $scope.onDateSelected = function() { // Handle any logic needed when a date is selected console.log('Date selected:', $scope.selectedDate); }; $scope.clearDate = function() { // Clear the selected date $scope.selectedDate = null; }; });

    When the "Clear Date" button is clicked, the clearDate() function will be called, setting the selectedDate to null and effectively clearing the selected date.

Either of these methods will allow you to reset or clear the selected date from the md-datepicker component in AngularJS Material. Choose the approach that best fits your application's requirements and existing code structure.

Have questions or queries?
Get in Touch