use bootstrap-datepicker

This also validates transaction date and description upon form submission. As noted in
the issue, this removes hledger-web's "smart date" functionality. This
functionality can be restored giving the demand but should be tracked in
another issue.
Previous iterations used input[type=date], but it isn't easily
crossbrowser and the polyfill I found had some quirks.

hledger-web/Foundation.hs

@@ -125,6 +125,7 @@ instance Yesod App where
 
         pc <- widgetToPageContent $ do
             addStylesheet $ StaticR css_bootstrap_min_css
+            addStylesheet $ StaticR css_bootstrap_datepicker_standalone_min_css
              -- load these things early, in HEAD:
             toWidgetHead [hamlet|
                           <script type="text/javascript" src="@{StaticR js_jquery_min_js}">
@@ -132,6 +133,7 @@ instance Yesod App where
                          |]
             addScript $ StaticR js_bootstrap_min_js
             -- addScript $ StaticR js_typeahead_bundle_min_js
+            addScript $ StaticR js_bootstrap_datepicker_min_js
             addScript $ StaticR js_jquery_url_js
             addScript $ StaticR js_jquery_cookie_js
             addScript $ StaticR js_jquery_hotkeys_js
@@ -297,19 +299,11 @@ getLastMessage = cached getMessage
 addform :: Text -> ViewData -> HtmlUrl AppRoute
 addform _ vd@VD{..} = [hamlet|
 
-<script language="javascript">
+<script>
   jQuery(document).ready(function() {
 
     /* set up typeahead fields */
 
-    datesSuggester = new Bloodhound({
-      local:#{listToJsonValueObjArrayStr dates},
-      limit:100,
-      datumTokenizer: function(d) { return [d.value]; },
-      queryTokenizer: function(q) { return [q]; }
-    });
-    datesSuggester.initialize();
-
     descriptionsSuggester = new Bloodhound({
       local:#{listToJsonValueObjArrayStr descriptions},
       limit:100,
@@ -331,7 +325,6 @@ addform _ vd@VD{..} = [hamlet|
     });
     accountsSuggester.initialize();
 
-    enableTypeahead(jQuery('input#date'), datesSuggester);
     enableTypeahead(jQuery('input#description'), descriptionsSuggester);
     enableTypeahead(jQuery('input#account1, input#account2, input#account3, input#account4'), accountsSuggester);
 
@@ -340,10 +333,13 @@ addform _ vd@VD{..} = [hamlet|
 <form#addform method=POST .form>
  <div .form-group>
   <div .row>
-   <div .col-md-2 .col-xs-6 .col-sm-6>
-    <input #date .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
-   <div .col-md-10 .col-xs-6 .col-sm-6>
-    <input #description .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
+   <div .col-md-3 .col-xs-6 .col-sm-6>
+    <div #dateWrap .input-group .date>
+     <input #date required lang=en name=date .form-control .input-lg placeholder="Date" >
+     <div .input-group-addon>
+      <span .glyphicon .glyphicon-th>
+   <div .col-md-9 .col-xs-6 .col-sm-6>
+    <input #description required .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
  <div .account-postings>
   $forall n <- postingnums
     ^{postingfields vd n}
@@ -361,8 +357,6 @@ addform _ vd@VD{..} = [hamlet|
     (or ctrl +, ctrl -)
 |]
  where
-  defdate = "" :: String -- #322 don't set a default, typeahead(?) clears it on tab. See also hledger.js
-  dates = ["today","yesterday","tomorrow"] :: [String]
   descriptions = sort $ nub $ map tdescription $ jtxns j
   accts = journalAccountNamesDeclaredOrImplied j
   escapeJSSpecialChars = regexReplaceCI "</script>" "<\\/script>" -- #236

hledger-web/hledger-web.cabal

@@ -2,7 +2,7 @@
 --
 -- see: https://github.com/sol/hpack
 --
--- hash: 8b909b66ed99a760e973a9a36822f85ab879fb9823aab1521214d41b237abd45
+-- hash: e44d6ce1b41bd59cebb67a6f567178cd7fdef2396dd1debf0c5c1e9635233736
 
 name:           hledger-web
 version:        1.4.99
@@ -38,6 +38,7 @@ extra-source-files:
     config/settings.yml
     messages/en.msg
     README
+    static/css/bootstrap-datepicker.standalone.min.css
     static/css/bootstrap-theme.css
     static/css/bootstrap-theme.css.map
     static/css/bootstrap-theme.min.css
@@ -50,6 +51,7 @@ extra-source-files:
     static/fonts/glyphicons-halflings-regular.woff
     static/hledger.css
     static/hledger.js
+    static/js/bootstrap-datepicker.min.js
     static/js/bootstrap.js
     static/js/bootstrap.min.js
     static/js/excanvas.js

hledger-web/static/hledger.css

@@ -201,7 +201,7 @@ ul {
 }
 
 #main-content {
-   /* 
+   /*
     -webkit-transition: width 0.3s ease, margin 0.3s ease;
     -moz-transition: width 0.3s ease, margin 0.3s ease;
     -o-transition: width 0.3s ease, margin 0.3s ease;

hledger-web/static/hledger.js

@@ -14,6 +14,14 @@ $(document).ready(function() {
   // show add form if ?add=1
   if ($.url.param('add')) { addformShow(true); }
 
+	// date picker
+	// http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
+	$('#dateWrap').datepicker({
+		showOnFocus: false,
+		autoclose: true,
+		format: 'yyyy-mm-dd'
+	});
+
   // sidebar account hover handlers
   $('#sidebar td a').mouseenter(function(){ $(this).parent().addClass('mouseover'); });
   $('#sidebar td').mouseleave(function(){ $(this).removeClass('mouseover'); });
@@ -141,7 +149,6 @@ function addformReset(showmsg) {
     // reset typehead state (though not fetched completions)
     $('.typeahead').typeahead('val', '');
     $('.tt-dropdown-menu').hide();
-    $('input#date').val(''); // #322 don't set a default, typeahead(?) clears it on tab. See also Foundation.hs
   }
 }