JSFiddle - React, Tailwind, and code Playground

by Wietse De Vries

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>

CSS

.ui-datepicker {
	pointer-events: auto;
}

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 ||...