My favorites
▼
|
Sign in
nyromodal
nyroModal - jQuery Modal Plugin
Project Home
Downloads
Issues
READ-ONLY: This project has been
archived
. For more information see
this post
.
Search
Search within:
All issues
Open issues
New issues
Issues to verify
for
Advanced search
Search tips
Subscriptions
Issue
52
attachment: codeSample.html
(5.3 KB)
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
--------------8<---------------------------------------
FILE index.php, used to call the modal window:
--------------8<---------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nyroModal :: Demo</title>
<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.nyroModal-1.2.7.js"></script>
</head>
<body>
<h1>Demos</h1>
<p><a href="datePicker.php" class="nyroModal" rev="modal">datePicker in a nyroModal</a></p>
</body>
</html>
--------------8<---------------------------------------
FILE datePicker.php, content of the nyroModal window.
--------------8<---------------------------------------
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery datePicker simple datePickerStartEnd demo</title>
<!-- firebug lite -->
<script type="text/javascript" src="firebug/firebug.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<!-- required plugins -->
<script type="text/javascript" src="js/date.js"></script>
<!--[if IE]><script type="text/javascript" src="js/jquery.bgiframe.min.js"></script><![endif]-->
<!-- jquery.datePicker.js -->
<script type="text/javascript" src="js/jquery.datePicker.js"></script>
<!-- datePicker required styles -->
<link rel="stylesheet" type="text/css" media="screen" href="css/datePicker.css">
<!-- page specific scripts -->
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker()
$('#start-date').bind(
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#end-date').dpSetStartDate(d.addDays(1).asString());
}
}
);
$('#end-date').bind(
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#start-date').dpSetEndDate(d.addDays(-1).asString());
}
}
);
});
</script>
</head>
<body>
<div id="container">
<h1>jquery.datePicker example: linked datePickers with start and end dates</h1>
<p><a href="index.html">< date picker home</a></p>
<p>
The following example displays how you can synchronise two date pickers together. A common
scenario for an online date picker is when booking flights or something where you need to input
outbound and inbound dates. The start date must be before the end date and vice versa. We can enforce
this rule with a very simple little bit of script.
</p>
<form name="chooseDateForm" id="chooseDateForm" action="#">
<fieldset>
<legend>Test date picker form</legend>
<ol>
<li>
<label for="start-date">Start date:</label>
<input name="start-date" id="start-date" class="date-pick" />
</li>
<li>
<label for="end-date">End date:</label>
<input name="end-date" id="end-date" class="date-pick" />
</li>
<li>
<label for="test-select">Test select:</label>
<select name="test-select" id="test-select" style="width: 170px">
<option value="1">Test SELECT </option>
<option value="2">Doesn't shine through</option>
<option value="3">Even in IE</option>
<option value="4">Yay!</option>
</select>
</li>
</ol>
</fieldset>
</form>
<h2>Page sourcecode</h2>
<pre class="sourcecode">
$(function()
{
$('.date-pick').datePicker()
$('#start-date').bind(
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#end-date').dpSetStartDate(d.addDays(1).asString());
}
}
);
$('#end-date').bind(
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#start-date').dpSetEndDate(d.addDays(-1).asString());
}
}
);
});</pre>
<h2>Page CSS</h2>
<pre class="sourcecode">
/* located in demo.css and creates a little calendar icon
* instead of a text link for "Choose date"
*/
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
/* makes the input field shorter once the date picker code
* has run (to allow space for the calendar icon
*/
input.dp-applied {
width: 140px;
float: left;
}</pre>
</div>
</body>
</html>
Powered by
Google Project Hosting