@Oleg I have a good sample to you. <!DOCTYPE html> <!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp --> <html lang="en" ng-app="app" ng-csp> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" /> <!-- JS dependencies (order matters!) --> <script src="scripts/platformOverrides.js"></script> <script src="lib/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <!-- CSS dependencies --> <link rel="stylesheet" href="lib/onsen/css/onsenui.css" /> <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" /> <!-- CSP support mode (required for Windows Universal apps) --> <link rel="stylesheet" href="lib/angular/angular-csp.css" /> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- --------------- App init --------------- --> <title>Onsen UI Sliding Menu</title> <script> var app = angular.module('app', ['onsen', 'ui.bootstrap']); app.controller('testController', function($scope){ $scope.today = function() { $scope.dt = new Date(); }; $scope.today(); $scope.clear = function () { $scope.dt = null; }; // Disable weekend selection $scope.disabled = function(date, mode) { return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) ); }; $scope.toggleMin = function() { $scope.minDate = $scope.minDate ? null : new Date(); }; $scope.toggleMin(); $scope.maxDate = new Date(2020, 5, 22); $scope.open = function($event) { $scope.status.opened = true; }; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; $scope.format = $scope.formats[0]; $scope.status = { opened: false }; var tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); var afterTomorrow = new Date(); afterTomorrow.setDate(tomorrow.getDate() + 2); $scope.events = [ { date: tomorrow, status: 'full' }, { date: afterTomorrow, status: 'partially' } ]; $scope.getDayClass = function(date, mode) { if (mode === 'day') { var dayToCheck = new Date(date).setHours(0,0,0,0); for (var i=0;i<$scope.events.length;i++){ var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); if (dayToCheck === currentDay) { return $scope.events[i].status; } } } return ''; }; }); </script> <style> .page--menu-page__background { background-color: #333; } .page--menu-page__content { color: white; } .menu-close, .menu-close > .toolbar-button { color: #999; } .menu-list, .menu-item:first-child, .menu-item:last-child, .menu-item { background-color: transparent; background-image: none !important; border-color: transparent; color: #fff; } .menu-item { padding: 0 0 0 20px; line-height: 52px; height: 52px; text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px; } .menu-item:active { background-color: rgba(255, 255, 255, 0.1); } .menu-notification { display: inline-block; margin-top: 12px; font-size: 14px; height: 16px; line-height: 16px; min-width: 16px; font-weight: 600; } .bottom-menu-list, .bottom-menu-item:first-child, .bottom-menu-item:last-child, .bottom-menu-item { border-color: #393939; background-color: transparent; background-image: none !important; color: #ccc; } .bottom-menu-item:active { background-color: rgba(255, 255, 255, 0.1); } .nav, .pagination, .carousel, .panel-title a { cursor: pointer; } </style> </head> <body> <!-- Cordova reference --> <script src="cordova.js"></script> <script src="scripts/index.js"></script> <!-- --> <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true"> </ons-sliding-menu> <ons-template id="menu.html"> <ons-page modifier="menu-page"> <ons-toolbar modifier="transparent"></ons-toolbar> <ons-list class="menu-list"> <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})"> <ons-icon icon="fa-plus"></ons-icon> New Post </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> <ons-icon icon="fa-bookmark"></ons-icon> Bookmark </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})"> <ons-icon icon="fa-twitter"></ons-icon> Official Twitter </ons-list-item> </ons-list> <br> <ons-list class="bottom-menu-list"> <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> Settings <div class="notification menu-notification">3</div> </ons-list-item> <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})"> Help </ons-list-item> <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> Send feedback </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="page1.html"> <ons-page ng-controller="testController"> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Page 1</div> </ons-toolbar> <ons-row style="margin-top: 100px; text-align: center;"> <ons-col> <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> <h4>Inline</h4> <div style="display:inline-block; min-height:290px;"> <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker> </div> <h4>Popup</h4> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> <div class="col-md-6"> <p class="input-group"> <input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select> </div> </div> <hr /> <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button> <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button> <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button> <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button> </ons-col> </ons-row> </ons-page> </ons-template> <ons-template id="page2.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Page 2</div> </ons-toolbar> <ons-row style="margin-top: 100px; text-align: center;"> <ons-col> <ons-button modifier="light" ng-click="menu.toggleMenu()"> Toggle Menu </ons-button> </ons-col> </ons-row> </ons-page> </ons-template> </body> </html>