Improved tasks.

app/assets/javascripts/application.js

@@ -3,6 +3,8 @@
 //= require jquery_ujs
 //= require twitter/bootstrap
 //= require jquery.tokeninput
+//= require bootstrap-datepicker
+//= require bootstrap-datepicker.de
 //= require jquery.observe_field
 //= require jquery.fancybox-1.3.4.pack
 //= require rails.validations
@@ -91,6 +93,9 @@ $(function() {
     $('form[data-remote]').bind('ajax:beforeSend', function() {
         $(this).children('input[type="submit"]').attr('disabled', 'disabled');
     });
+
+    // Use bootstrap datepicker for dateinput
+    $('.datepicker').datepicker({format: 'yyyy-mm-dd', weekStart: 1, language: 'de'});
 });
 
 

app/assets/stylesheets/application.css

@@ -1,6 +1,5 @@
 /*
 *= require bootstrap_and_overrides
-*= require foodsoft
 *= require token-input-bootstrappy
 *= require jquery.fancybox-1.3.4
 */

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -30,3 +30,10 @@ body {
 //
 // Example:
 // @linkColor: #ff0000;
+
+
+// Bootstrap datepicker
+@import "datepicker";
+
+// Custom styles
+@import "foodsoft";

app/assets/stylesheets/datepicker.less

@@ -0,0 +1,147 @@
+/*!
+ * Datepicker for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Improvements by Andrew Rowls
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+
+.datepicker {
+	top: 0;
+	left: 0;
+	padding: 4px;
+	margin-top: 1px;
+	.border-radius(4px);
+	&:before {
+		content: '';
+		display: inline-block;
+		border-left:   7px solid transparent;
+		border-right:  7px solid transparent;
+		border-bottom: 7px solid #ccc;
+		border-bottom-color: rgba(0,0,0,.2);
+		position: absolute;
+		top: -7px;
+		left: 6px;
+	}
+	&:after {
+		content: '';
+		display: inline-block;
+		border-left:   6px solid transparent;
+		border-right:  6px solid transparent;
+		border-bottom: 6px solid @white;
+		position: absolute;
+		top: -6px;
+		left: 7px;
+	}
+	>div {
+		display: none;
+	}
+	&.days div.datepicker-days {
+		display: block;
+	}
+	&.months div.datepicker-months {
+		display: block;
+	}
+	&.years div.datepicker-years {
+		display: block;
+	}
+	table{
+		margin: 0;
+	}
+	td,
+	th{
+		text-align: center;
+		width: 20px;
+		height: 20px;
+		.border-radius(4px);
+	}
+	td {
+		&.day:hover {
+			background: @grayLighter;
+			cursor: pointer;
+		}
+		&.old,
+		&.new {
+			color: @grayLight;
+		}
+		&.disabled,
+		&.disabled:hover {
+			background: none;
+			color: @grayLight;
+			cursor: default;
+		}
+		&.today,
+		&.today:hover,
+		&.today.disabled,
+		&.today.disabled:hover {
+			@todayBackground: lighten(@orange, 30%);
+			.buttonBackground(@todayBackground, spin(@todayBackground, 20));
+		}
+		&.active,
+		&.active:hover,
+		&.active.disabled,
+		&.active.disabled:hover {
+			.buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
+			color: #fff;
+			text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+		}
+		span {
+			display: block;
+			width: 23%;
+			height: 54px;
+			line-height: 54px;
+			float: left;
+			margin: 1%;
+			cursor: pointer;
+			.border-radius(4px);
+			&:hover {
+				background: @grayLighter;
+			}
+			&.disabled,
+			&.disabled:hover {
+				background:none;
+				color: @grayLight;
+				cursor: default;
+			}
+			&.active,
+			&.active:hover,
+			&.active.disabled,
+			&.active.disabled:hover {
+				.buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
+				color: #fff;
+				text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+			}
+			&.old {
+				color: @grayLight;
+			}
+		}
+	}
+
+	th.switch {
+		width: 145px;
+	}
+
+	thead tr:first-child th,
+	tfoot tr:first-child th {
+		cursor: pointer;
+		&:hover{
+			background: @grayLighter;
+		}
+	}
+	/*.dow {
+		border-top: 1px solid #ddd !important;
+	}*/
+}
+.input-append,
+.input-prepend {
+	&.date {
+		.add-on i {
+			display: block;
+			cursor: pointer;
+			width: 16px;
+			height: 16px;
+		}
+	}
+}

app/assets/stylesheets/foodsoft.less

@@ -2,4 +2,12 @@ section {
   padding-bottom: 30px;
   margin-bottom: 30px;
   border-bottom: 1px solid #d3d3d3;
+}
+
+.accepted {
+  color: #468847;
+}
+
+.unaccepted {
+  color: #B94A48;
 }