Skip to content

Commit a83fff7

Browse files
author
Dylan Verheul
committedMar 20, 2012
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

‎bootstrap_toolkit/static/bootstrap_toolkit/js/init_datepicker.js

+5
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)

‎bootstrap_toolkit/static/datepicker/css/datepicker.css

+156
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+
}

‎bootstrap_toolkit/static/datepicker/js/bootstrap-datepicker.js

+401
Large diffs are not rendered by default.

‎bootstrap_toolkit/static/datepicker/less/datepicker.less

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
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+
10+
.datepicker {
11+
top: 0;
12+
left: 0;
13+
padding: 4px;
14+
margin-top: 1px;
15+
.border-radius(4px);
16+
&:before {
17+
content: '';
18+
display: inline-block;
19+
border-left: 7px solid transparent;
20+
border-right: 7px solid transparent;
21+
border-bottom: 7px solid #ccc;
22+
border-bottom-color: rgba(0,0,0,.2);
23+
position: absolute;
24+
top: -7px;
25+
left: 6px;
26+
}
27+
&:after {
28+
content: '';
29+
display: inline-block;
30+
border-left: 6px solid transparent;
31+
border-right: 6px solid transparent;
32+
border-bottom: 6px solid @white;
33+
position: absolute;
34+
top: -6px;
35+
left: 7px;
36+
}
37+
>div {
38+
display: none;
39+
}
40+
&.days div.datepicker-days {
41+
display: block;
42+
}
43+
&.months div.datepicker-months {
44+
display: block;
45+
}
46+
&.years div.datepicker-years {
47+
display: block;
48+
}
49+
table{
50+
width: 100%;
51+
margin: 0;
52+
}
53+
td,
54+
th{
55+
text-align: center;
56+
width: 20px;
57+
height: 20px;
58+
.border-radius(4px);
59+
}
60+
td {
61+
&.day:hover {
62+
background: @grayLighter;
63+
cursor: pointer;
64+
}
65+
&.old,
66+
&.new {
67+
color: @grayLight;
68+
}
69+
&.active,
70+
&.active:hover {
71+
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
72+
color: #fff;
73+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
74+
}
75+
span {
76+
display: block;
77+
width: 47px;
78+
height: 54px;
79+
line-height: 54px;
80+
float: left;
81+
margin: 2px;
82+
cursor: pointer;
83+
.border-radius(4px);
84+
&:hover {
85+
background: @grayLighter;
86+
}
87+
&.active {
88+
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
89+
color: #fff;
90+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
91+
}
92+
&.old {
93+
color: @grayLight;
94+
}
95+
}
96+
}
97+
98+
th.switch {
99+
width: 145px;
100+
}
101+
102+
thead tr:first-child th {
103+
cursor: pointer;
104+
&:hover{
105+
background: @grayLighter;
106+
}
107+
}
108+
/*.dow {
109+
border-top: 1px solid #ddd !important;
110+
}*/
111+
}
112+
.input-append,
113+
.input-prepend {
114+
&.date {
115+
.add-on i {
116+
display: block;
117+
cursor: pointer;
118+
width: 16px;
119+
height: 16px;
120+
}
121+
}
122+
}

‎bootstrap_toolkit/templatetags/bootstrap_toolkit.py

-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
from django import template
66
from django.conf import settings
77

8-
BOOTSTRAP_DEFAULT_VERSION = '2.0.1'
9-
10-
BOOTSTRAP_VERSION = getattr(settings, 'BOOTSTRAP_VERSION',
11-
BOOTSTRAP_DEFAULT_VERSION
12-
)
13-
148
BOOTSTRAP_BASE_URL = getattr(settings, 'BOOTSTRAP_BASE_URL',
159
'http://twitter.github.com/bootstrap/assets/'
1610
)

‎bootstrap_toolkit/urls.py

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
from templatetags.bootstrap_toolkit import BOOTSTRAP_BASE_URL, BOOTSTRAP_JS_BASE_URL, BOOTSTRAP_CSS_BASE_URL, BOOTSTRAP_CSS_URL

‎bootstrap_toolkit/widgets.py

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
from django import forms
2+
from django.conf import settings
3+
from django.utils.safestring import mark_safe
4+
from urls import *
5+
6+
def add_to_css_class(classes, new_class):
7+
new_class = new_class.strip()
8+
if new_class:
9+
# Turn string into list of classes
10+
classes = classes.split(" ")
11+
# Strip whitespace
12+
classes = [c.strip() for c in classes]
13+
# Remove empty elements
14+
classes = filter(None, classes)
15+
# Test for existing
16+
if not new_class in classes:
17+
classes.append(new_class)
18+
# Convert to string
19+
classes = u" ".join(classes)
20+
return classes
21+
22+
class BootstrapDateInput(forms.TextInput):
23+
24+
class Media:
25+
js = (
26+
settings.STATIC_URL + 'datepicker/js/bootstrap-datepicker.js',
27+
settings.STATIC_URL + 'bootstrap_toolkit/js/init_datepicker.js',
28+
)
29+
css = {
30+
'screen': (
31+
settings.STATIC_URL + 'datepicker/css/datepicker.css',
32+
)
33+
}
34+
35+
def render(self, name, value, attrs=None):
36+
if not attrs:
37+
attrs = {}
38+
if 'class' in attrs:
39+
attrs['class'] = add_to_css_class(attrs['class'], 'datepicker')
40+
else:
41+
attrs['class'] = 'datepicker'
42+
return super(BootstrapDateInput, self).render(name, value, attrs)

‎setup.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
setup(
44
name='django-bootstrap-toolkit',
5-
version='2.4.0',
5+
version='2.5.0',
66
url='https://github.com/dyve/django-bootstrap-toolkit',
77
author='Dylan Verheul',
88
author_email='dylan@dyve.net',

‎test_project/test_bootstrap/forms.py

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
from django import forms
22
from django.contrib.auth.models import User
3+
from bootstrap_toolkit.widgets import BootstrapDateInput
34

45
class TestForm(forms.Form):
56
title = forms.CharField(
@@ -67,4 +68,7 @@ class TestInlineForm(forms.Form):
6768
('active', 'active'),
6869
('inactive', 'inactive')
6970
), initial='all')
70-
mine = forms.BooleanField(required=False, label='Mine only', initial=False)
71+
mine = forms.BooleanField(required=False, label='Mine only', initial=False)
72+
73+
class WidgetsForm(forms.Form):
74+
date = forms.DateField(widget=BootstrapDateInput)

‎test_project/test_bootstrap/templates/base.html

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<![endif]-->
1818
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
1919
{% bootstrap_javascript_tag "dropdown" %}
20+
{% block extra_head %}{% endblock %}
2021
</head>
2122

2223
<body>

‎test_project/test_bootstrap/templates/form.html

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
{% load bootstrap_toolkit %}
44

5+
{% block extra_head %}
6+
{{ form.media }}
7+
{% endblock %}
8+
59
{% block content %}
610

711
<h1>This is a <em>{{ layout }}</em> Django form, bootstrapped</h1>

‎test_project/test_bootstrap/views.py

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
from django.shortcuts import render_to_response
22
from django.template.context import RequestContext
33
from test_bootstrap.forms import TestForm
4-
from test_project.test_bootstrap.forms import TestModelForm, TestInlineForm
4+
from test_project.test_bootstrap.forms import TestModelForm, TestInlineForm, WidgetsForm
55

66
def test_form_with_template(request):
77
layout = request.GET.get('layout')
@@ -60,4 +60,12 @@ def test_tabs(request):
6060
return render_to_response('tabs.html', RequestContext(request, {
6161
'tabs': tabs,
6262
'layout': layout,
63+
}))
64+
65+
def test_widgets(request):
66+
layout = request.GET.get('layout', 'vertical')
67+
form = WidgetsForm()
68+
return render_to_response('form.html', RequestContext(request, {
69+
'form': form,
70+
'layout': layout,
6371
}))

‎test_project/urls.py

+1
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@
2222
(r'^form_template$', 'test_bootstrap.views.test_form_with_template'),
2323
(r'^form_inline$', 'test_bootstrap.views.test_form_inline'),
2424
(r'^tabs$', 'test_bootstrap.views.test_tabs', {}, "tabs"),
25+
(r'^widgets$', 'test_bootstrap.views.test_widgets', {}, "widgets"),
2526
)

0 commit comments

Comments
 (0)
Please sign in to comment.