diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/context/DateTimeI18n.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/context/DateTimeI18n.java
index 8d01fbe..87375b7 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/context/DateTimeI18n.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/context/DateTimeI18n.java
@@ -19,9 +19,11 @@
 
 package org.apache.myfaces.tobago.internal.context;
 
+import org.apache.myfaces.tobago.util.ResourceUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import javax.faces.context.FacesContext;
 import java.lang.invoke.MethodHandles;
 import java.text.SimpleDateFormat;
 import java.util.Calendar;
@@ -41,6 +43,11 @@
   private final String[] dayNamesShort = new String[7];
   private final String[] dayNamesMin = new String[7];
   private final int firstDay;
+  private final int minDays;
+  private final String today;
+  private final String cancel;
+  private final String clear;
+  private final String week;
 
   private DateTimeI18n(final Locale locale) {
 
@@ -68,7 +75,14 @@
       calendar.add(Calendar.DAY_OF_YEAR, 1);
     }
 
-    firstDay = calendar.getFirstDayOfWeek() - 1; // because Java: 1 = Sunday and jQuery UI DatePicker: 0 = Sunday
+    firstDay = calendar.getFirstDayOfWeek() - 1; // because Java: 1 = Sunday and JavaScript: 0 = Sunday
+    minDays = calendar.getMinimalDaysInFirstWeek();
+
+    FacesContext facesContext = FacesContext.getCurrentInstance();
+    today = ResourceUtils.getString(facesContext, "date.today");
+    cancel = ResourceUtils.getString(facesContext, "date.cancel");
+    clear = ResourceUtils.getString(facesContext, "date.clear");
+    week = ResourceUtils.getString(facesContext, "date.week");
   }
 
   public static synchronized DateTimeI18n valueOf(final Locale locale) {
@@ -104,4 +118,24 @@
   public int getFirstDay() {
     return firstDay;
   }
+
+  public int getMinDays() {
+    return minDays;
+  }
+
+  public String getToday() {
+    return today;
+  }
+
+  public String getCancel() {
+    return cancel;
+  }
+
+  public String getClear() {
+    return clear;
+  }
+
+  public String getWeek() {
+    return week;
+  }
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
index 11c0c3a..777923e 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/DateRenderer.java
@@ -26,8 +26,10 @@
 import org.apache.myfaces.tobago.internal.util.StringUtils;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapDateTimePickerClass;
+import org.apache.myfaces.tobago.renderkit.css.CssItem;
 import org.apache.myfaces.tobago.renderkit.css.Icons;
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.css.VaadinClass;
 import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlButtonTypes;
@@ -131,7 +133,7 @@
   }
 
   @Override
-  protected TobagoClass getRendererCssClass() {
-    return null;
+  protected CssItem getRendererCssClass() {
+    return VaadinClass.INPUT;
   }
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
index 2b626fe..599688d 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
@@ -32,6 +32,7 @@
 import org.apache.myfaces.tobago.internal.util.RenderUtils;
 import org.apache.myfaces.tobago.internal.util.StringUtils;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
+import org.apache.myfaces.tobago.renderkit.css.CssItem;
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -137,10 +138,10 @@
       writer.writeAttribute(HtmlAttributes.PLACEHOLDER, input.getPlaceholder(), true);
     }
 
-    final TobagoClass rendererCssClass = getRendererCssClass();
+    final CssItem rendererCssClass = getRendererCssClass();
     writer.writeClassAttribute(
         rendererCssClass,
-        rendererCssClass != null ? rendererCssClass.createMarkup(markup) : null,
+//        rendererCssClass != null ? rendererCssClass.createMarkup(markup) : null,
         BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(input)),
         BootstrapClass.FORM_CONTROL,
         input.getCustomClass());
@@ -203,7 +204,7 @@
   protected void encodeEndField(final FacesContext facesContext, final UIComponent component) throws IOException {
   }
 
-  protected TobagoClass getRendererCssClass() {
+  protected CssItem getRendererCssClass() {
     return TobagoClass.IN;
   }
 
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PageRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PageRenderer.java
index 73eaf64..d66d746 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PageRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PageRenderer.java
@@ -42,6 +42,7 @@
 import org.apache.myfaces.tobago.renderkit.RendererBase;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.CustomAttributes;
 import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -164,9 +165,9 @@
     final TobagoClass spread = markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null;
     final String title = page.getLabel();
 
+    final Locale locale = viewRoot.getLocale();
     if (!portlet) {
       writer.startElement(HtmlElements.HTML);
-      final Locale locale = viewRoot.getLocale();
       if (locale != null) {
         final String language = locale.getLanguage();
         if (language != null) {
@@ -236,6 +237,7 @@
 
     writer.startElement(HtmlElements.TOBAGO_PAGE);
 
+    writer.writeAttribute(CustomAttributes.LOCALE, locale.toString(), false);
     writer.writeClassAttribute(
         BootstrapClass.CONTAINER_FLUID,
         TobagoClass.PAGE.createMarkup(portlet ? Markup.PORTLET.add(page.getMarkup()) : page.getMarkup()),
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/util/JsonUtils.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/util/JsonUtils.java
index 1cf85f6..cb4c23a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/util/JsonUtils.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/util/JsonUtils.java
@@ -251,6 +251,11 @@
     encode(builder, "dayNamesShort", dateTimeI18n.getDayNamesShort());
     encode(builder, "dayNamesMin", dateTimeI18n.getDayNamesMin());
     encode(builder, "firstDay", dateTimeI18n.getFirstDay());
+    encode(builder, "minDays", dateTimeI18n.getMinDays());
+    encode(builder, "today", dateTimeI18n.getToday());
+    encode(builder, "cancel", dateTimeI18n.getCancel());
+    encode(builder, "clear", dateTimeI18n.getClear());
+    encode(builder, "week", dateTimeI18n.getWeek());
 
     if (builder.length() - initialLength > 0) {
       assert builder.charAt(builder.length() - 1) == ',';
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/VaadinClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/VaadinClass.java
new file mode 100644
index 0000000..3a27e39
--- /dev/null
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/VaadinClass.java
@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.tobago.renderkit.css;
+
+public enum VaadinClass implements CssItem {
+
+  INPUT("input");
+
+  private final String name;
+
+  VaadinClass(final String name) {
+    this.name = name;
+  }
+
+  @Override
+  public String getName() {
+    return name;
+  }
+
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
index 4a975ce..d6a003d 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
@@ -37,6 +37,7 @@
    * The index of the tab inside the tab group.
    */
   INDEX("index"),
+  LOCALE("locale"),
   LOCAL_MENU("local-menu"),
   MAX_ITEMS("max-items"),
   MIN_CHARS("min-chars"),
diff --git a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle.properties b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle.properties
index c89fdd5..9559e30 100644
--- a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle.properties
+++ b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle.properties
@@ -37,3 +37,7 @@
 sheet.toPage=Page {0}
 file.selected={} files selected
 help.title=Help
+date.today=Today
+date.cancel=Cancel
+date.clear=Clear
+date.week=Week
diff --git a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_de.properties b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_de.properties
index bbdb4b6..64a0486 100644
--- a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_de.properties
+++ b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_de.properties
@@ -37,3 +37,7 @@
 sheet.toPage=Seite {0}
 file.selected={} Dateien ausgew\u00E4hlt
 help.title=Hilfe
+date.today=Heute
+date.cancel=Abbrechen
+date.clear=L\u00F6schen
+date.week=Woche
diff --git a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_es.properties b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_es.properties
index fcb8f7a..c755b82 100644
--- a/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_es.properties
+++ b/tobago-core/src/main/resources/org/apache/myfaces/tobago/context/TobagoResourceBundle_es.properties
@@ -37,3 +37,7 @@
 sheet.toPage=P\u00E1gina {0}
 file.selected={} archivos seleccionados
 help.title=Ayudar
+date.today=Hoy
+date.cancel=Cancelar
+date.clear=Borrar
+date.week=Semana
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 323c02d..95017c9 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -231,6 +231,10 @@
   margin-left: .3em;
 }
 
+vaadin-date-picker-light {
+  display: block;
+}
+
 /*
 XXX workaround for Bootstrap with datetimepicker needed for popups
 */
diff --git a/tobago-core/src/test/java/org/apache/myfaces/tobago/internal/util/JsonUtilsUnitTest.java b/tobago-core/src/test/java/org/apache/myfaces/tobago/internal/util/JsonUtilsUnitTest.java
index cf8029f..c9e4ffd 100644
--- a/tobago-core/src/test/java/org/apache/myfaces/tobago/internal/util/JsonUtilsUnitTest.java
+++ b/tobago-core/src/test/java/org/apache/myfaces/tobago/internal/util/JsonUtilsUnitTest.java
@@ -50,7 +50,7 @@
     final CommandMap map = new CommandMap();
     Assertions.assertEquals("{}", JsonUtils.encode(map));
 
-    Assertions.assertEquals(null, JsonUtils.encode((CommandMap) null));
+    Assertions.assertNull(JsonUtils.encode((CommandMap) null));
   }
 
   @Test
@@ -137,7 +137,8 @@
         + dayNamesShort[3] + "','" + dayNamesShort[4] + "','" + dayNamesShort[5] + "','" + dayNamesShort[6] + "'],"
         + "'dayNamesMin':['" + dayNamesMin[0] + "','" + dayNamesMin[1] + "','" + dayNamesMin[2] + "','"
         + dayNamesMin[3] + "','" + dayNamesMin[4] + "','" + dayNamesMin[5] + "','" + dayNamesMin[6] + "'],"
-        + "'firstDay':1}").replaceAll("'", "\"");
+        + "'firstDay':1,'minDays':4,'today':'Today','cancel':'Cancel','clear':'Clear','week':'Week'}")
+        .replaceAll("'", "\"");
 
     Assertions.assertEquals(expected, JsonUtils.encode(dateTimeI18n));
   }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1050-date-vaadin/Date_Vaadin.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1050-date-vaadin/Date_Vaadin.xhtml
index bd3da47..539e6db 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1050-date-vaadin/Date_Vaadin.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1050-date-vaadin/Date_Vaadin.xhtml
@@ -29,8 +29,8 @@
   <hr/>
   Plain light:
 
-  <vaadin-date-picker-light value="" attr-for-value="value" id="v1">
-    <input value="2019-11-11" type="text" id="v2"/>
+  <vaadin-date-picker-light attr-for-value="value" id="v1">
+    <input value="2019-11-11" id="v2" class="input"/>
   </vaadin-date-picker-light>
 
   <hr/>
@@ -41,14 +41,6 @@
   </tc:date>
 
   <hr/>
-  Tobago:
-  <vaadin-date-picker-light>
-    <tc:date value="#{dateController.submitDate}" id="vaadin-light">
-      <f:convertDateTime pattern="yyyy-MM-dd"/>
-    </tc:date>
-  </vaadin-date-picker-light>
-
-  <hr/>
 
   Tobago input:
   <tc:in readonly="true" value="#{dateController.submitDate}" id="classic"/>
diff --git a/tobago-theme/tobago-theme-standard/pom.xml b/tobago-theme/tobago-theme-standard/pom.xml
index 615c348..4f56119 100644
--- a/tobago-theme/tobago-theme-standard/pom.xml
+++ b/tobago-theme/tobago-theme-standard/pom.xml
@@ -82,7 +82,7 @@
     <dependency>
       <groupId>org.webjars</groupId>
         <artifactId>momentjs</artifactId>
-      <version>2.22.2</version>
+      <version>2.24.0</version>
     </dependency>
     <dependency>
       <groupId>org.webjars.npm</groupId>
@@ -94,11 +94,6 @@
         <artifactId>tobago-pack-typeahead</artifactId>
       <version>${project.version}</version>
     </dependency>
-    <dependency>
-      <groupId>org.webjars</groupId>
-        <artifactId>Eonasdan-bootstrap-datetimepicker</artifactId>
-      <version>4.17.47</version>
-    </dependency>
   </dependencies>
 
 </project>
diff --git a/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/LICENSE b/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/LICENSE
index a3bc379..7023daf 100644
--- a/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/LICENSE
+++ b/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/LICENSE
@@ -177,32 +177,6 @@
 THE SOFTWARE.
 
 ------------------------------------------------------------------------------
-For Bootstrap-DateTimePicker:
-------------------------------------------------------------------------------
-
-The MIT License (MIT)
-
-Copyright (c) 2015 Jonathan Peterson (@Eonasdan)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-------------------------------------------------------------------------------
 For Momentum:
 ------------------------------------------------------------------------------
 
@@ -260,3 +234,21 @@
 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 OTHER DEALINGS IN THE SOFTWARE.
+
+------------------------------------------------------------------------------
+For Vaadin:
+------------------------------------------------------------------------------
+
+Copyright (c) by Vaadin Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/NOTICE b/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/NOTICE
index 9ba3265..79e9fd3 100644
--- a/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/NOTICE
+++ b/tobago-theme/tobago-theme-standard/src/main/appended-resources/META-INF/NOTICE
@@ -20,10 +20,10 @@
 HubSpot, Inc. (http://github.hubspot.com/tether/)
 
 This product includes software developed by
-Jonathan Peterson (@Eonasdan)
-
-This product includes software developed by
 Tim Wood, Iskren Chernev, Moment.js contributors
 
 This product includes software developed by
 Federico Zivolo and contributors (PopperJS)
+
+This product includes software developed by
+Vaadin Ltd.
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/package.json b/tobago-theme/tobago-theme-standard/src/main/npm/package.json
index 6f3eeb8..d79929c 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/package.json
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/package.json
@@ -49,6 +49,7 @@
     "eslint-plugin-compat": "^3.1.1",
     "jest": "24.8.0",
     "jquery": "^3.4.1",
+    "moment": "^2.24.0",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
     "popper.js": "^1.15.0",
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/rollup.config.js b/tobago-theme/tobago-theme-standard/src/main/npm/rollup.config.js
index d59e238..478be89 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/rollup.config.js
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/rollup.config.js
@@ -21,7 +21,7 @@
   input: 'js/tobago-all.js',
   output: {
     file: 'js/tobago-bundle.js',
-    format: 'iife',
+    format: 'umd', /* tbd: check if "iife" is better? */
     sourcemap: true,
     name: 'tobago'
   },
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
index 11457f4..152dc7e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-declare var moment;
 declare var jsf;
 
 interface JQuery {
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
index 04b7144..e9f78c5 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
@@ -19,7 +19,12 @@
 import "./tobago-listener";
 import "./tobago-core";
 import "./tobago-dropdown";
-import "@vaadin/vaadin-date-picker";
+// import "@vaadin/vaadin-date-picker";
+import "@vaadin/vaadin-date-picker/vaadin-date-picker-light.js";
+// import "@vaadin/vaadin-date-time-picker";
+// import "@vaadin/vaadin-time-picker";
+// import "@vaadin/vaadin-combo-box";
+// import "moment"; //XXX moment seems not to work with rollup.js, need to re-check
 import "./tobago-date";
 import "./tobago-command";
 import "./tobago-file";
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-date.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-date.ts
index 86f6e01..11fe889 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-date.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-date.ts
@@ -15,234 +15,58 @@
  * limitations under the License.
  */
 
-import {DatePickerLightElement} from "@vaadin/vaadin-date-picker";
-import {DomUtils} from "./tobago-utils";
+import {DatePickerLightElement} from "@vaadin/vaadin-date-picker/vaadin-date-picker-light";
+// @ts-ignore
+import moment = require("moment");
+import {Page} from "./tobago-page";
 
-class DateTime extends HTMLElement {
+interface VaadinDate {
+  day: number;
+  month: number;
+  year: number;
+}
 
-  static addPastClass(date: HTMLInputElement): void {
-    let today = date.dataset.tobagoToday;
-    if (today.length === 10) {
-      const todayArray = today.split("-");
-      if (todayArray.length === 3) {
-        const year = todayArray[0];
-        const month = todayArray[1];
-        const day = todayArray[2];
-        const todayTimestamp = new Date(month + "/" + day + "/" + year).getTime();
+interface VaadinDatePickerI18n {
+  week: string;
+  calendar?: string;
+  clear: string;
+  today: string;
+  cancel: string;
+  firstDayOfWeek: number;
+  monthNames: string[];
+  weekdays: string[];
+  weekdaysShort: string[];
+  formatDate: (date: VaadinDate) => string;
+  formatTitle: (monthName: string, fullYear: string) => string;
+  parseDate: (dateString: string) => VaadinDate;
+}
 
-        const days = document.querySelectorAll(".bootstrap-datetimepicker-widget .datepicker-days td.day[data-day]");
-        for (const day of days) {
-          const currentTimestamp = new Date(day.getAttribute("data-day")).getTime();
-          if (currentTimestamp < todayTimestamp) {
-            day.classList.add("past");
-          }
-        }
-      }
-    }
-  }
+class DatePicker extends HTMLElement {
 
   constructor() {
     super();
   }
 
   connectedCallback(): void {
+    let vaadinDatePicker = document.createElement("vaadin-date-picker-light") as DatePickerLightElement;
+    vaadinDatePicker.setAttribute("attr-for-value", "value");
+    let input = this.inputElement;
+    const i18n = input.dataset.tobagoDateTimeI18n ? JSON.parse(input.dataset.tobagoDateTimeI18n) : undefined;
+    vaadinDatePicker.i18n = this.createVaadinI18n(i18n);
+    vaadinDatePicker.readonly = input.hasAttribute("readonly"); // todo make attribute
+    vaadinDatePicker.showWeekNumbers = true; // tbd
 
-    const date = this.inputElement;
-
-    if (date.readOnly || date.disabled) {
-      return;
+    while (this.childNodes.length) {
+      vaadinDatePicker.appendChild(this.firstChild);
     }
-
-    const analyzed = this.analyzePattern();
-    const options = {
-      format: analyzed,
-      showTodayButton: date.dataset.tobagoTodayButton === "data-tobago-today-button",
-      icons: {
-        time: "fa fa-clock-o",
-        date: "fa fa-calendar",
-        up: "fa fa-chevron-up",
-        down: "fa fa-chevron-down",
-        previous: "fa fa-chevron-left",
-        next: "fa fa-chevron-right",
-        today: "fa fa-calendar-check-o",
-        clear: "fa fa-trash",
-        close: "fa fa-times"
-      },
-      keyBinds: {
-        left: function ($widget): void {
-          const widget: HTMLDivElement = $widget[0] as HTMLDivElement;
-          if (widget === undefined) {
-            if (date.selectionStart === date.selectionEnd) {
-              if (date.selectionStart > 0 || date.selectionStart > 0) {
-                date.selectionStart--;
-                date.selectionEnd--;
-              }
-            } else {
-              date.selectionEnd = date.selectionStart;
-            }
-          } else if (DomUtils.isVisible(widget.querySelector(".datepicker"))) {
-            this.date(this.date().clone().subtract(1, "d"));
-          }
-        },
-        right: function ($widget): void {
-          const widget: HTMLDivElement = $widget[0] as HTMLDivElement;
-          if (widget === undefined) {
-            if (date.selectionStart === date.selectionEnd) {
-              if (date.selectionStart > 0 || date.selectionStart < date.value.length) {
-                date.selectionEnd++;
-                date.selectionStart++;
-              }
-            } else {
-              date.selectionStart = date.selectionEnd;
-            }
-          } else if (DomUtils.isVisible(widget.querySelector(".datepicker"))) {
-            this.date(this.date().clone().add(1, "d"));
-          }
-        },
-        enter: function ($widget): void {
-          const widget: HTMLDivElement = $widget[0] as HTMLDivElement;
-          if (widget !== undefined && DomUtils.isVisible(widget.querySelector(".datepicker"))) {
-            this.hide();
-            fixKey(13);
-          } else {
-            //jQuery because used by datetimepicker
-            jQuery(date).trigger(jQuery.Event("keypress", {
-              which: 13,
-              target: date
-            }));
-          }
-        },
-        escape: function ($widget): void {
-          const widget: HTMLDivElement = $widget[0] as HTMLDivElement;
-          if (widget !== undefined && DomUtils.isVisible(widget.querySelector(".datepicker"))) {
-            this.hide();
-            fixKey(27);
-          }
-        },
-        "delete": function (): void {
-          if (date.selectionStart < date.value.length) {
-            const selectionStart = date.selectionStart;
-            let selectionEnd = date.selectionEnd;
-
-            if (selectionStart === selectionEnd && selectionStart < date.value.length) {
-              selectionEnd++;
-            }
-            date.value = date.value.substr(0, selectionStart)
-                + date.value.substr(selectionEnd, date.value.length);
-
-            date.selectionEnd = selectionStart;
-            date.selectionStart = selectionStart;
-          }
-        }
-      },
-      widgetParent: ".tobago-page-menuStore"
-    };
-
-    /**
-     * After ESC or ENTER is pressed we need to fire the keyup event manually.
-     * see: https://github.com/tempusdominus/bootstrap-4/issues/159
-     */
-    function fixKey(keyCode): void {
-      let keyupEvent = jQuery.Event("keyup");
-      keyupEvent.which = keyCode;
-      jQuery(date).trigger(keyupEvent);
-    }
-
-    const i18n = date.dataset.tobagoDateTimeI18n ? JSON.parse(date.dataset.tobagoDateTimeI18n) : undefined;
-    if (i18n) {
-      const monthNames = i18n.monthNames;
-      if (monthNames) {
-        moment.localeData()._months = monthNames;
-      }
-      const monthNamesShort = i18n.monthNamesShort;
-      if (monthNamesShort) {
-        moment.localeData()._monthsShort = monthNamesShort;
-      }
-      const dayNames = i18n.dayNames;
-      if (dayNames) {
-        moment.localeData()._weekdays = dayNames;
-      }
-      const dayNamesShort = i18n.dayNamesShort;
-      if (dayNamesShort) {
-        moment.localeData()._weekdaysShort = dayNamesShort;
-      }
-      const dayNamesMin = i18n.dayNamesMin;
-      if (dayNamesMin) {
-        moment.localeData()._weekdaysMin = dayNamesMin;
-      }
-      const firstDay = i18n.firstDay;
-      if (firstDay) {
-        moment.localeData()._week.dow = firstDay;
-      }
-    }
-
-    let $dateParent = jQuery(date).parent(); //use jQuery because required for datetimepicker
-    $dateParent.datetimepicker(options);
-
-    // we need to add the change listener here, because
-    // in line 1307 of bootstrap-datetimepicker.js
-    // the 'stopImmediatePropagation()' stops the change-event
-    // execution of line 686 in tobago.js
-
-    $dateParent.on("dp.change", function (event: Event): void {
-      event.target.dispatchEvent(new Event("change", {bubbles: true}));
-    });
-
-    // set position
-    $dateParent.on("dp.show", function (): void {
-      let datepicker: HTMLDivElement = document.querySelector(".bootstrap-datetimepicker-widget");
-      let div: HTMLDivElement = this;
-      let top, left;
-      if (datepicker.classList.contains("bottom")) {
-        top = DomUtils.offset(div).top + div.offsetHeight;
-        left = DomUtils.offset(div).left;
-        datepicker.style.top = top + "px";
-        datepicker.style.bottom = "auto";
-        datepicker.style.left = left + "px";
-      } else if (datepicker.classList.contains("top")) {
-        top = DomUtils.offset(div).top - datepicker.offsetHeight;
-        left = DomUtils.offset(div).left;
-        datepicker.style.top = top + "px";
-        datepicker.style.bottom = "auto";
-        datepicker.style.left = left + "px";
-      }
-      DateTime.addPastClass(date);
-    });
-
-    // set css class in update - like changing the month
-    $dateParent.on("dp.update", function (): void {
-      DateTime.addPastClass(date);
-    });
-
-    // fix for bootstrap-datetimepicker v4.17.45
-    $dateParent.on("dp.show", function (): void {
-      const collapseIn = document.querySelector(".bootstrap-datetimepicker-widget .collapse.in");
-      const pickerSwitch = document.querySelector(".bootstrap-datetimepicker-widget .picker-switch a");
-
-      if (collapseIn !== null) {
-        collapseIn.classList.add("show");
-      }
-      if (pickerSwitch !== null) {
-        pickerSwitch.addEventListener(
-            "click", function (): void {
-              // the click is executed before togglePicker() function
-              let datetimepicker: HTMLDivElement = document.querySelector(".bootstrap-datetimepicker-widget");
-              datetimepicker.querySelector(".collapse.in").classList.remove("in");
-              datetimepicker.querySelector(".collapse.show").classList.add("in");
-            });
-      }
-    });
-  }
-
-  get inputElement(): HTMLInputElement {
-    return this.querySelector("input") as HTMLInputElement;
+    this.appendChild(vaadinDatePicker);
   }
 
   /*
- Get the pattern from the "Java world" (http://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html)
- and convert it to 'moment.js'.
- Attention: Not every pattern char is supported.
- */
+Get the pattern from the "Java world" (http://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html)
+and convert it to 'moment.js'.
+Attention: Not every pattern char is supported.
+*/
   analyzePattern(): string {
     const originalPattern = this.inputElement.dataset.tobagoPattern;
 
@@ -366,33 +190,61 @@
     return pattern;
   }
 
-}
+  createVaadinI18n(i18n: any): VaadinDatePickerI18n {
 
-// XXX switched off
-document.addEventListener("DOMContentLoaded", function (event: Event): void {
-  window.customElements.define("tobago-date", DateTime);
-});
+    const pattern = this.analyzePattern();
+    const locale = Page.page().locale;
 
-class VaadinDatePicker extends HTMLElement {
+    moment.updateLocale(locale, {
+      months: i18n.monthNames,
+      monthsShort: i18n.monthNamesShort,
+      weekdays: i18n.dayNames,
+      weekdaysShort: i18n.dayNamesShort,
+      weekdaysMin: i18n.dayNamesMin,
+      week: {
+        dow: i18n.firstDay,
+        doy: 7 + i18n.firstDay - i18n.minDays // XXX seems not to be supported by VaadinDatePicker: may file an issue!
+      }
+    });
 
-  constructor() {
-    super();
+    const localeData = moment.localeData(locale);
+    return {
+
+      cancel: i18n.cancel,
+      clear: i18n.clear,
+      firstDayOfWeek: localeData.firstDayOfWeek(),
+      monthNames: localeData.months(),
+      today: i18n.today,
+      week: i18n.week,
+      weekdays: localeData.weekdays(),
+      weekdaysShort: localeData.weekdaysShort(),
+      formatDate: (date: VaadinDate) => {
+        return moment({
+          date: date.day,
+          month: date.month,
+          year: date.year,
+        })
+            .locale(locale!)
+            .format(pattern);
+      },
+      formatTitle: (monthName: string, fullYear: string) => `${monthName} ${fullYear}`,
+      parseDate: (dateString: string) => {
+        const date = moment(dateString, pattern, locale);
+        return {
+          day: date.date(),
+          month: date.month(),
+          year: date.year(),
+        };
+      },
+    };
   }
 
-  connectedCallback(): void {
-    let outer = this.querySelector(".tobago-input-group-outer");
-    let vaadinDatePicker = document.createElement("vaadin-date-picker-light") as HTMLElement;
-    vaadinDatePicker.setAttribute("attr-for-value", "value");
-    // vaadinDatePicker.addEventListener("change", (event) => {
-    //   input.value = vaadinDatePicker.value;
-    // });
-    this.appendChild(vaadinDatePicker);
-    vaadinDatePicker.appendChild(outer);
-    // input.classList.add("d-none");
+  get inputElement(): HTMLInputElement {
+    return this.querySelector(".input") as HTMLInputElement;
   }
 }
 
 // XXX switched on
-// document.addEventListener("DOMContentLoaded", function (event: Event): void {
-//   window.customElements.define("tobago-date", VaadinDatePicker);
-// });
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+  window.customElements.define("tobago-date", DatePicker);
+});
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-page.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-page.ts
index 931fe6b..7c335ba 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-page.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-page.ts
@@ -23,13 +23,13 @@
   /**
    * The Tobago root element
    */
-  static page(): HTMLElement {
+  static page(): Page {
     const pages = document.getElementsByTagName("tobago-page");
     if (pages.length > 0) {
       if (pages.length >= 2) {
         console.warn("Found more than one tobago page!");
       }
-      return pages.item(0) as HTMLElement;
+      return pages.item(0) as Page;
     }
     console.warn("Found no tobago page!");
     return null;
@@ -72,6 +72,14 @@
       }
     });
   }
+
+  get locale(): string {
+    let locale = this.getAttribute("locale");
+    if (!locale) {
+        locale = document.documentElement.lang;
+    }
+    return locale;
+  }
 }
 
 document.addEventListener("DOMContentLoaded", function (event: Event): void {
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
index c1436ff..27eadcd 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
@@ -43,8 +43,7 @@
           <script name="/webjars/tether/1.4.0/js/tether.min.js"/>
           <script name="/webjars/popper.js/1.14.3/umd/popper.min.js"/>
           <script name="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"/>
-          <script name="/webjars/momentjs/2.22.2/min/moment-with-locales.min.js"/>
-          <script name="/webjars/Eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"/>
+          <script name="/webjars/momentjs/2.24.0/min/moment-with-locales.min.js"/>
 <!--          <script name="/tobago/standard/tobago-bootstrap/${project.version}/node_modules/@babel/polyfill/dist/polyfill.js"/>-->
           <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-polyfill.js"/>
           <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago.min.js"/>
@@ -52,7 +51,6 @@
           <style name="/webjars/tether/1.4.0/css/tether.min.css"/>
           <style name="/tobago/standard/tobago-bootstrap/${project.version}/css/tobago.min.css"/>
           <style name="/webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
-          <style name="/webjars/Eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"/>
         </includes>
       </resources>
       <resources production="false">
@@ -62,8 +60,7 @@
           <script name="/webjars/tether/1.4.0/js/tether.js"/>
           <script name="/webjars/popper.js/1.14.3/umd/popper.js"/>
           <script name="/webjars/bootstrap/4.3.1/js/bootstrap.js"/>
-          <script name="/webjars/momentjs/2.22.2/min/moment-with-locales.js"/>
-          <script name="/webjars/Eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.js"/>
+          <script name="/webjars/momentjs/2.24.0/min/moment-with-locales.js"/>
           <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-myfaces.js"/>
           <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-deltaspike.js"/>
 <!--          <script name="/tobago/standard/tobago-bootstrap/${project.version}/node_modules/@babel/polyfill/dist/polyfill.js"/>-->
@@ -101,7 +98,6 @@
           <style name="/webjars/tether/1.4.0/css/tether.css"/>
           <style name="/tobago/standard/tobago-bootstrap/${project.version}/css/tobago.css"/>
           <style name="/webjars/font-awesome/4.7.0/css/font-awesome.css"/>
-          <style name="/webjars/Eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css"/>
         </includes>
       </resources>
     </theme-definition>