jquery-ui-month-picker/test/test.html at master · KidSysco/jquery-ui-month-picker · GitHub

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html>

<head>
    <title>jQuery UI Month Picker tests</title>
    <meta charset="UTF-8">

    <!--flick smoothness-->
    <link rel="stylesheet" type="text/css" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
    <!-- Make sure the plugin can handle  Bootstrap's CSS (#35) -->
    <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../src/MonthPicker.css" />
    <link rel="stylesheet" type="text/css" href="test.css" />
    <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />

    <script src="../bower_components/jquery/jquery.js"></script>
    <!-- Test against 1.9.1 -->
    <script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
    <!-- Test against 1.9.2 -->
    <!-- Make sure the plugin can handle  Bootstrap's JS (#35) -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../bower_components/qunit/qunit/qunit.js"></script>
    <script>
        if (typeof $ === 'undefined' || !$.ui || typeof QUnit === 'undefnied') {
				var message =
					"Welcome to the jQuery UI Month Picker project.\n" +
		            "\n" +
	                "jQuery UI and QUnit are required for testing.\n" +
	                "Please download node.js, 'cd ./jquery-ui-month-picker' and run 'npm install'.\n" +
	                "\n" +
	                "Tests can be ran from the command line using the 'grunt test' command.";

				if (alert) {
					alert(message);
				}

				throw message;
			}
    </script>
    <script src="../bower_components/jquery.maskedinput/dist/jquery.maskedinput.min.js"></script>
    <script src="../src/MonthPicker.js"></script>
    <script>
        $(function() {
		       $(apiVersion).html("Version " + $.MonthPicker.VERSION);
	        });
    </script>
    <script src="test.js"></script>
</head>

<body>
    <div>
        <h2 id='apiVersion'>Version @VERSION</h2>

        <div class="demo"> <b>.position() Integration Demonstration</b>

            <br />This demonstrates the Month Picker integration with the optional .position() plugin. The right aligned input
            helps to show how the menu will not allow the edges of the window to hide it's appearance. This test should remain
            first in the list so that no automated scrolling is needed.
            <p class="text-right">
                <br />Choose a month:
                <input id="PositionDemo" type="text" value="02/2012" />
            </p>
        </div>

        <p class="demo"> <b>Button test</b>
            <br />
            <br />Choose a Month:
            <input id="IconDemo" type="text" />
            <br />Plain Button:
            <input id="PlainButtonField" />
            <br />Image Button:
            <input id="ImgButtonField" />
            <br />External element:
            <input id="ExistingButtonField" />
            <a id='ExistingButton' href='javascript:void 0;'>Open</a>
            <span id='DisabledExistingButton'>Open</span>
            <br />
            <input id="SelectorButtonField" />
            <button id='SelectorButton'>First open button</button>
            <br>
            <button id='OtherSelectorButton'>Second open button</button>
            <br> No button:
            <input id="NoButtonField" />
            <br>
			<br> ShowOn both:
            <input id="ShowOnBothField" />
        </p>

        <p class="demo"> <b>Month format test</b> Choose a Month:
            <input id="FormatField" />
        </p>

        <p class="demo"> <b>Min/MaxMonth test</b> Choose a Month:
            <input id="RistrictMonthField" />
        </p>

        <p class="demo"> <b>Right to left</b> Choose a Month:
            <input id="RTLField" />
        </p>

        <p class="demo"> <b>Toggle method test</b> Choose a Month:
            <input id="ToggleField" />
        </p>

        <p class="demo"> <b>Events</b> Choose a Month:
            <input id="EventsField" />
        </p>

        <p class="demo"> <b>Today is highlighted</b> Choose a Month:
            <input id="highlightedField" />
        </p>

        <div class="demo"> <b>Inline menu:</b>
            <div id='InlineMenuDiv'></div>
        </div>

        <div class="demo"> <b>AltField and AltFormat option test:</b>
            <input id='MainAltField' />
            <input id='SecondaryAltField' />
        </div>

        <p class="demo"> <b>Only one picker open test</b> First picker:
            <input id="FirstField" />
            <br /> Second picker:
            <input id="SecondField" />
        </p>

        <p class="demo"> <b>MinMonth and MaxMonth Demonstration</b>

            <br />This demonstrates how you can limit the user to choosing months within a given interval.
            <br />
            <br />Future months only:
            <br />
            <input id="FutureDateDemo" type="text" />
            <br />
            <br />Past months only:
            <br />
            <input id="PastDateDemo" type="text" />
            <br />
            <br />18 months from today:
            <br />
            <input id="YearAndAHalfDeom" type="text" />
        </p>
        <p class="demo"> <b>Start Year Demonstration</b>

            <br />This demonstrates how the plugin will default to the year specified in the text box. Changing the year in the
            text box will result in a new default year for the chooser and if no date is selected then the default year is
            the current year.
            <br />
            <br />Choose a month:
            <input id="StartYearDemo" type="text" value="01/2025" />
        </p>
        <p class="demo"> <b>Override Start Year Demonstration</b>

            <br />This demonstrates how the MonthPicker can be configured to override the start year default behavior. This MonthPicker
            will start on 2023 no matter which date is currently selected, even if no date is specified.
            <br />
            <br />Choose a month:
            <input id="OverrideStartYear" type="text" />
        </p>
        <p class="demo"> <b>Get Month/Year & Validation API Demonstration</b>

            <br />This demonstrates API usage for the GetSelectedMonthYear(), GetSelectedYear() and GetSelectedMonth() function
            calls which will also perform date validation. Clear() will clear the text field and any validation messages.
            <br />
            <br />Choose a month:
            <input id="GetYearDemo" class="GetYearDemo" type="text" value="02/2012" />
            <br />
            <br />
            <button type="button" onclick="alert($('.GetYearDemo').MonthPicker('GetSelectedYear'));">Get Year</button>
            <button type="button" onclick="alert($('#GetYearDemo').MonthPicker('GetSelectedMonth'));">Get Month</button>
            <button type="button" onclick="alert($('#GetYearDemo').MonthPicker('GetSelectedMonthYear'));">Get Month and Year</button>
            <button type="button" onclick="$('#GetYearDemo').MonthPicker('Clear');">Clear</button>
        </p>
        <p class="demo"> <b>Disable/Enable API Demonstration</b>

            <br />This demonstrates API usage for the Enable() and Disable().
            <br />
            <br />Choose a month:
            <input id="EnableDisableDemo" type="text" value="12/2009" />
            <br />
            <button type="button" onclick="$('#EnableDisableDemo').MonthPicker('option', 'Disabled', true);">Disable</button>
            <button type="button" onclick="$('#EnableDisableDemo').MonthPicker('option', 'Disabled', false);">Enable</button>
        </p>
        <p class="demo"> <b>Digital Bush Integration Demonstration</b>

            <br />This demonstrates how the MonthPicker plugin integrates with the <a href="http://digitalbush.com/" target="_new">Digital Bush Plugin for Input Masking</a>            as well as the html 5 placeholder attribute to simulate watermarking. Try to type an invalid date and try the
            Get Month/Year button to fire off validation.
            <br />
            <br />Type in a month/year:
            <br />
            <input id="DigitalBush" type="text" class="digital-bush" />
            <br />
            <br />Type in a month/year::
            <br />
            <input id="DigitalBushBoth" type="text" class="digital-bush" placeholder="mm/yyyy" />
            <br />
            <br />
            <button type="button" onclick="$('.digital-bush').MonthPicker('Clear');">Clear All</button>
            <button type="button" onclick="alert($('#DigitalBushBoth').MonthPicker('GetSelectedMonthYear'));">Get Month/Year</button>
        </p>

        <p class="demo"> <b>HTML 5 Month Input Type Support</b>

            <br />This demonstrates how the MonthPicker will work with the HTML 5 Month Input Type. View this section using Chrome
            to see Google's latest implementation in comparison.
            <br />
            <br /> Jquery UI Month Picker:
            <input id="Html5" type="month" class="" />
            <br />
            <br /> Chrome Month Picker:
            <input id="ChromeMonthPicker" type="month" class="" />
        </p>
    </div>
<!--
    <div id="qUnitOutput" style="margin-bottom: 25px;">
        <h1 id="qunit-header">
            qUnit Testing Output</h1>

        <h2 id="qunit-banner">
        </h2>

        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent">
        </h2>

        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup</div>
    </div>
-->
<div id="qunit"></div>
  <div id="qunit-fixture"></div>
</body>

</html>