Skip to content

Commit a83fff7

Browse files
author
Dylan Verheul
committed
Adding BootstrapDateInput
1 parent 27c1a38 commit a83fff7

File tree

15 files changed

+758
-9
lines changed

15 files changed

+758
-9
lines changed

COMPONENTS

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Bootstrap (linked)
2+
Twitter
3+
http://twitter.github.com/bootstrap/
4+
Apache 2.0
5+
6+
Bootstrap datepicker (included)
7+
Stefan Petre
8+
http://www.eyecon.ro/bootstrap-datepicker/
9+
Apache 2.0

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,4 @@ Thanks
6262
* to Twitter for building and releasing Bootstrap
6363
* to the Django community for Django
6464
* to the authors of django-bootstrap-form for the inspiration
65+
* to Stefan Petre
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
(function($){
2+
$(function() {
3+
$(".datepicker").datepicker({ format: "dd-mm-yyyy" })
4+
})
5+
})(jQuery)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
/*!
2+
* Datepicker for Bootstrap
3+
*
4+
* Copyright 2012 Stefan Petre
5+
* Licensed under the Apache License v2.0
6+
* http://www.apache.org/licenses/LICENSE-2.0
7+
*
8+
*/
9+
.datepicker {
10+
top: 0;
11+
left: 0;
12+
padding: 4px;
13+
margin-top: 1px;
14+
-webkit-border-radius: 4px;
15+
-moz-border-radius: 4px;
16+
border-radius: 4px;
17+
/*.dow {
18+
border-top: 1px solid #ddd !important;
19+
}*/
20+
}
21+
.datepicker:before {
22+
content: '';
23+
display: inline-block;
24+
border-left: 7px solid transparent;
25+
border-right: 7px solid transparent;
26+
border-bottom: 7px solid #ccc;
27+
border-bottom-color: rgba(0, 0, 0, 0.2);
28+
position: absolute;
29+
top: -7px;
30+
left: 6px;
31+
}
32+
.datepicker:after {
33+
content: '';
34+
display: inline-block;
35+
border-left: 6px solid transparent;
36+
border-right: 6px solid transparent;
37+
border-bottom: 6px solid #ffffff;
38+
position: absolute;
39+
top: -6px;
40+
left: 7px;
41+
}
42+
.datepicker > div {
43+
display: none;
44+
}
45+
.datepicker table {
46+
width: 100%;
47+
margin: 0;
48+
}
49+
.datepicker td, .datepicker th {
50+
text-align: center;
51+
width: 20px;
52+
height: 20px;
53+
-webkit-border-radius: 4px;
54+
-moz-border-radius: 4px;
55+
border-radius: 4px;
56+
}
57+
.datepicker td.day:hover {
58+
background: #eeeeee;
59+
cursor: pointer;
60+
}
61+
.datepicker td.old, .datepicker td.new {
62+
color: #999999;
63+
}
64+
.datepicker td.active, .datepicker td.active:hover {
65+
background-color: #006dcc;
66+
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
67+
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
68+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
69+
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
70+
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
71+
background-image: linear-gradient(top, #0088cc, #0044cc);
72+
background-repeat: repeat-x;
73+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
74+
border-color: #0044cc #0044cc #002a80;
75+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
76+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
77+
color: #fff;
78+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
79+
}
80+
.datepicker td.active:hover,
81+
.datepicker td.active:hover:hover,
82+
.datepicker td.active:active,
83+
.datepicker td.active:hover:active,
84+
.datepicker td.active.active,
85+
.datepicker td.active:hover.active,
86+
.datepicker td.active.disabled,
87+
.datepicker td.active:hover.disabled,
88+
.datepicker td.active[disabled],
89+
.datepicker td.active:hover[disabled] {
90+
background-color: #0044cc;
91+
}
92+
.datepicker td.active:active,
93+
.datepicker td.active:hover:active,
94+
.datepicker td.active.active,
95+
.datepicker td.active:hover.active {
96+
background-color: #003399 \9;
97+
}
98+
.datepicker td span {
99+
display: block;
100+
width: 47px;
101+
height: 54px;
102+
line-height: 54px;
103+
float: left;
104+
margin: 2px;
105+
cursor: pointer;
106+
-webkit-border-radius: 4px;
107+
-moz-border-radius: 4px;
108+
border-radius: 4px;
109+
}
110+
.datepicker td span:hover {
111+
background: #eeeeee;
112+
}
113+
.datepicker td span.active {
114+
background-color: #006dcc;
115+
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
116+
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
117+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
118+
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
119+
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
120+
background-image: linear-gradient(top, #0088cc, #0044cc);
121+
background-repeat: repeat-x;
122+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
123+
border-color: #0044cc #0044cc #002a80;
124+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
125+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
126+
color: #fff;
127+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
128+
}
129+
.datepicker td span.active:hover,
130+
.datepicker td span.active:active,
131+
.datepicker td span.active.active,
132+
.datepicker td span.active.disabled,
133+
.datepicker td span.active[disabled] {
134+
background-color: #0044cc;
135+
}
136+
.datepicker td span.active:active, .datepicker td span.active.active {
137+
background-color: #003399 \9;
138+
}
139+
.datepicker td span.old {
140+
color: #999999;
141+
}
142+
.datepicker th.switch {
143+
width: 145px;
144+
}
145+
.datepicker thead tr:first-child th {
146+
cursor: pointer;
147+
}
148+
.datepicker thead tr:first-child th:hover {
149+
background: #eeeeee;
150+
}
151+
.input-append.date .add-on i, .input-prepend.date .add-on i {
152+
display: block;
153+
cursor: pointer;
154+
width: 16px;
155+
height: 16px;
156+
}

0 commit comments

Comments
 (0)