diff --git a/app/index.html b/app/index.html
index 620eac4..4b441e3 100644
--- a/app/index.html
+++ b/app/index.html
@@ -12,7 +12,6 @@
   <!-- endbuild -->
 </head>
 <body ng-app="sample">
-<h1> {{ start }}  </h1>
 <div class="row-fluid">
   <div class="span6">
     <h2>Calendar</h2>
@@ -21,66 +20,81 @@
     <h5>default</h5>
     <pre>&lt;div date-picker="start"&gt;&lt;/div&gt; </pre>
 
-    {{ start }}
-    <div date-picker="start" ></div>
+    <div date-picker="start"  max-view="date" min-view="date"></div>
 
-    <!--<h5>year</h5>-->
-    <!--<pre>&lt;div date-picker="start"  <strong>year</strong>&gt;&lt;/div&gt; </pre>-->
-    <div date-picker="start" year></div>
-    <!--<h5>month</h5>-->
-    <!--<pre>&lt;div date-picker="start <strong>month</strong>&gt;&lt;/div&gt; </pre>-->
-    <!--<div date-picker ng-model="start" month></div>-->
-    <!--<h5>date</h5>-->
-    <!--<pre>&lt;div date-picker="start" <strong>date</strong>&gt;&lt;/div&gt; </pre>-->
-    <!--<div date-picker ng-model="start" date></div>-->
-    <!--<h5>hours</h5>-->
-    <!--<pre>&lt;div date-picker="start" <strong>hours</strong>&gt;&lt;/div&gt; </pre>-->
-    <!--<div date-picker ng-model="start" hours></div>-->
-    <!--<h5>minutes</h5>-->
-    <!--<pre>&lt;div date-picker="start" <strong>minutes</strong>&gt;&lt;/div&gt; </pre>-->
-    <!--<div date-picker ng-model="start" minutes></div>-->
+    <h5>year</h5>
+    <pre>&lt;div date-picker="start"  <strong>year</strong>&gt;&lt;/div&gt; </pre>
+    <div date-picker="start" view="year"></div>
+    <h5>month</h5>
+    <pre>&lt;div date-picker="start <strong>month</strong>&gt;&lt;/div&gt; </pre>
+    <div date-picker="start" view="month"></div>
+    <h5>date</h5>
+    <pre>&lt;div date-picker="start" <strong>date</strong>&gt;&lt;/div&gt; </pre>
+    <div date-picker="start" view="date"></div>
+    <h5>hours</h5>
+    <pre>&lt;div date-picker="start" <strong>hours</strong>&gt;&lt;/div&gt; </pre>
+    <div date-picker="start" view="hours"></div>
+    <h5>minutes</h5>
+    <pre>&lt;div date-picker="start" <strong>minutes</strong>&gt;&lt;/div&gt; </pre>
+    <div date-picker="start" view="minutes"></div>
   </div>
-  <!--<div class="span6">-->
-    <!--<h3>Input</h3>-->
-    <!--<h5>default</h5>-->
-    <!--<pre>&lt;input type="datetime" <strong>ng-model="model" date-time</strong>&gt;&lt;/div&gt; </pre>-->
-    <!--&lt;!&ndash;<input type="datetime" date-time ng-model="start">&ndash;&gt;-->
-    <!--<h5>Input format</h5>-->
-    <!--<pre>&lt;input type="datetime" ng-model="model" date-time <strong>format="long"</strong>&gt;&lt;/div&gt; </pre>-->
-    <!--&lt;!&ndash;<input type="datetime" date-time ng-model="end" hours format="short">&ndash;&gt;-->
-    <!--<h5>A button</h5>-->
-            <!--<pre ng-non-bindable>&lt;div class=&quot;dropdown&quot;&gt;-->
-  <!--&lt;a class=&quot;dropdown-toggle btn btn-danger&quot;&gt;-->
-    <!--pick a date: {{(date|date)}}-->
-  <!--&lt;/a&gt;-->
-  <!--&lt;div class=&quot;dropdown-menu&quot; ng-click=&quot;$event.preventDefault();$event.stopPropagation()&quot;&gt;-->
-    <!--&lt;div date-picker=&quot;date&quot; class=&quot;datetimepicker&quot;&gt;&lt;/div&gt;-->
-  <!--&lt;/div&gt;-->
-<!--&lt;/div&gt;</pre>-->
-    <!--<div class="dropdown">-->
-      <!--<a class="dropdown-toggle btn btn-danger">-->
-        <!--pick a date: {{(date|date)}}-->
-      <!--</a>-->
+  <div class="span6">
+    <h3>Input</h3>
+    <h5>default</h5>
+    <pre></pre>
+      <input type="text" date-time ng-model="start" required="true" view="hours">
 
-      <!--<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">-->
-        <!--<div date-picker="date"></div>-->
-      <!--</div>-->
-    <!--</div>-->
-    <!--<h5>Date range</h5>-->
-    <!--<pre>&lt;div date-range start="start" end="end" &gt;&lt;/div&gt; </pre>-->
-    <!--<div date-range start="a" end="b" style="position: relative; z-index:0"></div>-->
-    <!--<h5>Date range button</h5>-->
+    <h3>Input with append</h3>
+    <h5>default</h5>
+    <pre>&lt;input type="datetime" <strong>ng-model="model" date-time</strong>&gt;&lt;/div&gt; </pre>
+    <div class="input-append" date-time-append>
+      <input type="text" date-time ng-model="start" required="true" view="hours">
+      <span class="add-on"><i class="icon-calendar"></i></span>
+    </div>
+    <h3>Input with prepend</h3>
+    <h5>default</h5>
+    <pre>&lt;input type="datetime" <strong>ng-model="model" date-time</strong>&gt;&lt;/div&gt; </pre>
+    <div class="input-prepend" date-time-append>
+      <span class="add-on"><i class="icon-calendar"></i></span>
+      <input type="text" date-time ng-model="start" required="true" view="hours">
+    </div>
 
-    <!--<div class="dropdown">-->
-      <!--<a class="dropdown-toggle btn btn-danger">-->
-        <!--{{(a|date)||"pick start"}} - {{(b|date)||"pick end"}}-->
-      <!--</a>-->
+    <h5>Input format</h5>
+    <pre>&lt;input type="datetime" ng-model="model" date-time <strong>format="long"</strong>&gt;&lt;/div&gt; </pre>
+    <!--<input type="datetime" date-time ng-model="end" hours format="short">-->
+    <h5>A button</h5>
+            <pre ng-non-bindable>&lt;div class=&quot;dropdown&quot;&gt;
+  &lt;a class=&quot;dropdown-toggle btn btn-danger&quot;&gt;
+    pick a date: {{(date|date)}}
+  &lt;/a&gt;
+  &lt;div class=&quot;dropdown-menu&quot; ng-click=&quot;$event.preventDefault();$event.stopPropagation()&quot;&gt;
+    &lt;div date-picker=&quot;date&quot; class=&quot;datetimepicker&quot;&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+    <div class="dropdown">
+      <a class="dropdown-toggle btn btn-danger">
+        pick a date: {{(date|date)}}
+      </a>
 
-      <!--<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">-->
-        <!--<div date-range start="a" end="b"></div>-->
-      <!--</div>-->
-    <!--</div>-->
-  <!--</div>-->
+      <div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">
+        <div date-picker="date"></div>
+      </div>
+    </div>
+    <h5>Date range</h5>
+    <pre>&lt;div date-range start="start" end="end" &gt;&lt;/div&gt; </pre>
+    <div date-range start="a" end="b" style="position: relative; z-index:0"></div>
+    <h5>Date range button</h5>
+
+    <div class="dropdown">
+      <a class="dropdown-toggle btn btn-danger">
+        {{(a|date)||"pick start"}} - {{(b|date)||"pick end"}}
+      </a>
+
+      <div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">
+        <div date-range start="a" end="b"></div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <script src="components/jquery/jquery.js"></script>
@@ -88,6 +102,9 @@
 <script src="components/angular-bootstrap/ui-bootstrap.js"></script>
 <!-- build:js module.min.js -->
 <script src="scripts/module.js"></script>
+<script src="scripts/datePicker.js"></script>
+<script src="scripts/dateRange.js"></script>
+<script src="scripts/input.js"></script>
 <!-- endbuild -->
 <script>
   angular.module('sample', ['datePicker', 'ui.bootstrap']);
diff --git a/app/scripts/datePicker.js b/app/scripts/datePicker.js
new file mode 100644
index 0000000..a16a02d
--- /dev/null
+++ b/app/scripts/datePicker.js
@@ -0,0 +1,273 @@
+(function (angular) {
+  'use strict';
+
+  var Module = angular.module('datePicker', []);
+
+  Module.constant('datePickerConfig', {
+    template: 'templates/datepicker.html',
+    view: 'month',
+    views: ['year', 'month', 'date', 'hours', 'minutes']
+  });
+
+  function getVisibleMinutes(date) {
+    date = new Date(date || new Date());
+    date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours());
+    var minutes = [];
+    var step = 5;
+    var stop = date.getTime() + 60 * 60 * 1000;
+    while (date.getTime() < stop) {
+      minutes.push(date);
+      date = new Date(date.getTime() + step * 60 * 1000);
+    }
+    return minutes;
+  }
+
+  function getVisibleWeeks(date) {
+    date = new Date(date || new Date());
+    date.setDate(1);
+    date.setHours(0);
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+
+    if (date.getDay() === 0) {
+      date.setDate(-5);
+    } else {
+      date.setDate(date.getDate() - (date.getDay() - 1));
+    }
+    if (date.getDate() === 1) {
+      date.setDate(-6);
+    }
+
+    var weeks = [];
+    while (weeks.length < 6) {
+      var week = [];
+      for (var i = 0; i < 7; i++) {
+        week.push(new Date(date));
+        date.setDate(date.getDate() + 1);
+      }
+      weeks.push(week);
+    }
+    return weeks;
+  }
+
+  function getVisibleYears(date) {
+    var years = [];
+    date = new Date(date || new Date());
+    date.setFullYear(date.getFullYear() - (date.getFullYear() % 10));
+    for (var i = 0; i < 12; i++) {
+      years.push(new Date(date.getFullYear() + (i - 1), 0, 1));
+    }
+    return years;
+  }
+
+  function getDaysOfWeek(date) {
+    date = new Date(date || new Date());
+    date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    date.setDate(date.getDate() - (date.getDay() - 1));
+    var days = [];
+    for (var i = 0; i < 7; i++) {
+      days.push(new Date(date));
+      date.setDate(date.getDate() + 1);
+    }
+    return days;
+  }
+
+  function getVisibleMonths(date) {
+    date = new Date(date || new Date());
+    var year = date.getFullYear();
+    var months = [];
+    for (var month = 0; month < 12; month++) {
+      months.push(new Date(year, month, 1));
+    }
+    return months;
+  }
+
+  function getVisibleHours(date) {
+    date = new Date(date || new Date());
+    date.setHours(0);
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+    var hours = [];
+    for (var i = 0; i < 24; i++) {
+      hours.push(date);
+      date = new Date(date.getTime() + 60 * 60 * 1000);
+    }
+    return hours;
+  }
+
+  Module.directive('datePicker', function datePickerDirective(datePickerConfig) {
+
+    //noinspection JSUnusedLocalSymbols
+    return {
+      // this is a bug ?
+      template:'<div ng-include="template"></div>',
+//      replace: true,
+      scope: {
+        model: '=datePicker',
+        after: '=?',
+        before: '=?'
+      },
+      link: function (scope, element, attrs) {
+
+        scope.date = new Date(scope.model || new Date());
+        scope.views = datePickerConfig.views.concat();
+        scope.view = attrs.view || datePickerConfig.view;
+        scope.now = new Date();
+        scope.template = attrs.template || datePickerConfig.template;
+        var index;
+
+        if (attrs.minView) {
+          index = scope.views.indexOf(attrs.minView);
+          scope.views.splice(0, index);
+        }
+        if (attrs.maxView) {
+          index = scope.views.indexOf(attrs.maxView);
+          scope.views.splice(index + 1);
+        }
+
+        if (scope.views.length == 1) {
+          scope.view = scope.views[0];
+        }
+
+        scope.setView = function (nextView) {
+          if (scope.views.indexOf(nextView) != -1) {
+            scope.view = nextView;
+          }
+        };
+
+        scope.setDate = function (date) {
+          scope.date = date;
+          // change next view
+          var nextView = scope.views[scope.views.indexOf(scope.view) + 1];
+          if (!nextView || scope.model) {
+
+            scope.model = new Date(scope.model || date);
+
+            //noinspection FallThroughInSwitchStatementJS
+            switch (scope.view) {
+              case 'minutes':
+                scope.model.setMinutes(date.getMinutes());
+              case 'hours':
+                scope.model.setHours(date.getHours());
+              case 'date':
+                scope.model.setDate(date.getDate());
+              case 'month':
+                scope.model.setMonth(date.getMonth());
+              case 'year':
+                scope.model.setFullYear(date.getFullYear());
+            }
+            scope.$emit('setDate', scope.model, scope.view);
+          }
+
+          if (nextView) {
+            scope.setView(nextView);
+          }
+        };
+
+        function update() {
+          var view = scope.view;
+          var date = scope.date;
+          switch (view) {
+            case 'year':
+              scope.years = getVisibleYears(date);
+              break;
+            case 'month':
+              scope.months = getVisibleMonths(date);
+              break;
+            case 'date':
+              scope.weekdays = scope.weekdays || getDaysOfWeek();
+              scope.weeks = getVisibleWeeks(date);
+              break;
+            case 'hours':
+              scope.hours = getVisibleHours(date);
+              break;
+            case 'minutes':
+              scope.minutes = getVisibleMinutes(date);
+              break;
+          }
+        }
+
+        function watch(){
+          if(scope.view!='date'){
+            return scope.view;
+          }
+          return scope.model ? scope.model.getMonth(): null;
+        }
+
+
+        scope.$watch(watch,update);
+
+        scope.next = function (delta) {
+          var date = scope.date;
+          delta = delta || 1;
+          switch (scope.view) {
+            case 'year':
+            case 'month':
+              date.setFullYear(date.getFullYear() + delta);
+              break;
+            case 'date':
+              date.setMonth(date.getMonth() + delta);
+              break;
+            case 'hours':
+            case 'minutes':
+              date.setHours(date.getHours() + delta);
+              break;
+          }
+          update();
+        };
+
+        scope.prev = function (delta) {
+          return scope.next(-delta || -1);
+        };
+
+        scope.isAfter = function (date) {
+          return scope.after ? scope.after.getTime() <= date.getTime() : false;
+        };
+
+        scope.isBefore = function (date) {
+          return scope.before ? scope.before.getTime() >= date.getTime() : false;
+        };
+
+        scope.isSameMonth = function (date) {
+          return scope.isSameYear(date) && scope.model.getMonth() == date.getMonth();
+        };
+
+        scope.isSameYear = function (date) {
+          return (scope.model ? scope.model.getFullYear() == date.getFullYear() : false);
+        };
+
+        scope.isSameDay = function (date) {
+          return scope.isSameMonth(date) && scope.model.getDate() == date.getDate();
+        };
+
+        scope.isSameHour = function (date) {
+          return scope.isSameDay(date) && scope.model.getHours() == date.getHours();
+        };
+
+        scope.isSameMinutes = function (date) {
+          return scope.isSameHour(date) && scope.model.getMinutes() == date.getMinutes();
+        };
+
+        scope.isNow = function (date) {
+          var is = true;
+          var now = scope.now;
+          //noinspection FallThroughInSwitchStatementJS
+          switch (scope.view) {
+            case 'hour':
+              is &= date.getHours() == now.getHours();
+            case 'date':
+              is &= date.getDate() == now.getDate();
+            case 'month':
+              is &= date.getMonth() == now.getMonth();
+            case 'year':
+              is &= date.getFullYear() == now.getFullYear();
+          }
+          return is;
+        }
+      }
+    };
+  });
+
+})(angular);
diff --git a/app/scripts/dateRange.js b/app/scripts/dateRange.js
new file mode 100644
index 0000000..3656229
--- /dev/null
+++ b/app/scripts/dateRange.js
@@ -0,0 +1,26 @@
+(function (angular) {
+  'use strict';
+  var Module = angular.module('datePicker');
+
+  Module.directive('dateRange', function () {
+    return {
+      templateUrl: 'templates/daterange.html',
+      scope: {
+        start: '=',
+        end: '='
+      },
+      link: function (scope) {
+        scope.$watch('start.getTime()', function (value) {
+          if (value && scope.end && value > scope.end.getTime()) {
+            scope.end = new Date(value);
+          }
+        });
+        scope.$watch('end.getTime()', function (value) {
+          if (value && scope.start && value < scope.start.getTime()) {
+            scope.start = new Date(value);
+          }
+        });
+      }
+    };
+  });
+})(angular);
diff --git a/app/scripts/input.js b/app/scripts/input.js
new file mode 100644
index 0000000..0d82bcc
--- /dev/null
+++ b/app/scripts/input.js
@@ -0,0 +1,130 @@
+(function (angular) {
+  'use strict';
+
+  var PRISTINE_CLASS = 'ng-pristine',
+      DIRTY_CLASS = 'ng-dirty';
+
+  var Module = angular.module('datePicker');
+
+  Module.constant('dateTimeConfig',{
+    template:function(attrs){
+      return ''+
+          '<div '+
+          'date-picker="' + attrs.ngModel + '" ' +
+          'view="'+attrs.view+'" ' +
+          (attrs.maxView ? 'max-view="'+attrs.maxView+'" ' : '')+
+          (attrs.template ? 'template="'+attrs.template+'" ' : '')+
+          (attrs.minView ? 'min-view="'+attrs.minView+'" ' : '')+
+          'class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu"></div>';
+    },
+    format:'yyyy-MM-dd HH:mm',
+    views: ['date', 'year', 'month', 'hours', 'minutes', 'month'],
+    dismiss:false
+  });
+
+  Module.directive('dateTimeAppend',function(){
+    return {
+      link:function(scope,element,attrs){
+
+        element.bind('click',function(){
+          element.find('input').focus();
+        })
+      }
+    }
+  });
+
+  Module.directive('dateTime', function ($compile, $document, $filter, dateTimeConfig, $parse) {
+    var body = $document.find('body');
+    var dateFilter = $filter('date');
+
+    return {
+      require: 'ngModel',
+      link: function (scope, element, attrs, ngModel) {
+        var format = attrs.format || dateTimeConfig.format;
+        var parentForm = element.inheritedData('$formController');
+        var views = $parse(attrs.views)(scope) || dateTimeConfig.views.concat();
+        var view = attrs.view || views[0];
+        var index = views.indexOf(view);
+        var dismiss = attrs.dismiss ? $parse(attrs.dismiss)(scope) : dateTimeConfig.dismiss;
+        var picker = null;
+
+        if(index == -1){
+          views.splice(index,1);
+        }
+
+        views.unshift(view);
+
+
+        function formatter(value) {
+          return dateFilter(value, format);
+        }
+
+        function parser(value){
+          return ngModel.$modelValue;
+        }
+
+        ngModel.$formatters.push(formatter);
+        ngModel.$parsers.unshift(parser);
+
+
+
+        var template = dateTimeConfig.template(attrs);
+
+        function updateInput(event) {
+          event.stopPropagation();
+          if (ngModel.$pristine) {
+            ngModel.$dirty = true;
+            ngModel.$pristine = false;
+            element.removeClass(PRISTINE_CLASS).addClass(DIRTY_CLASS);
+            if (parentForm) {
+              parentForm.$setDirty();
+            }
+            ngModel.$render();
+          }
+        }
+
+        function dismissPicker(){
+          if(dismiss){
+            clear();
+          }
+        }
+
+        function clear() {
+          if (picker) {
+            console.log('remove',picker);
+            window.picker = picker;
+            picker.remove();
+            picker = null;
+          }
+        }
+
+        function showPicker() {
+          if (picker)return;
+
+          // create picker element
+          picker = $compile(template)(scope);
+          body.append(picker);
+
+          scope.$digest();
+          console.log(picker[0]);
+          window.picker = picker;
+
+          scope.$on('setDate', function(event){
+            updateInput(event);
+            dismissPicker();
+          });
+
+          // move picker below input element
+          var pos = angular.extend(element.offset(), { height: element[0].offsetHeight });
+          picker.css({ top: pos.top + pos.height, left: pos.left, display: 'block', position: 'absolute'});
+          picker.bind('mousedown', function () {
+            return false;
+          });
+        }
+
+        element.bind('focus', showPicker);
+        element.bind('blur', clear);
+      }
+    };
+  });
+})(angular);
diff --git a/app/scripts/module.js b/app/scripts/module.js
index 37bdb76..262670f 100644
--- a/app/scripts/module.js
+++ b/app/scripts/module.js
@@ -1,294 +1,4 @@
 (function (angular) {
   'use strict';
   var Module = angular.module('datePicker', []);
-
-
-  Module.directive('datePicker', function () {
-    var views = ['year', 'month', 'date', 'hours', 'minutes'];
-    var noop = angular.noop;
-
-    function getVisibleMinutes(date) {
-      date = new Date(date || new Date());
-      date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours());
-      var minutes = [];
-      var step = 5;
-      var stop = date.getTime() + 60 * 60 * 1000;
-      while (date.getTime() < stop) {
-        minutes.push(date);
-        date = new Date(date.getTime() + step * 60 * 1000);
-      }
-      return minutes;
-    }
-
-    function getVisibleWeeks(date) {
-      date = new Date(date || new Date());
-      date.setDate(1);
-      date.setHours(0);
-      date.setMinutes(0);
-      date.setSeconds(0);
-      date.setMilliseconds(0);
-
-      if (date.getDay() === 0) {
-        date.setDate(-5);
-      } else {
-        date.setDate(date.getDate() - (date.getDay() - 1));
-      }
-      if (date.getDate() === 1) {
-        date.setDate(-6);
-      }
-
-
-      var weeks = [];
-      while (weeks.length < 6) {
-        var week = [];
-        for (var i = 0; i < 7; i++) {
-          week.push(new Date(date));
-          date.setDate(date.getDate() + 1);
-        }
-        weeks.push(week);
-      }
-      return weeks;
-    }
-
-    function getVisibleYears(date) {
-      var years = [];
-      date = new Date(date || new Date());
-      date.setFullYear(date.getFullYear() - (date.getFullYear() % 10));
-      for (var i = 0; i < 12; i++) {
-        years.push(new Date(date.getFullYear() + (i - 1), 0, 1));
-      }
-      return years;
-    }
-
-    function getDaysOfWeek(date) {
-      date = new Date(date || new Date());
-      date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-      date.setDate(date.getDate() - (date.getDay() - 1));
-      var days = [];
-      for (var i = 0; i < 7; i++) {
-        days.push(new Date(date));
-        date.setDate(date.getDate() + 1);
-      }
-      return days;
-    }
-
-    function getVisibleMonths(date) {
-      date = new Date(date || new Date());
-      var year = date.getFullYear();
-      var months = [];
-      for (var month = 0; month < 12; month++) {
-        months.push(new Date(year, month, 1));
-      }
-      return months;
-    }
-
-    function getVisibleHours(date) {
-      date = new Date(date || new Date());
-      date.setHours(0);
-      date.setMinutes(0);
-      date.setSeconds(0);
-      date.setMilliseconds(0);
-      var hours = [];
-      for (var i = 0; i < 24; i++) {
-        hours.push(date);
-        date = new Date(date.getTime() + 60 * 60 * 1000);
-      }
-      return hours;
-    }
-
-    return {
-      templateUrl: 'templates/datepicker.html',
-      replace:true,
-      scope      : {
-        model:  '=datePicker',
-        view  : '=?',
-        after : '=?',
-        before: '=?'
-      },
-      link       : function (scope, element, attrs) {
-
-        // if model value was updated or already existing;
-        var updated = !!scope.model;
-
-        scope.date = new Date();
-
-        if(!scope.view){
-          // set default view
-          scope.view = views[0];
-        }
-
-        scope.setView= function(nextView){
-          scope.view = nextView;
-        };
-
-
-        scope.setDate = function(date){
-          scope.date = date;
-          // change next view
-          var nextView = views[views.indexOf(scope.view)+1];
-          if(nextView){
-            scope.view = nextView;
-            updated = true;
-          }
-          if(!nextView || updated){
-            scope.model = date;
-          }
-        };
-
-        function update(){
-          var view = scope.view;
-          var date = scope.date;
-          switch (view) {
-            case 'year':
-              scope.years = getVisibleYears(date);
-              break;
-            case 'month':
-              scope.months = getVisibleMonths(date);
-              break;
-            case 'date':
-              scope.weekdays = scope.weekdays || getDaysOfWeek();
-              scope.weeks = getVisibleWeeks(date);
-              break;
-            case 'hours':
-              scope.hours = getVisibleHours(date);
-              break;
-            case 'minutes':
-              scope.minutes = getVisibleMinutes(date);
-              break;
-          }
-        }
-
-        scope.$watch('view', function (view) {
-          update();
-        });
-
-        scope.next = function(delta){
-          var date = scope.date;
-          delta = delta || 1;
-          switch(scope.view){
-            case 'year':
-            case 'month':
-              date.setFullYear(date.getFullYear() + delta);
-              break;
-            case 'date':
-              date.setMonth(date.getMonth() + delta);
-              break;
-            case 'hours':
-            case 'minutes':
-              date.setHours(date.getHours() + delta);
-              break;
-          }
-          update();
-        };
-
-        scope.prev = function(delta){
-          return scope.next(delta || -1);
-        };
-
-        scope.isAfter = function(date){
-          return updated && scope.model ? scope.model.getTime() >= date.getTime(): false;
-        };
-
-        scope.isBefore = function(date){
-          return scope.model ? scope.model.getTime() <= date.getTime(): false;
-        };
-
-        scope.isSameMonth = function(date){
-          return scope.isSameYear(date) && scope.model ? scope.model.getMonth() == date.getMonth() : false;
-        };
-
-        scope.isSameYear= function(date){
-          return (scope.model ? scope.model.getFullYear() == date.getFullYear(): false);
-        };
-
-        scope.isSameDay = function(date){
-          return scope.isSameMonth(date) && scope.model ? scope.model.getDate() == date.getDate() : false;
-        };
-      }
-    };
-  });
-
-//  Module.directive('dateTime', function ($compile, $document, $filter) {
-//    var body = $document.find('body');
-//    var dateFilter = $filter('date');
-//    return {
-//      require: 'ngModel',
-//      link   : function (scope, element, attrs, ngModel) {
-//        var format = attrs.format || 'yyyy-MM-dd HH:mm';
-//
-//        var viewsOptions = ['date', 'year', 'month', 'hours', 'minutes', 'month'];
-//        var views = [];
-//        for (var attr in attrs) {
-//          //noinspection JSUnfilteredForInLoop
-//          if (viewsOptions.indexOf(attr) !== -1) { //noinspection JSUnfilteredForInLoop
-//            views.push(attr);
-//          }
-//        }
-//
-//        function formatter(value) {
-//          return dateFilter(value, format);
-//        }
-//
-//        ngModel.$formatters.push(formatter);
-//
-//        var picker = null;
-//        var clear = function(){
-//          if(picker){
-//            picker.remove();
-//            picker = null;
-//          }
-//        };
-//        var template = '<div date-picker="' + attrs.ngModel + '" class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu" format="' + format + '" ' + views.join(' ') + '></div>';
-//
-//        function update(obj,date){
-//          ngModel.$setViewValue(date);
-//        }
-//
-//        element.bind('focus', function () {
-//          if (!picker) {
-//            // create picker element
-//            picker = $compile(template)(scope);
-//            body.append(picker);
-//            scope.$digest();
-//
-//
-//            scope.$on('setDate', update);
-//            scope.$on('setMonth',update);
-//            scope.$on('setHours',update);
-//            scope.$on('setYear', update);
-//
-//            var pos = angular.extend(element.offset(), { height: element[0].offsetHeight });
-//            picker.css({ top: pos.top + pos.height, left: pos.left, display: 'block', position: 'absolute'});
-//            picker.bind('mousedown', function () {
-//              return false;
-//            });
-//          }
-//          return false;
-//        });
-//        element.bind('blur', clear);
-//      }
-//    };
-//  });
-
-//  Module.directive('dateRange', function () {
-//    return {
-//      templateUrl: 'templates/daterange.html',
-//      scope   : {
-//        start: '=',
-//        end  : '='
-//      },
-//      link    : function (scope) {
-//        scope.$watch('start.getTime()', function (value) {
-//          if (value && scope.end && value > scope.end.getTime()) {
-//            scope.end = new Date(value);
-//          }
-//        });
-//        scope.$watch('end.getTime()', function (value) {
-//          if (value && scope.start && value < scope.start.getTime()) {
-//            scope.start = new Date(value);
-//          }
-//        });
-//      }
-//    };
-//  });
 })(angular);
diff --git a/app/styles/style.less b/app/styles/style.less
new file mode 100644
index 0000000..e1e76df
--- /dev/null
+++ b/app/styles/style.less
@@ -0,0 +1,3 @@
+[date-picker] {
+
+}
diff --git a/app/templates/datepicker.html b/app/templates/datepicker.html
index 060c6dc..be5d2fa 100644
--- a/app/templates/datepicker.html
+++ b/app/templates/datepicker.html
@@ -1,132 +1,130 @@
-<div>
-<div ng-switch="view">
-  <div class="datetimepicker-days" ng-switch-when="date">
-    <table class=" table-condensed">
-      <thead>
-      <tr>
-        <th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
-        <th colspan="5" class="switch" ng-click="setView('month')">{{date|date:"yyyy MMMM"}}</th>
-        <th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
-      </tr>
-      <tr>
-        <th class="dow" ng-repeat="day in weekdays">{{ day|date:"EEE"}}</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr ng-repeat="week in weeks">
-        <td class="day" ng-repeat="day in week"
-            ng-click="setDate(day)">{{ day.getDate() }}
-                      <!--ng-class="{'active':isSameDay(day),'old':isOldMonth(day),'new':isNewMonth(day),'after':day.getTime()>=date.getTime(),'before':isBefore(day)}"-->
-
-        </td>
-      </tr>
-      </tbody>
-      <tfoot>
-      <tr>
-        <th colspan="7" class="today" style="display: none;">Today</th>
-      </tr>
-      </tfoot>
-    </table>
-  </div>
-  <div class="datetimepicker-years" ng-switch-when="year">
-    <table class="table-condensed">
-      <thead>
-      <tr>
-        <th class="prev" style="visibility: visible;" ng-click="prev(10)">‹</th>
-        <th colspan="5" class="switch">{{years[0].getFullYear()}}-{{years[years.length-1].getFullYear()}}</th>
-        <th class="next" style="visibility: visible;" ng-click="next(10)">›</i></th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="7">
-                    <span ng-class="{'active':isSameYear(year)}" class="year" ng-repeat="year in years"
-                          ng-click="setDate(year)">{{year.getFullYear()}}</span>
+  <div ng-switch="view">
+    <div class="datetimepicker-days" ng-switch-when="date">
+      <table class=" table-condensed">
+        <thead>
+        <tr>
+          <th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
+          <th colspan="5" class="switch" ng-click="setView('month')">{{date|date:"yyyy MMMM"}}</th>
+          <th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
+        </tr>
+        <tr>
+          <th class="dow" ng-repeat="day in weekdays">{{ day|date:"EEE"}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="week in weeks">
+          <td class="day" ng-repeat="day in week"
+              ng-class="{'active':isSameDay(day),'disabled':(day.getMonth()!=date.getMonth()),'after':isAfter(day),'before':isBefore(day)}"
+              ng-click="setDate(day)" ng-bind="day.getDate()">
+          </td>
+        </tr>
+        </tbody>
+        <tfoot>
+        <tr>
+          <th colspan="7" class="today" style="display: none;">Today</th>
+        </tr>
+        </tfoot>
+      </table>
+    </div>
+    <div class="datetimepicker-years" ng-switch-when="year">
+      <table class="table-condensed">
+        <thead>
+        <tr>
+          <th class="prev" style="visibility: visible;" ng-click="prev(10)">‹</th>
+          <th colspan="5" class="switch">{{years[0].getFullYear()}}-{{years[years.length-1].getFullYear()}}</th>
+          <th class="next" style="visibility: visible;" ng-click="next(10)">›</i></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td colspan="7">
+                    <span ng-class="{'active':isSameYear(year),'btn-danger':isNow(year)}" class="year"
+                          ng-repeat="year in years"
+                          ng-click="setDate(year)" ng-bind="year.getFullYear()"></span>
 
 
-        </td>
-      </tr>
-      </tbody>
-    </table>
-  </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
 
-  <div class="datetimepicker-months" ng-switch-when="month">
-    <table class="table-condensed">
-      <thead>
-      <tr>
-        <th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
-        <th colspan="5" class="switch" ng-click="setView('year')">{{ date|date:"yyyy" }}</th>
-        <th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="7">
+    <div class="datetimepicker-months" ng-switch-when="month">
+      <table class="table-condensed">
+        <thead>
+        <tr>
+          <th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
+          <th colspan="5" class="switch" ng-click="setView('year')">{{ date|date:"yyyy" }}</th>
+          <th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td colspan="7">
                 <span class="month" ng-repeat="month in months"
-                      ng-class="{'active':isSameMonth(month),'after':isAfter(month),'before':isBefore(month)}"
+                      ng-class="{'active':isSameMonth(month),'after':isAfter(month),'before':isBefore(month),'btn-danger':isNow(month)}"
                       ng-click="setDate(month)">{{month|date:'MMM'}}</span>
 
-        </td>
-      </tr>
-      </tbody>
-      <tfoot>
-      <tr>
-        <th colspan="7" class="today" style="display: none;">Today</th>
-      </tr>
-      </tfoot>
-    </table>
-  </div>
+          </td>
+        </tr>
+        </tbody>
+        <tfoot>
+        <tr>
+          <th colspan="7" class="today" style="display: none;">Today</th>
+        </tr>
+        </tfoot>
+      </table>
+    </div>
 
-  <div class="datetimepicker-hours" ng-switch-when="hours">
-    <table class=" table-condensed">
-      <thead>
-      <tr>
-        <th class="prev" style="visibility: visible;" ng-click="prev(24)">‹</th>
-        <th colspan="5" class="switch" ng-click="setView('date')">{{ date|date:"dd MMMM yyyy" }}</th>
-        <th class="next" style="visibility: visible;" ng-click="next(24)">›</i></th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="7">
+    <div class="datetimepicker-hours" ng-switch-when="hours">
+      <table class=" table-condensed">
+        <thead>
+        <tr>
+          <th class="prev" style="visibility: visible;" ng-click="prev(24)">‹</th>
+          <th colspan="5" class="switch" ng-click="setView('date')">{{ date|date:"dd MMMM yyyy" }}</th>
+          <th class="next" style="visibility: visible;" ng-click="next(24)">›</i></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td colspan="7">
                 <span class="hour" ng-repeat="hour in hours"
                       ng-class="{'old':isOldHour(hour),'new':isNewHour(hour),'active':isSameHour(hour)}"
-                      ng-click="setDate(hour)">{{hour|date:"HH:mm"}}</span>
-        </td>
-      </tr>
-      </tbody>
-      <tfoot>
-      <tr>
-        <th colspan="7" class="today" style="display: none;">Today</th>
-      </tr>
-      </tfoot>
-    </table>
-  </div>
-  <div class="datetimepicker-minutes" ng-switch-when="minutes">
-    <table class=" table-condensed">
-      <thead>
-      <tr>
-        <th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
-        <th colspan="5" class="switch" ng-click="setView('hours')">{{ date|date:"dd MMMM yyyy HH:mm" }}
-        </th>
-        <th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="7">
-                          <!--ng-class="{active:isSameMinutes(minute)}"-->
+                      ng-click="setDate(hour)" ng-bind="hour.getHours()+':00'"></span>
+          </td>
+        </tr>
+        </tbody>
+        <tfoot>
+        <tr>
+          <th colspan="7" class="today" style="display: none;">Today</th>
+        </tr>
+        </tfoot>
+      </table>
+    </div>
+    <div class="datetimepicker-minutes" ng-switch-when="minutes">
+      <table class=" table-condensed">
+        <thead>
+        <tr>
+          <th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
+          <th colspan="5" class="switch" ng-click="setView('hours')">{{ date|date:"dd MMMM yyyy HH:mm" }}
+          </th>
+          <th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td colspan="7">
                     <span class="minute" ng-repeat="minute in minutes"
+                          ng-class="{active:isSameMinutes(minute)}"
                           ng-click="setDate(minute)">{{minute|date:"HH:mm"}}</span>
-        </td>
-      </tr>
-      </tbody>
-      <tfoot>
-      <tr>
-        <th colspan="7" class="today" style="display: none;">Today</th>
-      </tr>
-      </tfoot>
-    </table>
+          </td>
+        </tr>
+        </tbody>
+        <tfoot>
+        <tr>
+          <th colspan="7" class="today" style="display: none;">Today</th>
+        </tr>
+        </tfoot>
+      </table>
+    </div>
   </div>
-</div>
-</div>
diff --git a/app/templates/daterange.html b/app/templates/daterange.html
index 55d3906..3c93641 100644
--- a/app/templates/daterange.html
+++ b/app/templates/daterange.html
@@ -2,11 +2,11 @@
     <table>
         <tr>
             <td valign="top">
-                <div date-picker="start" class="date-picker" date after="start" before="end"></div>
+                <div date-picker="start" class="date-picker" date after="start" before="end" min-view="date" max-view="date"></div>
             </td>
             <td valign="top">
-                <div date-picker="end" class="date-picker" date after="start" before="end"></div>
+                <div date-picker="end" class="date-picker" date after="start" before="end"  min-view="date" max-view="date"></div>
             </td>
         </tr>
     </table>
-</div>
\ No newline at end of file
+</div>
