JSFiddle - React, Tailwind, and code Playground

by sebmade

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div ng-app="myApp">
  <div ng-controller="PatientController">
    <label>Prénom: </label>
    <input ng-model="patient.prenom" type="text" placeholder="saisissez le prenom">
    <br>
    <label>Nom: </label>
    <input ng-model="patient.nom" type="text" placeholder="puis le nom">
    <br>
    <label>Date de naissance: </label>
    <input ng-model="patient.dateNaissance" ui-date>
    <hr>
      <h1> {{label}} {{patient.prenom}} {{patient.nom}} {{patient.dateNaissance | date: 'dd/MM/yyyy'}}</h1>
  </div>
</div>

CSS

</style>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script> 
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script> 
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
<script src="http://code.angularjs.org/1.0.0rc10/angular-mocks-1.0.0rc10.js"></script> 
<script src="http://code.angularjs.org/1.0.0rc10/angular-scenario-1.0.0rc10.js"></script>
<link rel="stylesheet" type="text/css" href="http://tryjasmine.com/js/vendor/jasmine-1.1.0/jasmine.css">
<style>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('uiDate', function() {
    return {
      require: '?ngModel',
      scope: {
        uiDate: 'evaluate'
      },
      link: function($scope, element, attrs, controller) {
        var originalRender, updateModel, usersOnSelectHandler;
        if ($scope.uiDate == null) $scope.uiDate = {};
        if (controller != null) {
          updateModel = function(value, picker) {
            return $scope.$apply(function() {
              return controller.$setViewValue(element.datepicker("getDate"));
            });
          };
          if ($scope.uiDate.onSelect != null) {
            usersOnSelectHandler = $scope.uiDate.onSelect;
            $scope.uiDate.onSelect = function(value, picker) {
              updateModel(value);
              return usersOnSelectHandler(value, picker);
            };
          } else {
            $scope.uiDate.onSelect = updateModel;
          }
          originalRender = controller.$render;
          controller.$render = function() {
            originalRender();
            return element.datepicker("setDate", controller.$viewValue);
          };
        }
        return element.datepicker($scope.uiDate);
      }
    };
  });

function Patient() {
  this.nom;
  this.prenom;
  this.dateNaissance;
};

function PatientController($scope) {
  $scope.patient = new Patient();
  $scope.label = "Resultat : ";
};

describe('uiDate', function() {
    
    beforeEach(module('myApp')); 
    
    it('should return a date', function() {
        expect(element("input[ng-model='patient.dateNaissance']").text()).toBeDefined();
    });
    
});

// KICK OFF JASMINE
var jasmineEnv = jasmine.getEnv();
var trivialReporter = new jasmine.TrivialReporter();

jasmineEnv.addReporter(trivialReporter);

jasmineEnv.specFilter = function(spec) {
    return trivialReporter.specFilter(spec);
};

jasmineEnv.execute();