JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.ionicframework.com/1.0.0-beta.6/css/ionic.css">
<div>
<div class="list" ng-app="sampleApp" ng-controller="MainCtrl">
<label class="item">
<button class="button button-block button-outline button-energized" ng-click="showPopupExitDate()">
Adicionar data de saída
</button>
</label>
</div>
</div>
JavaScript
var SampleApp;
(function(SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function($scope, $ionicPopup) {
$scope.profile = {};
// Triggered on a button click, or some other target
$scope.showPopupExitDate = function() {
var templateDate = '<label class="item item-input">' +
'<span class="input-label">Data</span>' +
'<input datepicker type="text" onkeydown="return false" ng-model="profile.exitDate" style="position: relative; z-index: 100000 !important; ">' +
'</label>';
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: templateDate,
title: 'Data de saída',
subTitle: '(Esta ação é irreversível!)',
scope: $scope,
buttons: [{
text: 'Cancelar'
}, {
text: '<b>Guardar</b>',
type: 'button-energized',
onTap: function(e) {
if (!$scope.profile.exitDate) {
//don't allow the user to close unless he enters exit date
e.preventDefault();
} else {
return $scope.profile.exitDate;
}
}
}]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
};
})
/**
* jquery date picker directive
*/
.directive('datepicker', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
$(function() {
element.datepicker({
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd',
//maxDate: new Date(),
onSelect: function(dateText, inst) {
ngModelCtrl.$setViewValue(dateText);
scope.$apply();
}
});
});
}
}
});
})(SampleApp ||...