Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="App">
  
  <script type="text/ng-template" id="checkInCheckOut.tpl.html">
    <form name="form" ng-submit="submit()">
     <input type="text" class="date" ng-model="checkIn" id="checkin_date" Placeholder="Check-In date" ng-required="true"  />
     <input type="text" class="date" ng-model="checkOut" id="checkout_date" Placeholder="Check-Out date" ng-required="true" />
  </form>
  </script>
​
  <div ng-controller="AppCtrl">
  <check-in-check-out checkIn="vm.checkin" checkIn="vm.checkout"/>
  </div>
</body>
</html>
 
var app = angular.module('App', []);
​
app.controller('AppCtrl', ['$scope', function($scope){
  $scope.vm = {
    checkin: '',
    checkout: ''
  };
}]);
​
app.directive('checkInCheckOut',['$timeout', function ($timeout) {
return {
    restrict: 'E',
    templateUrl: 'checkInCheckOut.tpl.html',
    replace: true,
    scope: {
      checkIn:'=',
      checkOut:'='
    },
    link: function (scope, element, attrs, ngModelCtrl) {
        
       $("#checkin_date").datepicker({
            dateFormat: 'dd/mm/yy',
            minDate:  0,
            onSelect: function (formattedDate) {
                var date1 = $('#checkin_date').datepicker('getDate'); 
                var date = new Date( Date.parse( date1 ) ); 
                date.setDate( date.getDate() + 1 );        
                var newDate = date.toDateString(); 
                newDate = new Date( Date.parse( newDate ) );   
                $('#checkout_date').datepicker("option","minDate",newDate);
                $timeout(function(){
                  scope.checkIn = formattedDate;
                });
            }
        });
      
      $("#checkout_date").datepicker({
            dateFormat: 'dd/mm/yy',
            minDate:  0,
            onSelect: function (formattedDate) {
                var date2 = $('#checkout_date').datepicker('getDate'); 
                $timeout(function(){
                  scope.checkOut = formattedDate;
                });
            }
        });
      
        function ge(){
          //...
        }
      
        scope.submit = function(){
          if (scope.form.$valid && ge()) {
            
          }  
        };
      
    }
};
}]);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Grievousheadpro
0viewers