Attendize/public/vendor/datetimepicker/demo/AngularJS/BasicDatePicker-AngularJS.htm

82 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Date Picker with AngularJS</title>
<link rel="stylesheet" type="text/css" href="../../src/DateTimePicker.css" />
<script type="text/javascript" src="../jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="angular-1.4.2.min.js"></script>
<script type="text/javascript" src="../../src/DateTimePicker.js"></script>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker-ltie9.css" />
<script type="text/javascript" src="../src/DateTimePicker-ltie9.js"></script>
<![endif]-->
<style type="text/css">
p
{
margin-left: 20px;
}
input
{
width: 200px;
padding: 10px;
margin-left: 20px;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
var dDate1;
angular.module("App-DTP", []).controller("Ctrl-DTP", function($scope)
{
$scope.date1 = new Date(2015, 11, 26, 0, 0, 0, 0);
$scope.datestring1 = "26-11-2015";
$scope.setValue = function()
{
console.log("Before setValue : " + $scope.date1 + " " + $scope.datestring1);
$scope.date1 = new Date(dDate1);
console.log("After setValue : " + $scope.date1 + " " + $scope.datestring1);
};
});
$(document).ready(function()
{
$("#dtBox").DateTimePicker(
{
settingValueOfElement: function(sValue, dValue, oInputElement)
{
dDate1 = dValue;
console.log("settingValueOfElement : " + dDate1+ " " + sValue);
}
});
});
</script>
</head>
<body ng-app="App-DTP" ng-controller="Ctrl-DTP">
<p>Date : </p>
<input type="text" data-field="date" id="ipDate1" ng-model="datestring1" ng-change="setValue()" readonly>
<div>Date 1 : {{ datestring1 }}</div>
<div id="dtBox"></div>
</body>
</html>