jquerytools-www/demos/dateinput/flight.htm at master · nylen/jquerytools-www · 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
<%-- :mode=jsp: --%>
<%@ include file="../standalone.jsf" %>

<c:set var="css">
<!-- wrapper, inputs and labels  -->
<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/demos/dateinput/css/flight.css"/>

<!-- calendar styling -->
<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/demos/dateinput/css/flight-calendar.css"/>
</c:set>
${css}

</head>

<body>

<c:set var="html">
<form id="flight">

   <label>
   	Arrival <br />
   	<input type="date" name="arrival" value="Today" />
   </label>

   <label>
   	Departure <br />
   	<input type="date" name="departure" data-value="7" value="After one week" />
   </label>

</form>
</c:set>
${html}

<script>
<c:set var="js">
$(":date").dateinput({ trigger: true, format: 'dd mmmm yyyy', min: -1 })
</c:set>
${js}

<c:set var="js2">
// use the same callback for two different events. possible with bind
$(":date").bind("onShow onHide", function()  {
	$(this).parent().toggleClass("active");
});
</c:set>
${js2}

<c:set var="js3">
// when first date input is changed
$(":date:first").data("dateinput").change(function() {

	// we use it's value for the seconds input min option
	$(":date:last").data("dateinput").setMin(this.getValue(), true);
});
</c:set>
${js3}
</script>