This repository has been archived by the owner on May 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
125 lines (122 loc) · 8.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MacGyver Datepicker Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.min.css" rel="stylesheet">
<style>
body{padding-top:49px;position:relative}
h1.hero{color:#363636;font-size:60px;font-weight:500;text-align:center;margin-bottom:22px;text-shadow:0 1px 1px rgba(0,0,0,0.15)}
section{padding-top:29px;}
section h1{padding-bottom:9px;margin:20px 0;border-bottom:1px solid #eee}
#top-nav{background-color:#363636;position:fixed;top:0;width:100%;min-width:700px;height:49px;z-index:10;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0);-o-transform:rotateX(0) rotateY(0);-ms-transform:rotateX(0) rotateY(0);transform:rotateX(0) rotateY(0);}
#top-nav #logo{display:inline-block;height:39px;padding:10px 0;}
#top-nav #logo h2{margin:0}
#top-nav .nav-menu{margin:0 auto;display:inline-block;overflow:hidden;list-style:none;}
#top-nav .nav-menu li{margin-right:10px;display:inline-block;}
#top-nav .nav-menu li a:hover{text-decoration:underline}
#top-nav a,#top-nav a:visited,#top-nav a:active{display:block;padding:2px 10px 0;font-size:14px;color:#fff;text-decoration:none}
.macgyver-head{padding-top:10px;position:relative;text-align:center;}
.docs-example{position:relative;margin:15px 0;padding:39px 19px 14px;*padding-top:19px;background-color:#fff;border:1px solid #ddd;-webkit-border-radius:4px;border-radius:4px;min-height:25px;}
.docs-example:after{content:"Example";position:absolute;top:-1px;left:-1px;padding:3px 7px;font-size:12px;font-weight:bold;background-color:#f5f5f5;border:1px solid #ddd;color:#9da0a4;-webkit-border-radius:4px 0 4px 0;border-radius:4px 0 4px 0}
.docs-example .mac-menu{position:relative}
.footer{text-align:center;padding:30px 0;margin-top:70px;border-top:1px solid #e5e5e5;background-color:#f5f5f5;}
.footer p{margin-bottom:0;color:#777}.footer .footer-links{margin:10px 0;}
.com{color:#93a1a1}
.lit{color:#195f91}
.pun,.opn,.clo{color:#93a1a1}
.fun{color:#dc322f}
.str,.atv{color:#d14}
.kwd,.prettyprint .tag{color:#1e347b}
.typ,.atn,.dec,.var{color:#008080}
.pln{color:#48484c}
.prettyprint{padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8}
.prettyprint.linenums{-webkit-box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0;box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0}
ol.linenums{margin:0 0 0 33px;}
ol.linenums li{padding-left:12px;color:#bebec5;line-height:20px;text-shadow:0 1px 0 #fff}
</style>
</head>
<body ng-app="Mac.Datepicker" mac-scroll-spy mac-scroll-spy-offset="10">
<div id="top-nav">
<div class="container">
<a id="logo" href="http://angular-macgyver.github.io/MacGyver/"><h2>MacGyver</h2></a>
</div>
</div>
<div class="container">
<div ng-controller="DemoController" class="row content">
<div id="example" class="col-md-12 col-xs-12">
<section id="table-view">
<h1 id="datepicker">Datepicker</h1>
<p>A directive for creating a datepicker on text input using jquery ui. Time input can use any <code>ng-</code> attributes support by text input type. </p>
<h3 id="dependencies">Dependencies</h3>
<ul>
<li>jQuery </li>
<li>jQuery UI datepicker </li>
</ul>
<h3 id="parameters">Parameters</h3>
<p><strong>ng-model</strong><br>Type: <code>String</code><br>The model to store the selected date<br>Clearing model by setting it to null or '' will clear the input field </p>
<p><strong>mac-datepicker-on-select</strong><br>Type: <code>Function</code><br>Function called before setting the value to the model </p>
<ul>
<li><code>date</code> - {String} Selected date from the datepicker </li>
<li><code>instance</code> - {Object} Datepicker instance </li>
</ul>
<p><strong>mac-datepicker-on-close</strong><br>Type: <code>String</code><br>Function called before closing datepicker </p>
<ul>
<li><code>date</code> - {String} Selected date from the datepicker </li>
<li><code>instance</code> - {Object} Datepicker instance </li>
</ul>
<p><strong>mac-datepicker-append-text</strong><br>Type: <code>String</code><br>The text to display after each date field </p>
<p><strong>mac-datepicker-auto-size</strong><br>Type: <code>Boolean</code><br>Automatically resize the input to accommodate dates in the current dateFormat </p>
<p><strong>mac-datepicker-change-month</strong><br>Type: <code>Boolean</code><br>Whether the month should be rendered as a dropdown instead of text </p>
<p><strong>mac-datepicker-change-year</strong><br>Type: <code>Boolean</code><br>Whether the year should be rendered as a dropdown instead of text </p>
<p><strong>mac-datepicker-constrain-input-type</strong><br>Type: <code>Boolean</code><br>Constrain characters allowed by the current dateFormat </p>
<p><strong>mac-datepicker-current-text</strong><br>Type: <code>String</code><br>Text to display for the current day link </p>
<p><strong>mac-datepicker-date-format</strong><br>Type: <code>String</code><br>The format for parse and displayed dates </p>
<p><strong>mac-datepicker-default-date</strong><br>Type: <code>Expression</code><br>Date to highligh on first opening if the field is blank {Date|Number|String} </p>
<p><strong>mac-datepicker-duration</strong><br>Type: <code>String</code><br>Control the speed at which the datepicker appears </p>
<p><strong>mac-datepicker-first-day</strong><br>Type: <code>Integer</code><br>Set the first day of the week. Sunday is 0, Monday is 1 </p>
<p><strong>mac-datepicker-max-date</strong><br>Type: <code>Expression</code><br>The maximum selectable date {Date|Number|String} </p>
<p><strong>mac-datepicker-min-date</strong><br>Type: <code>Expression</code><br>The minimum selectable date {Date|Number|String} </p>
<p><strong>mac-datepicker-number-of-months</strong><br>Type: <code>Integer</code><br>The number of months to show at once </p>
<p><strong>mac-datepicker-show-on</strong><br>Type: <code>String</code><br>When the datepicker should appear </p>
<p><strong>mac-datepicker-year-range</strong><br>Type: <code>Integer</code><br>The range of years displayed in the year drop-down </p>
<p><strong>ng-disabled</strong><br>Type: <code>Boolean</code><br>Enable or disable datepicker </p>
<h3>Example
<div class="docs-example">
<mac-datepicker id="input-start-date" ng-model="startDate" mac-datepicker-min-date="minDate"></mac-datepicker>
</div>
<pre class="prettyprint"><mac-datepicker id="input-start-date" ng-model="startDate"></mac-datepicker></pre>
</h3>
</section>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>Code licensed under <a href="https://github.com/angular-macgyver/macgyver-datepicker/blob/master/LICENSE">MIT</a></p>
</div>
<ul class="list-inline">
<li>Currently 0.5.3</li>
<li>·</li>
<li><a href="https://github.com/angular-macgyver/macgyver-datepicker">Github</a></li>
<li>·</li>
<li><a href="https://github.com/angular-macgyver/macgyver-datepicker/issues">Issues</a></li>
<li>·</li>
<li><a href="https://github.com/angular-macgyver/macgyver-datepicker/blob/master/CHANGELOG.md">Changelog</a></li>
<li>·</li>
<li><a href="https://github.com/angular-macgyver/macgyver-datepicker/blob/master/README.md">README</a></li>
</ul>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js" type="text/javascript"></script>
<script src="macgyver-datepicker.js"></script>
<script>
angular.module("Mac.Datepicker").controller("DemoController", function ($scope) {
});
window.prettyPrint && prettyPrint();
</script>
</body>
</html>