<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/angular/bower-material/master/angular-material.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/mominsamir/smDateTimeRangePicker/master/src/picker.css">
<link rel='stylesheet' href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='https://cdn.rawgit.com/angular/bower-material/master/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js'></script>
<script src='https://rawgit.com/mominsamir/smDateTimeRangePicker/master/src/picker.js'></script>
<script src="script.js"></script>
</head>
<body ng-app="demo">
<md-content class="md-whiteframe-z2" layout-padding ng-controller="AppCtrl as vm">
<div layout="row">
DateTime picker, week start date is Monday
</div>
<div layout="row">
<sm-date-time-picker
fname="field"
label="Date of Birth"
ng-model="vm.employee.dateOfBirth"
flex="50"
flex-sm="100"
flex-xs="100"
is-required="{{true}}"
format="MM-DD-YYYY HH:mm"
mode="date-time"
week-start-day="Monday">
</sm-date-time-picker>
</div>
<div layout="row">
Date picker, Max date set to 02-20-2016 and week start date is Sunday
</div>
<div layout="row">
<sm-date-time-picker
fname="joiningDate"
label="Date of Joining"
ng-model="vm.employee.joiningDate"
data-start-date="10-15-2015"
flex="50"
flex-sm="100"
flex-xs="100"
max-date="02-20-2016"
is-required="{{true}}"
format="MM-DD-YYYY"
week-start-day="Sunday">
</sm-date-time-picker>
</div>
<div layout="row">
Date picker, Close on date select only works with <b> Date Picker </b> mode with attribute <b> close-on-select="true"
</div>
<div layout="row">
<sm-date-time-picker
fname="exitDate"
label="Date of Exit"
ng-model="vm.employee.exitDate"
data-start-date="10-15-2015"
flex="50"
flex-sm="100"
flex-xs="100"
close-on-select="true"
is-required="{{true}}"
format="MM-DD-YYYY"
week-start-day="Monday">
</sm-date-time-picker>
</div>
<div layout="row">
Min date set to 11-10-2015
</div>
<div layout="row">
<sm-date-time-picker
fname="Date of Pay"
label="Date of Pay"
form="empForm"
min-date="11-10-2015"
ng-model="vm.employee.dateOfPay"
flex="50"
is-required="{{true}}"
format="MM-DD-YYYY HH:mm"
mode="date-time"
week-start-day="Sunday">
</sm-date-time-picker>
</div>
<div>
<h2 class="md-title">Demo For Date Range Picker</h2>
<div layout="row">
<sm-range-picker-input
fname="emplyeeReport"
label="Report Date"
form="test"
min-date="11-10-2015"
ng-model="vm.employee.emplyeeReport"
flex="50"
is-required="{{true}}"
format="MM-DD-YYYY"
divider=":"
mode="date-time"
week-start-day="Sunday">
</sm-range-picker-input>
</div>
</div>
<div layout="row">
<md-button class="md-button md-primary" ng-click="vm.show()" >show dailog</md-button>
</div>
</md-content>
</body>
</html>
// Code goes here
var app = angular.module("demo", ['ngMaterial','smDateTimeRangePicker'])
.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('deep-orange')
.backgroundPalette('grey');
});
function appCtrl($mdDialog){
var self = this;
self.show= function(ev){
$mdDialog.show({
templateUrl: 'temp.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: false
});
}
}
app.controller('AppCtrl',['$mdDialog',appCtrl]);
//over ride css z index to show calander above dailog.
.sm-calender-pane {
z-index: 100;
}
<md-dialog aria-label="Mango (Fruit)" ng-cloak>
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Mango (Fruit)</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content">
<h2>Using .md-dialog-content class that sets the padding as the spec</h2>
<p>
<div layout="row">
<sm-date-time-picker
fname="field"
lable="Date of Birth"
form="empForm"
ng-model="vm.employee.dateOfBirth"
flex="50"
flex-sm="100"
flex-xs="100"
is-required="{{true}}"
format="MM-DD-YYYY HH:mm"
mode="date-time"
week-start-day="Monday">
</sm-date-time-picker>
</div>
</p>
<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">
<p>
It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
</p>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
More on Wikipedia
</md-button>
<span flex></span>
<md-button ng-click="answer('not useful')">
Not Useful
</md-button>
<md-button ng-click="answer('useful')" style="margin-right:20px;">
Useful
</md-button>
</md-dialog-actions>
</form>
</md-dialog>