<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<h1>Jquery UI Datepicker, Show/Hide Sundays</h1>
<div class="ng-controller" data-ng-controller="MyController">
<label for="Sundays">Hide Sunday:</label>
<select data-ng-model="nosunday" data-ng-options="v for v in viewModel.nosunday"></select><br>
<label for="StartDate">Start</label>
<input id="StartDate" class="date" data-ng-model="viewModel.startdate" date-from /><br>
<label for="EndDate">End </label>
<input id="EndDate" class="date" data-ng-model="viewModel.enddate" date-to /><br>
<button data-ng-click="clicked = true">Done!</button>
<br>
<div ng-show="clicked">
Hide sunday: {{nosunday}}<br>
Start date: {{viewModel.startdate}}<br>
End date: {{viewModel.enddate}}<br>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
$http.get('test.json')
.success(function (data) {
$scope.viewModel = data[0];
$scope.nosunday = $scope.viewModel.nosunday[0];
});
}]);
app.directive('dateFrom', function() {
return function (scope, element, attrs) {
var doDate = $('#EndDate');
element.datepicker({
dateFormat: 'dd-M-yy', showOtherMonths: true, selectOtherMonths: true, minDate: '0',
beforeShowDay: function (date) {
var day = date.getDay();
console.log(scope.nosunday);
if (scope.nosunday === 'true') return [(day !== 0), '']; // disable sundays
else return [true, ''];
},
onSelect: function (selectedDate) {
var toDate = new Date(element.datepicker("getDate"));
toDate.setDate(toDate.getDate() + 1);
doDate.datepicker('option', 'minDate', toDate);
scope.viewModel.startdate = selectedDate;
scope.viewModel.enddate = doDate.val();
}
});
}
})
app.directive('dateTo', function() {
return function (scope, element, attrs) {
element.datepicker({
dateFormat: 'dd-M-yy', showOtherMonths: true, selectOtherMonths: true, minDate: '1d',
beforeShowDay: function (date) {
var day = date.getDay();
if (scope.viewModel.nosunday) return [(day !== 0), '']; // disable sundays
else return [true, ''];
},
onSelect: function (selectedDate) {
scope.viewModel.enddate = selectedDate;
}
});
}
})
[
{ "startdate": "25-Apr-2013", "enddate": "26-Apr-2013", "nosunday": ["true", "false"] }
]