JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.2.1/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.2.1/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.7.2/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-aria/1.7.2/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.7.2/angular-messages.min.js"></script>
<div ng-controller="AppController">
	<pre>Selected: {{datetime}}</pre>
	<pre>Limits: {{limits | json}}</pre>
	<hr>
	<md-datepicker ng-model="datetime" md-min-date="limits.min" md-max-date="limits.max"></md-datepicker>
</div>

JavaScript

( function() {
angular.module( 'app', [ 'ngMaterial' ] )
	.controller( 'AppController', AppController );

function AppController( $scope ) {
	$scope.datetime;
	$scope.limits = {
		/*min: undefined,
		max: undefined*/
	};
	
	activate();
	
	function activate() {
		$scope.datetime = new Date();
		
		setDatetime( 'min', 10 );
		setDatetime( 'max', 20 );
		
		function setDatetime( prop, hour ) {
			var dt = new Date();
			dt.setHours( hour );
			$scope.limits[ prop ] = dt;
		}
	}
}
} )();