diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 68299d5d..5d5f4433 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -14,9 +14,9 @@ body:
     attributes:
       label: "Checklist"
       options:
-        - label: "I am able to reproduce the bug with the [latest version](https://github.com/xdev-software/template-placeholder/releases/latest)"
+        - label: "I am able to reproduce the bug with the [latest version](https://github.com/xdev-software/vaadin-date-range-picker/releases/latest)"
           required: true
-        - label: "I made sure that there are *no existing issues* - [open](https://github.com/xdev-software/template-placeholder/issues) or [closed](https://github.com/xdev-software/template-placeholder/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
+        - label: "I made sure that there are *no existing issues* - [open](https://github.com/xdev-software/vaadin-date-range-picker/issues) or [closed](https://github.com/xdev-software/vaadin-date-range-picker/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
           required: true
         - label: "I have taken the time to fill in all the required details. I understand that the bug report will be dismissed otherwise."
           required: true
diff --git a/.github/ISSUE_TEMPLATE/enhancement.yml b/.github/ISSUE_TEMPLATE/enhancement.yml
index 75231293..1aeeb664 100644
--- a/.github/ISSUE_TEMPLATE/enhancement.yml
+++ b/.github/ISSUE_TEMPLATE/enhancement.yml
@@ -12,7 +12,7 @@ body:
     attributes:
       label: "Checklist"
       options:
-        - label: "I made sure that there are *no existing issues* - [open](https://github.com/xdev-software/template-placeholder/issues) or [closed](https://github.com/xdev-software/template-placeholder/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
+        - label: "I made sure that there are *no existing issues* - [open](https://github.com/xdev-software/vaadin-date-range-picker/issues) or [closed](https://github.com/xdev-software/vaadin-date-range-picker/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
           required: true
         - label: "I have taken the time to fill in all the required details. I understand that the feature request will be dismissed otherwise."
           required: true
diff --git a/.github/ISSUE_TEMPLATE/question.yml b/.github/ISSUE_TEMPLATE/question.yml
index 6ecd6ad5..a768fb24 100644
--- a/.github/ISSUE_TEMPLATE/question.yml
+++ b/.github/ISSUE_TEMPLATE/question.yml
@@ -12,7 +12,7 @@ body:
     attributes:
       label: "Checklist"
       options:
-        - label: "I made sure that there are *no existing issues* - [open](https://github.com/xdev-software/template-placeholder/issues) or [closed](https://github.com/xdev-software/template-placeholder/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
+        - label: "I made sure that there are *no existing issues* - [open](https://github.com/xdev-software/vaadin-date-range-picker/issues) or [closed](https://github.com/xdev-software/vaadin-date-range-picker/issues?q=is%3Aissue+is%3Aclosed) - which I could contribute my information to."
           required: true
         - label: "I have taken the time to fill in all the required details. I understand that the question will be dismissed otherwise."
           required: true
diff --git a/.run/Run Demo.run.xml b/.run/Run Demo.run.xml
index 30917454..eaf0654b 100644
--- a/.run/Run Demo.run.xml	
+++ b/.run/Run Demo.run.xml	
@@ -1,7 +1,7 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="Run Demo" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="software.xdev.vaadin.Application" />
-    <module name="template-placeholder-demo" />
+    <module name="vaadin-date-range-picker-demo" />
     <option name="WORKING_DIRECTORY" value="$MODULE_DIR$" />
     <extension name="coverage">
       <pattern>
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e69de29b..0574711c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,46 @@
+## 4.1.1
+* Only use client-side locale for formatting when no ``formatLocale`` has been set #353
+
+## 4.1.0
+* Updated to Vaadin 24.4
+* Minor code improvements
+
+## 4.0.2
+* ⚠️ GroupId changed from ``com.xdev-software`` to ``software.xdev``
+* Updated dependencies
+
+## 4.0.1
+* Various dependency updates including Vaadin 24.1
+
+## 4.0.0
+
+⚠️<i>This release contains breaking changes</i>
+
+* Adds support for Vaadin 24+, drops support for Vaadin 23<br/>
+  <i>If you are still using Vaadin 23, use the ``3.x`` versions.</i>
+  * Requires Java 17+
+  * Fixed Broken overlay detection on Vaadin 24 #224 
+* Added ``AllowRangeLimitExceeding``; default value is ``true``
+* Updated dependencies
+
+## 3.0.3
+* Renamed ``defaultModel`` to ``initialModel``
+* Updated dependencies
+
+## 3.0.2
+* Updated dependencies
+  * Vaadin 23.3
+
+## 3.0.1
+
+* Updated dependencies
+  * Vaadin 23.2
+
+## 3.0.0
+
+⚠️<i>This release contains breaking changes</i>
+
+* Adds support for Vaadin 23+, drops support for Vaadin 14 #155<br/>
+  <i>If you are still using Vaadin 14, use the ``2.x`` versions.</i>
+  * Requires Java 11+
+* Updated dependencies
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 40413157..73d3c3a0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -47,10 +47,10 @@ Bigger changes may require a complete restart.
   * [Vaadin automatically reloads the UI on each restart](https://vaadin.com/docs/latest/configuration/live-reload/spring-boot).<br/>
   You can control this behavior with the ``vaadin.devmode.liveReload.enabled`` property (default: ``true``).
 
-## Releasing [![Build](https://img.shields.io/github/actions/workflow/status/xdev-software/template-placeholder/release.yml?branch=master)](https://github.com/xdev-software/template-placeholder/actions/workflows/release.yml)
+## Releasing [![Build](https://img.shields.io/github/actions/workflow/status/xdev-software/vaadin-date-range-picker/release.yml?branch=master)](https://github.com/xdev-software/vaadin-date-range-picker/actions/workflows/release.yml)
 
 Before releasing:
-* Consider doing a [test-deployment](https://github.com/xdev-software/template-placeholder/actions/workflows/test-deploy.yml?query=branch%3Adevelop) before actually releasing.
+* Consider doing a [test-deployment](https://github.com/xdev-software/vaadin-date-range-picker/actions/workflows/test-deploy.yml?query=branch%3Adevelop) before actually releasing.
 * Check the [changelog](CHANGELOG.md)
 
 If the ``develop`` is ready for release, create a pull request to the ``master``-Branch and merge the changes
diff --git a/README.md b/README.md
index a8a96c6d..4d6ca397 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,29 @@
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0?logo=vaadin)](https://vaadin.com/directory/component/template-placeholder)
-[![Latest version](https://img.shields.io/maven-central/v/software.xdev/template-placeholder?logo=apache%20maven)](https://mvnrepository.com/artifact/software.xdev/template-placeholder)
-[![Build](https://img.shields.io/github/actions/workflow/status/xdev-software/template-placeholder/check-build.yml?branch=develop)](https://github.com/xdev-software/template-placeholder/actions/workflows/check-build.yml?query=branch%3Adevelop)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=xdev-software_template-placeholder&metric=alert_status)](https://sonarcloud.io/dashboard?id=xdev-software_template-placeholder)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0?logo=vaadin)](https://vaadin.com/directory/component/daterangepicker-for-vaadin)
+[![Latest version](https://img.shields.io/maven-central/v/software.xdev/vaadin-date-range-picker?logo=apache%20maven)](https://mvnrepository.com/artifact/software.xdev/vaadin-date-range-picker)
+[![Build](https://img.shields.io/github/actions/workflow/status/xdev-software/vaadin-date-range-picker/check-build.yml?branch=develop)](https://github.com/xdev-software/vaadin-date-range-picker/actions/workflows/check-build.yml?query=branch%3Adevelop)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=xdev-software_vaadin-date-range-picker&metric=alert_status)](https://sonarcloud.io/dashboard?id=xdev-software_vaadin-date-range-picker)
 ![Vaadin 24+](https://img.shields.io/badge/Vaadin%20Platform/Flow-24+-00b4f0)
 
-# template-placeholder
-A Vaadin Template Repo
+# vaadin-date-range-picker
+A Vaadin Flow DateRangePicker implementation
 
 ![demo](assets/demo.png)
 
 
 ## Installation
-[Installation guide for the latest release](https://github.com/xdev-software/template-placeholder/releases/latest#Installation)
+[Installation guide for the latest release](https://github.com/xdev-software/vaadin-date-range-picker/releases/latest#Installation)
+
+#### Compatibility with Vaadin
+
+| Vaadin version | DateRangePicker version |
+| --- | --- |
+| Vaadin 24+ (latest) | ``4+`` |
+| Vaadin 23 | ``3.x`` |
+| Vaadin 14 | ``2.x`` |
 
 ## Run the Demo
 * Checkout the repo
-* Run ``mvn install && mvn -f template-placeholder-demo spring-boot:run``
+* Run ``mvn install && mvn -f vaadin-date-range-picker-demo spring-boot:run``
 * Open http://localhost:8080
 
 <details>
@@ -31,4 +39,4 @@ If you need support as soon as possible and you can't wait for any pull request,
 See the [contributing guide](./CONTRIBUTING.md) for detailed instructions on how to get started with our project.
 
 ## Dependencies and Licenses
-View the [license of the current project](LICENSE) or the [summary including all dependencies](https://xdev-software.github.io/template-placeholder/dependencies)
+View the [license of the current project](LICENSE) or the [summary including all dependencies](https://xdev-software.github.io/vaadin-date-range-picker/dependencies)
diff --git a/SECURITY.md b/SECURITY.md
index 34b9514d..9747e10c 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -2,4 +2,4 @@
 
 ## Reporting a Vulnerability
 
-Please report a security vulnerability [on GitHub Security Advisories](https://github.com/xdev-software/template-placeholder/security/advisories/new).
+Please report a security vulnerability [on GitHub Security Advisories](https://github.com/xdev-software/vaadin-date-range-picker/security/advisories/new).
diff --git a/assets/demo.avif b/assets/demo.avif
index c12da7e6..33adb3d3 100644
Binary files a/assets/demo.avif and b/assets/demo.avif differ
diff --git a/assets/demo.png b/assets/demo.png
index a5d9bad4..ba5bbb18 100644
Binary files a/assets/demo.png and b/assets/demo.png differ
diff --git a/pom.xml b/pom.xml
index ce23a37a..02006a85 100644
--- a/pom.xml
+++ b/pom.xml
@@ -5,8 +5,8 @@
 	<modelVersion>4.0.0</modelVersion>
 
 	<groupId>software.xdev</groupId>
-	<artifactId>template-placeholder-root</artifactId>
-	<version>1.0.0-SNAPSHOT</version>
+	<artifactId>vaadin-date-range-picker-root</artifactId>
+	<version>4.1.2-SNAPSHOT</version>
 	<packaging>pom</packaging>
 
 	<organization>
@@ -15,8 +15,8 @@
 	</organization>
 
 	<modules>
-		<module>template-placeholder</module>
-		<module>template-placeholder-demo</module>
+		<module>vaadin-date-range-picker</module>
+		<module>vaadin-date-range-picker-demo</module>
 	</modules>
 
 	<properties>
diff --git a/renovate.json5 b/renovate.json5
index 2874d457..cac575a0 100644
--- a/renovate.json5
+++ b/renovate.json5
@@ -4,7 +4,7 @@
   "packageRules": [
     {
       "description": "Ignore project internal dependencies",
-      "packagePattern": "^software.xdev:template-placeholder",
+      "packagePattern": "^software.xdev:vaadin-date-range-picker",
       "datasources": [
         "maven"
       ],
diff --git a/template-placeholder-demo/pom.xml b/vaadin-date-range-picker-demo/pom.xml
similarity index 95%
rename from template-placeholder-demo/pom.xml
rename to vaadin-date-range-picker-demo/pom.xml
index fd6bc929..1ecb596b 100644
--- a/template-placeholder-demo/pom.xml
+++ b/vaadin-date-range-picker-demo/pom.xml
@@ -6,12 +6,12 @@
 
 	<parent>
 		<groupId>software.xdev</groupId>
-		<artifactId>template-placeholder-root</artifactId>
-		<version>1.0.0-SNAPSHOT</version>
+		<artifactId>vaadin-date-range-picker-root</artifactId>
+		<version>4.1.2-SNAPSHOT</version>
 	</parent>
 
-	<artifactId>template-placeholder-demo</artifactId>
-	<version>1.0.0-SNAPSHOT</version>
+	<artifactId>vaadin-date-range-picker-demo</artifactId>
+	<version>4.1.2-SNAPSHOT</version>
 	<packaging>jar</packaging>
 
 	<organization>
@@ -64,7 +64,7 @@
 		</dependency>
 		<dependency>
 			<groupId>software.xdev</groupId>
-			<artifactId>template-placeholder</artifactId>
+			<artifactId>vaadin-date-range-picker</artifactId>
 			<version>${project.version}</version>
 		</dependency>
 
diff --git a/template-placeholder-demo/src/main/java/software/xdev/vaadin/Application.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/Application.java
similarity index 100%
rename from template-placeholder-demo/src/main/java/software/xdev/vaadin/Application.java
rename to vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/Application.java
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/HomeView.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/HomeView.java
new file mode 100644
index 00000000..4a1bd53a
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/HomeView.java
@@ -0,0 +1,81 @@
+package software.xdev.vaadin.daterange_picker;
+
+import java.util.Arrays;
+
+import com.vaadin.flow.component.AttachEvent;
+import com.vaadin.flow.component.Composite;
+import com.vaadin.flow.component.grid.Grid;
+import com.vaadin.flow.component.grid.GridVariant;
+import com.vaadin.flow.component.html.Anchor;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.data.renderer.ComponentRenderer;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+import software.xdev.vaadin.daterange_picker.example.DateRangePickerCustomizedDemo;
+import software.xdev.vaadin.daterange_picker.example.DateRangePickerLocalizedDemo;
+import software.xdev.vaadin.daterange_picker.example.DateRangePickerParameterDemo;
+import software.xdev.vaadin.daterange_picker.example.DateRangePickerRangeExceedingDemo;
+import software.xdev.vaadin.daterange_picker.example.DateRangePickerStyledDemo;
+
+
+@PageTitle("DateRangePicker Examples")
+@Route("")
+public class HomeView extends Composite<VerticalLayout>
+{
+	private final Grid<Example> grExamples = new Grid<>();
+	
+	public HomeView()
+	{
+		this.grExamples
+			.addColumn(new ComponentRenderer<>(example -> {
+				final Anchor anchor = new Anchor(example.route(), example.name());
+				
+				final Span spDesc = new Span(example.desc());
+				spDesc.getStyle().set("font-size", "90%");
+				
+				final VerticalLayout vl = new VerticalLayout(anchor, spDesc);
+				vl.setSpacing(false);
+				return vl;
+			}))
+			.setHeader("Available demos");
+		
+		this.grExamples.setSizeFull();
+		this.grExamples.addThemeVariants(GridVariant.LUMO_COMPACT, GridVariant.LUMO_NO_BORDER);
+		
+		this.getContent().add(this.grExamples);
+		this.getContent().setHeightFull();
+	}
+	
+	@Override
+	protected void onAttach(final AttachEvent attachEvent)
+	{
+		this.grExamples.setItems(Arrays.asList(
+			new Example(
+				DateRangePickerStyledDemo.NAV,
+				"Styled-Demo",
+				"dark mode 🌑  and more"),
+			new Example(
+				DateRangePickerParameterDemo.NAV,
+				"Parameter-Demo",
+				"configuration is stored in QueryParameters"),
+			new Example(
+				DateRangePickerLocalizedDemo.NAV,
+				"Localized-Demo",
+				"🌐 simple localization"),
+			new Example(
+				DateRangePickerRangeExceedingDemo.NAV,
+				"RangeExceeding-Demo",
+				"usage of a range exceeding DateRange"),
+			new Example(
+				DateRangePickerCustomizedDemo.NAV,
+				"Customized-Demo",
+				"usage of a customized DateRange")
+		));
+	}
+	
+	record Example(String route, String name, String desc)
+	{
+	}
+}
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/AbstractSimpleChangeDemo.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/AbstractSimpleChangeDemo.java
new file mode 100644
index 00000000..c3250459
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/AbstractSimpleChangeDemo.java
@@ -0,0 +1,63 @@
+package software.xdev.vaadin.daterange_picker.example;
+
+import java.time.LocalDate;
+import java.util.Arrays;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+import com.vaadin.flow.component.Composite;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.TextArea;
+
+import software.xdev.vaadin.daterange_picker.business.DateRangeModel;
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRange;
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRanges;
+import software.xdev.vaadin.daterange_picker.ui.DateRangePicker;
+
+
+public abstract class AbstractSimpleChangeDemo extends Composite<VerticalLayout>
+{
+	protected static final List<SimpleDateRange> DATERANGE_VALUES = Arrays.asList(SimpleDateRanges.allValues());
+	
+	protected final DateRangePicker<SimpleDateRange> dateRangePicker =
+		new DateRangePicker<>(
+			() -> new DateRangeModel<>(LocalDate.now(), LocalDate.now(), SimpleDateRanges.TODAY),
+			DATERANGE_VALUES);
+	
+	protected final TextArea taResult =
+		new TextArea("ValueChangeEvent", "Change something in the date-picker to see the result");
+	
+	protected void registerDefaultValueChangeListener()
+	{
+		this.dateRangePicker.addValueChangeListener(ev ->
+		{
+			final DateRangeModel<SimpleDateRange> modell = ev.getValue();
+			
+			this.taResult.clear();
+			
+			final Map<String, String> results = new HashMap<>(Map.of(
+				"DateRange", modell.getDateRange().getKey(),
+				"Start", modell.getStart().toString(),
+				"End", modell.getEnd().toString(),
+				"IsFromClient", String.valueOf(ev.isFromClient())
+			));
+			if(ev.getOldValue() != null)
+			{
+				results.putAll(Map.of(
+					"OldValue-DateRange", ev.getOldValue().getDateRange().getKey(),
+					"OldValue-Start", ev.getOldValue().getStart().toString(),
+					"OldValue-End", ev.getOldValue().getEnd().toString()));
+			}
+			else
+			{
+				results.put("OldValue", "null");
+			}
+			this.taResult.setValue(results.entrySet()
+				.stream()
+				.map(e -> e.getKey() + ": " + e.getValue())
+				.collect(Collectors.joining("\r\n")));
+		});
+	}
+}
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerCustomizedDemo.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerCustomizedDemo.java
new file mode 100644
index 00000000..25860eac
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerCustomizedDemo.java
@@ -0,0 +1,61 @@
+package software.xdev.vaadin.daterange_picker.example;
+
+import java.time.LocalDate;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+import com.vaadin.flow.component.Composite;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.TextArea;
+import com.vaadin.flow.router.Route;
+
+import software.xdev.vaadin.daterange_picker.business.DateRangeModel;
+import software.xdev.vaadin.daterange_picker.example.customized.CustomDateRange;
+import software.xdev.vaadin.daterange_picker.example.customized.CustomDateRanges;
+import software.xdev.vaadin.daterange_picker.ui.DateRangePicker;
+
+
+@Route(DateRangePickerCustomizedDemo.NAV)
+public class DateRangePickerCustomizedDemo extends Composite<VerticalLayout>
+{
+	public static final String NAV = "customized";
+	
+	protected static final List<CustomDateRange> DATERANGE_VALUES = Arrays.asList(CustomDateRanges.allValues());
+	
+	private final DateRangePicker<CustomDateRange> dateRangePicker =
+		new DateRangePicker<>(
+			() -> new DateRangeModel<>(LocalDate.now(), LocalDate.now(), CustomDateRanges.DAY),
+			DATERANGE_VALUES);
+	
+	private final TextArea taResult =
+		new TextArea("ValueChangeEvent", "Change something in the datepicker to see the result");
+	
+	public DateRangePickerCustomizedDemo()
+	{
+		this.initUI();
+	}
+	
+	protected void initUI()
+	{
+		this.taResult.setSizeFull();
+		this.getContent().add(this.dateRangePicker, this.taResult);
+		
+		this.dateRangePicker.addValueChangeListener(ev ->
+		{
+			final DateRangeModel<CustomDateRange> modell = ev.getValue();
+			
+			this.taResult.clear();
+			this.taResult.setValue(Map.of(
+					"DateRange", modell.getDateRange().getKey(),
+					"DateRange-Tag", modell.getDateRange().getTag(),
+					"Start", modell.getStart().toString(),
+					"End", modell.getEnd().toString()
+				).entrySet()
+				.stream()
+				.map(e -> e.getKey() + ": " + e.getValue())
+				.collect(Collectors.joining("\r\n")));
+		});
+	}
+}
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerLocalizedDemo.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerLocalizedDemo.java
new file mode 100644
index 00000000..2f87da22
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerLocalizedDemo.java
@@ -0,0 +1,146 @@
+package software.xdev.vaadin.daterange_picker.example;
+
+import java.time.DayOfWeek;
+import java.time.LocalDate;
+import java.time.Month;
+import java.time.format.TextStyle;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
+
+import com.vaadin.flow.component.Composite;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.TextArea;
+import com.vaadin.flow.router.Route;
+
+import software.xdev.vaadin.daterange_picker.business.DateRangeModel;
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRange;
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRanges;
+import software.xdev.vaadin.daterange_picker.ui.DateRangePicker;
+
+
+@Route(DateRangePickerLocalizedDemo.NAV)
+public class DateRangePickerLocalizedDemo extends Composite<VerticalLayout>
+{
+	public static final String NAV = "localized";
+	
+	protected static final List<SimpleDateRange> DATERANGE_VALUES = Arrays.asList(SimpleDateRanges.allValues());
+	
+	private final DateRangePicker<SimpleDateRange> dateRangePicker =
+		new DateRangePicker<>(
+			() -> new DateRangeModel<>(LocalDate.now(), LocalDate.now(), SimpleDateRanges.TODAY),
+			DATERANGE_VALUES)
+			.withDatePickerI18n(getDatePickerI18n())
+			.withDateRangeLocalizerFunction(dr -> {
+				if(dr == SimpleDateRanges.TODAY)
+				{
+					return "Today - Heute";
+				}
+				else if(dr == SimpleDateRanges.DAY)
+				{
+					return "Day - Tag";
+				}
+				else if(dr == SimpleDateRanges.WEEK)
+				{
+					return "Week - Woche";
+				}
+				else if(dr == SimpleDateRanges.MONTH)
+				{
+					return "Month - Monat";
+				}
+				else if(dr == SimpleDateRanges.QUARTER)
+				{
+					return "Quarter - Quartal";
+				}
+				else if(dr == SimpleDateRanges.HALF_YEAR)
+				{
+					return "Half year - Halbjahr";
+				}
+				else if(dr == SimpleDateRanges.YEAR)
+				{
+					return "Year - Jahr";
+				}
+				else if(dr == SimpleDateRanges.FREE)
+				{
+					return "Free - Frei";
+				}
+				
+				return "?";
+			})
+			.withStartLabel("Start - Anfang")
+			.withEndLabel("End - Ende")
+			.withDateRangeOptionsLabel("Period - Zeitraum");
+	
+	private final TextArea taResult =
+		new TextArea("ValueChangeEvent", "Change something in the datepicker to see the result");
+	
+	private final Button btnToogleReadonly = new Button("Toogle Readonly");
+	
+	public DateRangePickerLocalizedDemo()
+	{
+		this.initUI();
+	}
+	
+	protected void initUI()
+	{
+		this.taResult.setSizeFull();
+		this.getContent().add(this.dateRangePicker, this.taResult, this.btnToogleReadonly);
+		
+		this.btnToogleReadonly.addClickListener(ev ->
+			this.dateRangePicker.setReadOnly(!this.dateRangePicker.isReadOnly()));
+		
+		this.dateRangePicker.addValueChangeListener(ev ->
+		{
+			final DateRangeModel<SimpleDateRange> modell = ev.getValue();
+			
+			this.taResult.clear();
+			this.taResult.setValue(Map.of(
+					"DateRange", modell.getDateRange().getKey(),
+					"Start", modell.getStart().toString(),
+					"End", modell.getEnd().toString()
+				).entrySet()
+				.stream()
+				.map(e -> e.getKey() + ": " + e.getValue())
+				.collect(Collectors.joining("\r\n")));
+		});
+	}
+	
+	// List Must start with Sunday and ends with Saturday... Americans...
+	private static final List<DayOfWeek> DAYS_OF_WEEK_SORTED_FOR_DATEPICKER =
+		Stream.concat(
+				Stream.of(DayOfWeek.SUNDAY),
+				Stream.of(DayOfWeek.values()).filter(dow -> !dow.equals(DayOfWeek.SUNDAY)))
+			.toList();
+	
+	private static final List<String> WEEKDAYS = DAYS_OF_WEEK_SORTED_FOR_DATEPICKER.stream()
+		.map(dow -> dow.getDisplayName(TextStyle.FULL, Locale.GERMAN))
+		.toList();
+	private static final List<String> WEEKDAYS_SHORT = DAYS_OF_WEEK_SORTED_FOR_DATEPICKER.stream()
+		.map(dow -> dow.getDisplayName(TextStyle.SHORT, Locale.GERMAN))
+		.toList();
+	private static final List<String> MONTHS = Stream.of(Month.values())
+		.map(m -> m.getDisplayName(TextStyle.FULL, Locale.GERMAN))
+		.toList();
+	
+	/**
+	 * Standard DatePickerI18N
+	 */
+	public static DatePickerI18n getDatePickerI18n()
+	{
+		final DatePickerI18n datepicker = new DatePickerI18n();
+		datepicker.setFirstDayOfWeek(1);
+		
+		datepicker.setCancel("Abbrechen");
+		datepicker.setToday("Heute");
+		
+		datepicker.setMonthNames(MONTHS);
+		datepicker.setWeekdays(WEEKDAYS);
+		datepicker.setWeekdaysShort(WEEKDAYS_SHORT);
+		return datepicker;
+	}
+}
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerParameterDemo.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerParameterDemo.java
new file mode 100644
index 00000000..07cc2670
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerParameterDemo.java
@@ -0,0 +1,219 @@
+package software.xdev.vaadin.daterange_picker.example;
+
+import java.time.LocalDate;
+import java.time.format.DateTimeParseException;
+import java.time.temporal.ChronoUnit;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Map.Entry;
+import java.util.Optional;
+
+import com.vaadin.flow.component.Composite;
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.notification.Notification;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.AfterNavigationEvent;
+import com.vaadin.flow.router.AfterNavigationObserver;
+import com.vaadin.flow.router.Location;
+import com.vaadin.flow.router.QueryParameters;
+import com.vaadin.flow.router.Route;
+
+import software.xdev.vaadin.daterange_picker.business.DateRangeModel;
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRange;
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRanges;
+import software.xdev.vaadin.daterange_picker.ui.DateRangePicker;
+
+
+@Route(DateRangePickerParameterDemo.NAV)
+public class DateRangePickerParameterDemo extends Composite<VerticalLayout> implements AfterNavigationObserver
+{
+	public static final String NAV = "parameter";
+	
+	protected static final List<SimpleDateRange> DATERANGE_VALUES = Arrays.asList(SimpleDateRanges.allValues());
+	
+	public static final String QP_RANGE = "range";
+	public static final String QP_RANGE_START = "range_start";
+	public static final String QP_RANGE_END = "range_end";
+	
+	private final DateRangePicker<SimpleDateRange> dateRangePicker = new DateRangePicker<>(
+		() -> new DateRangeModel<>(LocalDate.now(), LocalDate.now(), SimpleDateRanges.TODAY),
+		DATERANGE_VALUES);
+	
+	private boolean blockUpdates = true;
+	
+	public DateRangePickerParameterDemo()
+	{
+		this.initUI();
+	}
+	
+	protected void initUI()
+	{
+		this.dateRangePicker.addValueChangeListener(ev -> this.onConfigChanged());
+		
+		this.getContent().add(this.dateRangePicker);
+	}
+	
+	@SuppressWarnings("checkstyle:MagicNumber")
+	protected void onConfigChanged()
+	{
+		if(this.blockUpdates)
+		{
+			return;
+		}
+		
+		final DateRangeModel<SimpleDateRange> dateRangeModell = this.dateRangePicker.getValue();
+		if(ChronoUnit.DAYS.between(dateRangeModell.getStart(), dateRangeModell.getEnd()) >= 400)
+		{
+			Notification.show("Selected period too long");
+			this.updateCurrentUrlSetDefault();
+			return;
+		}
+		
+		this.updateCurrentUrl();
+	}
+	
+	private void updateCurrentUrlSetDefault()
+	{
+		this.updateCurrentUrl(new Location(DateRangePickerParameterDemo.NAV));
+	}
+	
+	private void updateCurrentUrl()
+	{
+		final Map<String, String> queryParaMap = new LinkedHashMap<>();
+		queryParaMap.put(QP_RANGE, this.dateRangePicker.getDateRange().getKey().toLowerCase());
+		
+		if(this.dateRangePicker.getDateRange() != SimpleDateRanges.TODAY)
+		{
+			queryParaMap.put(QP_RANGE_START, this.dateRangePicker.getStart().toString());
+		}
+		
+		if(this.dateRangePicker.getDateRange() == SimpleDateRanges.FREE)
+		{
+			queryParaMap.put(QP_RANGE_END, this.dateRangePicker.getEnd().toString());
+		}
+		
+
+		final Map<String, List<String>> queryParas = new LinkedHashMap<>();
+		for(final Entry<String, String> entry : queryParaMap.entrySet())
+		{
+			queryParas.put(entry.getKey(), Collections.singletonList(entry.getValue()));
+		}
+		
+		this.updateCurrentUrl(new Location(DateRangePickerParameterDemo.NAV, new QueryParameters(queryParas)));
+	}
+	
+	private void updateCurrentUrl(final Location location)
+	{
+		UI.getCurrent().getPage().getHistory().replaceState(null, location);
+	}
+	
+	@SuppressWarnings({"PMD.CognitiveComplexity", "PMD.NPathComplexity"})
+	@Override
+	public void afterNavigation(final AfterNavigationEvent event)
+	{
+		boolean invalidParameter = false;
+		
+		final Map<String, List<String>> paras = event.getLocation().getQueryParameters().getParameters();
+		
+		// --- DateRange-Values ---
+		SimpleDateRange dateRange = SimpleDateRanges.TODAY;
+		LocalDate start = LocalDate.now();
+		LocalDate end = null;
+		
+		if(paras.containsKey(QP_RANGE) && !paras.get(QP_RANGE).isEmpty())
+		{
+			final Optional<SimpleDateRange> optQueryDR =
+				DATERANGE_VALUES
+				.stream()
+				.filter(dr -> dr.getKey().equalsIgnoreCase(paras.get(QP_RANGE).get(0)))
+				.findFirst();
+			
+			if(optQueryDR.isPresent())
+			{
+				dateRange = optQueryDR.get();
+			}
+			else
+			{
+				invalidParameter = true;
+			}
+		}
+		
+		if(paras.containsKey(QP_RANGE_START) && !paras.get(QP_RANGE_START).isEmpty())
+		{
+			if(dateRange != SimpleDateRanges.TODAY)
+			{
+				try
+				{
+					start = LocalDate.parse(paras.get(QP_RANGE_START).get(0));
+				}
+				catch(final DateTimeParseException e)
+				{
+					invalidParameter = true;
+				}
+			}
+			else
+			{
+				invalidParameter = true;
+			}
+		}
+		
+		if(paras.containsKey(QP_RANGE_END) && !paras.get(QP_RANGE_END).isEmpty())
+		{
+			if(dateRange == SimpleDateRanges.FREE)
+			{
+				try
+				{
+					end = LocalDate.parse(paras.get(QP_RANGE_END).get(0));
+				}
+				catch(final DateTimeParseException e)
+				{
+					invalidParameter = true;
+				}
+			}
+			else
+			{
+				invalidParameter = true;
+			}
+		}
+		
+		// Check if free range is valid
+		if(dateRange == SimpleDateRanges.FREE)
+		{
+			if(end != null && !start.isAfter(end))
+			{
+				this.dateRangePicker.setValue(new DateRangeModel<>(start, end, dateRange));
+			}
+			else
+			{
+				invalidParameter = true;
+			}
+		}
+		else
+		{
+			final SimpleDateRange dr = dateRange;
+			
+			dateRange.calcFor(start)
+				.ifPresent(drcr ->
+						this.dateRangePicker.setValue(
+							new DateRangeModel<>(drcr.getStart(), drcr.getEnd(), dr)));
+			
+			if(dateRange != this.dateRangePicker.getDateRange() || !start.equals(this.dateRangePicker.getStart()))
+			{
+				invalidParameter = true;
+			}
+		}
+		
+		
+		if(invalidParameter)
+		{
+			Notification.show("Invalid parameter");
+		}
+			
+		this.blockUpdates = false;
+		
+		this.onConfigChanged();
+	}
+}
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerRangeExceedingDemo.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerRangeExceedingDemo.java
new file mode 100644
index 00000000..a7fa2d3f
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerRangeExceedingDemo.java
@@ -0,0 +1,30 @@
+package software.xdev.vaadin.daterange_picker.example;
+
+import com.vaadin.flow.component.HasSize;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.Route;
+
+
+@Route(DateRangePickerRangeExceedingDemo.NAV)
+public class DateRangePickerRangeExceedingDemo extends AbstractSimpleChangeDemo
+{
+	public static final String NAV = "rangeExceeding";
+	
+	public DateRangePickerRangeExceedingDemo()
+	{
+		this.dateRangePicker.withAllowRangeLimitExceeding(true);
+		this.initUI();
+	}
+	
+	protected void initUI()
+	{
+		this.taResult.setSizeFull();
+		
+		this.getContent().setPadding(false);
+		this.getContent().add(new VerticalLayout(this.dateRangePicker), new VerticalLayout(this.taResult));
+		this.getContent().getChildren().forEach(comp -> ((HasSize)comp).setHeight("50%"));
+		this.getContent().setHeightFull();
+		
+		this.registerDefaultValueChangeListener();
+	}
+}
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java
new file mode 100644
index 00000000..89ddae6d
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java
@@ -0,0 +1,63 @@
+package software.xdev.vaadin.daterange_picker.example;
+
+import com.vaadin.flow.component.HasSize;
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.dom.ThemeList;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.theme.lumo.Lumo;
+
+
+@Route(DateRangePickerStyledDemo.NAV)
+public class DateRangePickerStyledDemo extends AbstractSimpleChangeDemo
+{
+	public static final String NAV = "styled";
+	
+	private final Button btnDarkMode = new Button("Toogle theme");
+	
+	public DateRangePickerStyledDemo()
+	{
+		this.initUI();
+	}
+	
+	protected void initUI()
+	{
+		this.btnDarkMode.addClickListener(ev ->
+		{
+			final ThemeList themeList = UI.getCurrent().getElement().getThemeList();
+			
+			if(themeList.contains(Lumo.DARK))
+			{
+				themeList.remove(Lumo.DARK);
+			}
+			else
+			{
+				themeList.add(Lumo.DARK);
+			}
+			
+			this.updateBtnDarkMode();
+		});
+		
+		this.taResult.setSizeFull();
+		
+		this.getContent().setPadding(false);
+		this.getContent().add(
+			new VerticalLayout(this.dateRangePicker),
+			new VerticalLayout(this.taResult, this.btnDarkMode));
+		this.getContent().getChildren().forEach(comp -> ((HasSize)comp).setHeight("50%"));
+		this.getContent().setHeightFull();
+		
+		this.registerDefaultValueChangeListener();
+		
+		this.updateBtnDarkMode();
+	}
+	
+	protected void updateBtnDarkMode()
+	{
+		final boolean isDarkMode = UI.getCurrent().getElement().getThemeList().contains(Lumo.DARK);
+		this.btnDarkMode.setText(!isDarkMode ? "Enter the darkness" : "Turn the light on");
+		this.btnDarkMode.setIcon(!isDarkMode ? VaadinIcon.MOON_O.create() : VaadinIcon.SUN_O.create());
+	}
+}
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/customized/CustomDateRange.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/customized/CustomDateRange.java
new file mode 100644
index 00000000..9143b748
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/customized/CustomDateRange.java
@@ -0,0 +1,22 @@
+package software.xdev.vaadin.daterange_picker.example.customized;
+
+import software.xdev.vaadin.daterange_picker.business.AbstractDateRange;
+
+public class CustomDateRange extends AbstractDateRange<CustomDateRange>
+{
+	/**
+	 * Stores some data
+	 */
+	private String tag;
+	
+	public CustomDateRange withTag(final String tag)
+	{
+		this.tag = tag != null ? tag : "";
+		return this;
+	}
+	
+	public String getTag()
+	{
+		return this.tag;
+	}
+}
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/customized/CustomDateRanges.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/customized/CustomDateRanges.java
new file mode 100644
index 00000000..8630d437
--- /dev/null
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/customized/CustomDateRanges.java
@@ -0,0 +1,47 @@
+package software.xdev.vaadin.daterange_picker.example.customized;
+
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRanges;
+
+
+public final class CustomDateRanges
+{
+	private CustomDateRanges()
+	{
+	}
+	
+	// No Today-DateRange
+	
+	public static final CustomDateRange DAY = new CustomDateRange()
+		.from(SimpleDateRanges.DAY)
+		.withTag("has 24 hours");
+	
+	public static final CustomDateRange WEEK = new CustomDateRange()
+		.from(SimpleDateRanges.WEEK)
+		.withTag("has 7 days");
+	
+	public static final CustomDateRange MONTH = new CustomDateRange()
+		.from(SimpleDateRanges.MONTH)
+		.withTag("has 28-31 days");
+	
+	public static final CustomDateRange QUARTER = new CustomDateRange()
+		.from(SimpleDateRanges.QUARTER)
+		.withTag("has 3 months");
+	
+	public static final CustomDateRange HALF_YEAR = new CustomDateRange()
+		.from(SimpleDateRanges.HALF_YEAR)
+		.withTag("has 6 months");
+	
+	public static final CustomDateRange YEAR = new CustomDateRange()
+		.from(SimpleDateRanges.YEAR)
+		.withTag("has 12 months");
+	
+	// No Free-DateRange
+	
+	public static CustomDateRange[] allValues()
+	{
+		return new CustomDateRange[] {
+			DAY, WEEK, MONTH, QUARTER, HALF_YEAR, YEAR
+		};
+		
+	}
+}
diff --git a/template-placeholder-demo/src/main/resources/application.yml b/vaadin-date-range-picker-demo/src/main/resources/application.yml
similarity index 100%
rename from template-placeholder-demo/src/main/resources/application.yml
rename to vaadin-date-range-picker-demo/src/main/resources/application.yml
diff --git a/template-placeholder/pom.xml b/vaadin-date-range-picker/pom.xml
similarity index 95%
rename from template-placeholder/pom.xml
rename to vaadin-date-range-picker/pom.xml
index 840b1ea0..05270831 100644
--- a/template-placeholder/pom.xml
+++ b/vaadin-date-range-picker/pom.xml
@@ -5,20 +5,20 @@
 	<modelVersion>4.0.0</modelVersion>
 
 	<groupId>software.xdev</groupId>
-	<artifactId>template-placeholder</artifactId>
-	<version>1.0.0-SNAPSHOT</version>
+	<artifactId>vaadin-date-range-picker</artifactId>
+	<version>4.1.2-SNAPSHOT</version>
 	<packaging>jar</packaging>
 
-	<name>template-placeholder</name>
-	<description>template-placeholder</description>
-	<url>https://github.com/xdev-software/template-placeholder</url>
+	<name>vaadin-date-range-picker</name>
+	<description>vaadin-date-range-picker</description>
+	<url>https://github.com/xdev-software/vaadin-date-range-picker</url>
 
 	<scm>
-		<url>https://github.com/xdev-software/template-placeholder</url>
-		<connection>scm:git:https://github.com/xdev-software/template-placeholder.git</connection>
+		<url>https://github.com/xdev-software/vaadin-date-range-picker</url>
+		<connection>scm:git:https://github.com/xdev-software/vaadin-date-range-picker.git</connection>
 	</scm>
 
-	<inceptionYear>2022</inceptionYear>
+	<inceptionYear>2020</inceptionYear>
 
 	<organization>
 		<name>XDEV Software</name>
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/AbstractDateRange.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/AbstractDateRange.java
new file mode 100644
index 00000000..ca6c1ae0
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/AbstractDateRange.java
@@ -0,0 +1,192 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.business;
+
+import java.time.LocalDate;
+import java.time.Period;
+import java.util.Optional;
+import java.util.function.BiFunction;
+import java.util.function.Function;
+
+/**
+ * Basic implementation of {@link DateRange}
+ * @author AB
+ *
+ * @param <SELF> implementer
+ */
+@SuppressWarnings("java:S119")
+public abstract class AbstractDateRange<SELF extends AbstractDateRange<SELF>> implements DateRange
+{
+	private String key;
+	private Optional<Period> optMovePeriod = Optional.empty();
+	private String defaultDesc;
+	private Function<LocalDate, Optional<DateRangeResult>> calcForFunc;
+	private BiFunction<LocalDate, Integer, Optional<DateRangeResult>> moveFunc = (date, count) ->
+	{
+		if(this.optMovePeriod.isEmpty())
+		{
+			return Optional.empty();
+		}
+		
+		return this.calcForFunc.apply(count != 0 ? date.plus(this.optMovePeriod.get().multipliedBy(count)) : date);
+	};
+	private boolean movable = true;
+	private boolean calcable = true;
+	private boolean setable = true;
+		
+	@SuppressWarnings("unchecked")
+	public SELF self()
+	{
+		return (SELF)this;
+	}
+	
+	// -- CONFIGURE
+	public SELF withKey(final String key)
+	{
+		this.key = key;
+		return this.self();
+	}
+	
+	public SELF withMovePeriod(final Period period)
+	{
+		this.optMovePeriod = Optional.ofNullable(period);
+		return this.self();
+	}
+	
+	public SELF withDefaultDesc(final String defaultDesc)
+	{
+		this.defaultDesc = defaultDesc;
+		return this.self();
+	}
+	
+	public SELF withCalcForFunc(final Function<LocalDate, DateRangeResult> calcForFunc)
+	{
+		return this.withOptCalcForFunc(date -> Optional.ofNullable(calcForFunc.apply(date)));
+	}
+	
+	public SELF withOptCalcForFunc(final Function<LocalDate, Optional<DateRangeResult>> calcForFunc)
+	{
+		this.calcForFunc = calcForFunc;
+		return this.self();
+	}
+	
+	public SELF withMoveFunc(final BiFunction<LocalDate, Integer, Optional<DateRangeResult>> moveFunc)
+	{
+		this.moveFunc = moveFunc;
+		return this.self();
+	}
+	
+	public SELF withMovable(final boolean movable)
+	{
+		this.movable = movable;
+		return this.self();
+	}
+	
+	public SELF withCalcable(final boolean calcable)
+	{
+		this.calcable = calcable;
+		return this.self();
+	}
+	
+	public SELF withSettable(final boolean settable)
+	{
+		this.setable = settable;
+		return this.self();
+	}
+	
+	public SELF from(final AbstractDateRange<?> dateRange)
+	{
+		this.key = dateRange.getKey();
+		this.optMovePeriod = dateRange.getOptMovePeriod();
+		this.defaultDesc = dateRange.getDefaultDescription();
+		this.calcForFunc = dateRange.getCalcForFunc();
+		this.moveFunc = dateRange.getMoveFunc();
+		this.movable = dateRange.isMovable();
+		this.calcable = dateRange.isCalcable();
+		this.setable = dateRange.isSettable();
+		
+		return this.self();
+	}
+	
+	// -- GETTER
+	
+	@Override
+	public String getKey()
+	{
+		return this.key;
+	}
+	
+	@Override
+	public Optional<Period> getOptMovePeriod()
+	{
+		return this.optMovePeriod;
+	}
+	
+	@Override
+	public String getDefaultDescription()
+	{
+		return this.defaultDesc;
+	}
+	
+	@Override
+	public boolean isMovable()
+	{
+		return this.movable && this.isCalcable();
+	}
+	
+	@Override
+	public boolean isCalcable()
+	{
+		return this.calcable;
+	}
+	
+	@Override
+	public boolean isSettable()
+	{
+		return this.setable;
+	}
+
+	public Function<LocalDate, Optional<DateRangeResult>> getCalcForFunc()
+	{
+		return this.calcForFunc;
+	}
+
+	public BiFunction<LocalDate, Integer, Optional<DateRangeResult>> getMoveFunc()
+	{
+		return this.moveFunc;
+	}
+
+	@Override
+	public Optional<DateRangeResult> calcFor(final LocalDate date)
+	{
+		if(!this.isCalcable())
+		{
+			return Optional.empty();
+		}
+		return this.calcForFunc.apply(date);
+	}
+	
+	@Override
+	public Optional<DateRangeResult> moveDateRange(final LocalDate date, final int dif)
+	{
+		if(!this.isMovable())
+		{
+			return Optional.empty();
+		}
+		return this.moveFunc.apply(date, dif);
+	}
+		
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRange.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRange.java
new file mode 100644
index 00000000..750ed620
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRange.java
@@ -0,0 +1,92 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.business;
+
+import java.time.LocalDate;
+import java.time.Period;
+import java.util.Optional;
+
+public interface DateRange
+{
+	/**
+	 * Returns the identification key, e.g. DAY, MONTH, etc
+	 * @return identification key
+	 */
+	String getKey();
+	
+	/**
+	 * Returns the {@link Period} to move the date, if any
+	 * @return {@link Period} to move the date
+	 */
+	Optional<Period> getOptMovePeriod();
+	
+	/**
+	 * Retunns the default description, e.g. "Day" or "Half year"
+	 * @return default description
+	 */
+	String getDefaultDescription();
+	
+	/**
+	 *  Trys to return the calculated {@link DateRangeResult} for the supplied date
+	 * @param date date that is used for calculation
+	 * @return calculated {@link DateRangeResult}
+	 */
+	Optional<DateRangeResult> calcFor(LocalDate date);
+	
+	/**
+	 * Trys to return a moved {@link DateRangeResult}
+	 * @param baseDate Date that is used as a base
+	 * @param dif Count of moves
+	 * @return moved {@link DateRangeResult}
+	 */
+	Optional<DateRangeResult> moveDateRange(LocalDate baseDate, int dif);
+	
+	/**
+	 * Returns if the {@link DateRange} is movable<br>
+	 * Example:
+	 * <ul>
+	 * 	<li> <code>false</code> for TODAY</li>
+	 * 	<li> <code>true</code> for MONTH</li>
+	 * 	<li> <code>false</code> for FREE</li>
+	 * </ul>
+	 * @return if the {@link DateRange} is movable
+	 */
+	boolean isMovable();
+	
+	/**
+	 * Returns if the {@link DateRange} is calcable<br>
+	 * Example:
+	 * <ul>
+	 * 	<li> <code>true</code> for TODAY</li>
+	 * 	<li> <code>true</code> for MONTH</li>
+	 * 	<li> <code>false</code> for FREE</li>
+	 * </ul>
+	 * @return if the {@link DateRange} is calcable
+	 */
+	boolean isCalcable();
+	
+	/**
+	 * Returns if the {@link DateRange} is settable from a date<br>
+	 * Example:
+	 * <ul>
+	 * 	<li> <code>false</code> for TODAY</li>
+	 * 	<li> <code>true</code> for MONTH</li>
+	 * 	<li> <code>true</code> for FREE</li>
+	 * </ul>
+	 * @return if the {@link DateRange} is settable from a date
+	 */
+	boolean isSettable();
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeActions.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeActions.java
new file mode 100644
index 00000000..95e7d482
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeActions.java
@@ -0,0 +1,38 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.business;
+
+import java.time.LocalDate;
+
+/**
+ * Actions which can be done with a {@link DateRangeModel}
+ * 
+ * @author AB
+ *
+ * @param <D> DateRange
+ * @param <T> Implementer; returned as "Builder"
+ */
+public interface DateRangeActions<D extends DateRange, T>
+{
+	LocalDate getStart();
+	T setStart(final LocalDate start);
+	
+	LocalDate getEnd();
+	T setEnd(final LocalDate end);
+	
+	D getDateRange();
+	T setDateRange(final D dateRange);
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeModel.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeModel.java
new file mode 100644
index 00000000..1fc51241
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeModel.java
@@ -0,0 +1,103 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.business;
+
+import java.time.LocalDate;
+import java.util.Objects;
+
+import software.xdev.vaadin.daterange_picker.ui.DateRangePicker;
+
+/**
+ * Model for {@link DateRangePicker}
+ * 
+ * @author AB
+ *
+ */
+public class DateRangeModel<D extends DateRange> implements DateRangeActions<D, DateRangeModel<D>>
+{
+	private LocalDate start;
+	private LocalDate end;
+	private D dateRange;
+	
+	public DateRangeModel(final LocalDate start, final LocalDate end, final D dateRange)
+	{
+		super();
+		this.start = start;
+		this.end = end;
+		this.dateRange = dateRange;
+	}
+
+	@Override
+	public LocalDate getStart()
+	{
+		return this.start;
+	}
+	
+	@Override
+	public DateRangeModel<D> setStart(final LocalDate start)
+	{
+		this.start = start;
+		return this;
+	}
+	
+	@Override
+	public LocalDate getEnd()
+	{
+		return this.end;
+	}
+	
+	@Override
+	public DateRangeModel<D> setEnd(final LocalDate end)
+	{
+		this.end = end;
+		return this;
+	}
+	
+	@Override
+	public D getDateRange()
+	{
+		return this.dateRange;
+	}
+	
+	@Override
+	public DateRangeModel<D> setDateRange(final D dateRange)
+	{
+		this.dateRange = dateRange;
+		return this;
+	}
+	
+	@Override
+	public boolean equals(final Object o)
+	{
+		if(this == o)
+		{
+			return true;
+		}
+		if(!(o instanceof final DateRangeModel<?> that))
+		{
+			return false;
+		}
+		return Objects.equals(this.getStart(), that.getStart())
+			&& Objects.equals(this.getEnd(), that.getEnd())
+			&& Objects.equals(this.getDateRange(), that.getDateRange());
+	}
+	
+	@Override
+	public int hashCode()
+	{
+		return Objects.hash(this.getStart(), this.getEnd(), this.getDateRange());
+	}
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeResult.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeResult.java
new file mode 100644
index 00000000..3a0c7e75
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/DateRangeResult.java
@@ -0,0 +1,29 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.business;
+
+import java.time.LocalDate;
+
+/**
+ * Result of a {@link DateRange} calculation
+ * @author AB
+ *
+ */
+public interface DateRangeResult
+{
+	LocalDate getStart();
+	LocalDate getEnd();
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRange.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRange.java
new file mode 100644
index 00000000..ed9a77b5
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRange.java
@@ -0,0 +1,27 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.business;
+
+/**
+ * Simple implementation if {@link AbstractDateRange}
+ * 
+ * @author AB
+ *
+ */
+public class SimpleDateRange extends AbstractDateRange<SimpleDateRange>
+{
+	// Simple impl
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRangeResult.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRangeResult.java
new file mode 100644
index 00000000..3c20db4d
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRangeResult.java
@@ -0,0 +1,49 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.business;
+
+import java.time.LocalDate;
+
+/**
+ * Simple implementation of {@link DateRangeResult}
+ * 
+ * @author AB
+ *
+ */
+public class SimpleDateRangeResult implements DateRangeResult
+{
+	private final LocalDate start;
+	private final LocalDate end;
+	
+	public SimpleDateRangeResult(final LocalDate start, final LocalDate end)
+	{
+		super();
+		this.start = start;
+		this.end = end;
+	}
+
+	@Override
+	public LocalDate getStart()
+	{
+		return this.start;
+	}
+
+	@Override
+	public LocalDate getEnd()
+	{
+		return this.end;
+	}
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRanges.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRanges.java
new file mode 100644
index 00000000..e7e17648
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/business/SimpleDateRanges.java
@@ -0,0 +1,116 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.business;
+
+import java.time.DayOfWeek;
+import java.time.LocalDate;
+import java.time.Period;
+import java.time.temporal.TemporalAdjusters;
+
+/**
+ * Contains predefined {@link SimpleDateRange SimpleDateRanges}
+ * 
+ * @author AB
+ *
+ */
+@SuppressWarnings("checkstyle:MagicNumber")
+public final class SimpleDateRanges
+{
+	private SimpleDateRanges()
+	{
+		// No Impls
+	}
+	
+	public static final SimpleDateRange TODAY = new SimpleDateRange()
+		.withKey("TODAY")
+		.withDefaultDesc("Today")
+		.withMovable(false)
+		.withSettable(false)
+		.withCalcForFunc(date -> new SimpleDateRangeResult(LocalDate.now(), LocalDate.now()));
+	
+	public static final SimpleDateRange DAY = new SimpleDateRange()
+		.withKey("DAY")
+		.withDefaultDesc("Day")
+		.withMovePeriod(Period.ofDays(1))
+		.withCalcForFunc(date -> new SimpleDateRangeResult(date, date));
+	
+	public static final SimpleDateRange WEEK = new SimpleDateRange()
+		.withKey("WEEK")
+		.withDefaultDesc("Week")
+		.withMovePeriod(Period.ofWeeks(1))
+		.withCalcForFunc(date -> {
+			final LocalDate start = date.with(TemporalAdjusters.previousOrSame(DayOfWeek.MONDAY));
+			return new SimpleDateRangeResult(start, start.plusDays(6));
+		});
+	
+	public static final SimpleDateRange MONTH = new SimpleDateRange()
+		.withKey("MONTH")
+		.withDefaultDesc("Month")
+		.withMovePeriod(Period.ofMonths(1))
+		.withCalcForFunc(date ->
+			new SimpleDateRangeResult(
+				date.with(TemporalAdjusters.firstDayOfMonth()),
+				date.with(TemporalAdjusters.lastDayOfMonth())));
+	
+	public static final SimpleDateRange QUARTER = new SimpleDateRange()
+		.withKey("QUARTER")
+		.withDefaultDesc("Quarter")
+		.withMovePeriod(Period.ofMonths(3))
+		.withCalcForFunc(date -> {
+			final int startMonth = (int)Math.floor((date.getMonthValue() - 1) / 3.0) * 3 + 1;
+			final int endMonth = startMonth + 2;
+			
+			return new SimpleDateRangeResult(
+				LocalDate.of(date.getYear(), startMonth, 1),
+				LocalDate.of(date.getYear(), endMonth, 1).with(TemporalAdjusters.lastDayOfMonth()));
+		});
+	
+	public static final SimpleDateRange HALF_YEAR = new SimpleDateRange()
+		.withKey("HALF_YEAR")
+		.withDefaultDesc("Half year")
+		.withMovePeriod(Period.ofMonths(6))
+		.withCalcForFunc(date -> {
+			final int startMonth = (int)Math.floor((date.getMonthValue() - 1) / 6.0) * 6 + 1;
+			final int endMonth = startMonth + 5;
+			
+			return new SimpleDateRangeResult(
+				LocalDate.of(date.getYear(), startMonth, 1),
+				LocalDate.of(date.getYear(), endMonth, 1).with(TemporalAdjusters.lastDayOfMonth()));
+		});
+	
+	public static final SimpleDateRange YEAR = new SimpleDateRange()
+		.withKey("YEAR")
+		.withDefaultDesc("Years")
+		.withMovePeriod(Period.ofYears(1))
+		.withCalcForFunc(date ->
+			new SimpleDateRangeResult(
+				date.with(TemporalAdjusters.firstDayOfYear()),
+				date.with(TemporalAdjusters.lastDayOfYear())));
+	
+	public static final SimpleDateRange FREE = new SimpleDateRange()
+		.withKey("FREE")
+		.withDefaultDesc("Free")
+		.withMovable(false)
+		.withCalcable(false);
+	
+	public static SimpleDateRange[] allValues()
+	{
+		return new SimpleDateRange[] {
+			TODAY, DAY, WEEK, MONTH, QUARTER, HALF_YEAR, YEAR, FREE
+		};
+		
+	}
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java
new file mode 100644
index 00000000..c2832d63
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java
@@ -0,0 +1,616 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.ui;
+
+import java.time.LocalDate;
+import java.time.format.DateTimeFormatter;
+import java.time.format.FormatStyle;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.Locale;
+import java.util.Objects;
+import java.util.Optional;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.function.Supplier;
+
+import com.vaadin.flow.component.AttachEvent;
+import com.vaadin.flow.component.ClientCallable;
+import com.vaadin.flow.component.ComponentEventListener;
+import com.vaadin.flow.component.ComponentUtil;
+import com.vaadin.flow.component.Composite;
+import com.vaadin.flow.component.HasValue;
+import com.vaadin.flow.component.ItemLabelGenerator;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.orderedlayout.FlexComponent;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.data.binder.HasItems;
+import com.vaadin.flow.server.VaadinService;
+import com.vaadin.flow.shared.Registration;
+
+import software.xdev.vaadin.daterange_picker.business.DateRange;
+import software.xdev.vaadin.daterange_picker.business.DateRangeActions;
+import software.xdev.vaadin.daterange_picker.business.DateRangeModel;
+
+
+/**
+ * Represents a Date-Range-Picker
+ * 
+ * @author AB
+ *
+ */
+@SuppressWarnings("PMD.GodClass")
+@CssImport(DateRangePickerStyles.LOCATION)
+public class DateRangePicker<D extends DateRange> extends Composite<VerticalLayout> implements
+	FlexComponent,
+	HasItems<D>,
+	DateRangeActions<D, DateRangePicker<D>>,
+	HasValue<DateRangeValueChangeEvent<D>, DateRangeModel<D>>
+{
+	public static final Locale DEFAULT_LOCALE = Locale.US;
+	protected static AtomicInteger nextID = new AtomicInteger(0);
+	
+	/*
+	 * Fields
+	 */
+	protected boolean expanded;
+	protected DateRangeModel<D> model;
+	
+	/*
+	 * Config
+	 */
+	protected boolean useClientSideLocale = true;
+	protected Optional<Locale> formatLocale = Optional.empty();
+	protected ItemLabelGenerator<D> dateRangeLocalizerFunction = DateRange::getDefaultDescription;
+	protected Optional<DatePickerI18n> datePickerI18n = Optional.empty();
+	protected boolean closeOnOutsideClick = true;
+	protected boolean allowRangeLimitExceeding = true;
+	
+	/*
+	 * UI-Components
+	 */
+	protected final Button btnOverview = new Button();
+	
+	protected final Div overlayContainer = new Div();
+	protected final DateRangePickerOverlay<D> overlay = new DateRangePickerOverlay<>(this);
+	
+	public DateRangePicker(final DateRangeModel<D> initialModel)
+	{
+		this(initialModel, new ArrayList<>());
+	}
+	
+	public DateRangePicker(final DateRangeModel<D> initialModel, final D[] items)
+	{
+		this(initialModel, new ArrayList<>(Arrays.asList(items)));
+	}
+	
+	public DateRangePicker(final DateRangeModel<D> initialModel, final Collection<D> items)
+	{
+		this.model = Objects.requireNonNull(initialModel);
+		this.overlay.setItems(items);
+		
+		this.initUI();
+		this.registerListeners();
+	}
+	
+	public DateRangePicker(final Supplier<DateRangeModel<D>> initialModelSupplier)
+	{
+		this(initialModelSupplier.get());
+	}
+	
+	public DateRangePicker(final Supplier<DateRangeModel<D>> initialModelSupplier, final D[] items)
+	{
+		this(initialModelSupplier.get(), items);
+	}
+	
+	public DateRangePicker(final Supplier<DateRangeModel<D>> initialModelSupplier, final Collection<D> items)
+	{
+		this(initialModelSupplier.get(), items);
+	}
+	
+	// region Initializers
+	
+	public DateRangePicker<D> withCloseOnOutsideClick(final boolean closeOnOutsideClick)
+	{
+		this.closeOnOutsideClick = closeOnOutsideClick;
+		return this;
+	}
+	
+	public boolean isCloseOnOutsideClick()
+	{
+		return this.closeOnOutsideClick;
+	}
+	
+	public DateRangePicker<D> withDatePickerI18n(final DatePickerI18n datePickerI18n)
+	{
+		this.datePickerI18n = Optional.ofNullable(datePickerI18n);
+		return this;
+	}
+	
+	public Optional<DatePickerI18n> getDatePickerI18n()
+	{
+		return this.datePickerI18n;
+	}
+	
+	/**
+	 * Sets the locale used for formatting the "expand" button.
+	 * <p>If the locale is <code>null</code> (default) the clientside locale will be used or {@link Locale#US} if none
+	 * could be detected.
+	 * </p>
+	 */
+	public DateRangePicker<D> withFormatLocale(final Locale locale)
+	{
+		this.useClientSideLocale = locale == null;
+		this.formatLocale = Optional.ofNullable(locale);
+		return this;
+	}
+	
+	public Locale getFormatLocale()
+	{
+		return this.formatLocale.orElse(DEFAULT_LOCALE);
+	}
+	
+	public DateRangePicker<D> withDateRangeLocalizerFunction(final ItemLabelGenerator<D> dateRangeLocalizerFunction)
+	{
+		this.dateRangeLocalizerFunction = dateRangeLocalizerFunction;
+		return this;
+	}
+	
+	public ItemLabelGenerator<D> getDateRangeLocalizerFunction()
+	{
+		return this.dateRangeLocalizerFunction;
+	}
+	
+	/**
+	 * Shortcut for {@link DateRangePicker#setStartLabel(String)}
+	 */
+	public DateRangePicker<D> withStartLabel(final String label)
+	{
+		this.setStartLabel(label);
+		return this;
+	}
+	
+	/**
+	 * Shortcut for {@link DateRangePicker#setEndLabel(String)}
+	 */
+	public DateRangePicker<D> withEndLabel(final String label)
+	{
+		this.setEndLabel(label);
+		return this;
+	}
+	
+	/**
+	 * Shortcut for {@link DateRangePicker#setDateRangeOptionsLabel(String)}
+	 */
+	public DateRangePicker<D> withDateRangeOptionsLabel(final String label)
+	{
+		this.setDateRangeOptionsLabel(label);
+		return this;
+	}
+	
+	/**
+	 * Shortcut for {@link DateRangePicker#setAllowRangeLimitExceeding(boolean)}
+	 */
+	public DateRangePicker<D> withAllowRangeLimitExceeding(final boolean allowRangeLimitExceeding)
+	{
+		this.setAllowRangeLimitExceeding(allowRangeLimitExceeding);
+		return this;
+	}
+	
+	// endregion
+	
+	protected void initUI()
+	{
+		// Set an unique ID for each element
+		this.setId("DateRangePickerID" + nextID.incrementAndGet());
+		
+		this.btnOverview.addClassNames(DateRangePickerStyles.BUTTON, DateRangePickerStyles.CLICKABLE);
+		this.btnOverview.setMinWidth("20em");
+		this.btnOverview.setWidthFull();
+		
+		this.btnOverview.setDisableOnClick(true);
+		
+		this.overlay.addClassName(DateRangePickerStyles.OVERLAY_LAYOUT);
+		
+		this.overlay.setWidthFull();
+		this.overlay.setHeight("auto");
+		
+		this.overlayContainer.setWidthFull();
+		this.overlayContainer.addClassName(DateRangePickerStyles.OVERLAY_BASE);
+		this.overlayContainer.add(this.overlay);
+		
+		this.getContent().setSpacing(false);
+		this.getContent().setPadding(false);
+		this.setSizeUndefined();
+		this.add(this.btnOverview, this.overlayContainer);
+		
+		this.setExpanded(false);
+	}
+	
+	protected void registerListeners()
+	{
+		this.btnOverview.addClickListener(ev ->
+		{
+			this.toggle();
+			ev.getSource().setEnabled(true);
+		});
+		this.overlay.addValueChangeListener(ev ->
+		{
+			this.model = ev.getSource().getModel();
+			
+			this.updateFromModel(false);
+			this.fireEvent(new DateRangeValueChangeEvent<>(this, ev.getOldValue(), ev.isFromClient()));
+		});
+	}
+	
+	@Override
+	protected void onAttach(final AttachEvent attachEvent)
+	{
+		this.setLocaleFromClient();
+		
+		this.updateFromModel(true);
+		
+		this.addClickOutsideListener();
+	}
+	
+	protected void setLocaleFromClient()
+	{
+		if(this.useClientSideLocale)
+		{
+			this.formatLocale = Optional.ofNullable(VaadinService.getCurrentRequest().getLocale());
+		}
+	}
+	
+	protected void addClickOutsideListener()
+	{
+		if(!this.isCloseOnOutsideClick())
+		{
+			return;
+		}
+		
+		final String funcName = "outsideClickFunc" + this.getId().orElseThrow();
+		
+		final String jsCommand = String.join(
+			"\r\n",
+			// Define Click-Function
+			"var " + funcName + " = function(event) {",
+			// Get the current Element
+			"  var spEl = document.getElementById('" + this.getId().orElseThrow() + "');",
+			"  if (!spEl) {",
+			// If the element got detached/removed, then als delete the listener of the base element
+			"    document.removeEventListener('click'," + funcName + ");",
+			"    return;",
+			"  }",
+			// Check if a Vaadin overlay caused the click
+			"  let parent = event.target;",
+			// Check all parents of clicked element
+			"  while(parent) {",
+			// Check if a vaadin overlay was clicked:
+			// Fist check if the tagName indicates a Vaadin overlay
+			// If not fallback to id='overlay'
+			"    let tagName = parent.tagName.toLowerCase();",
+			"    if((tagName.includes('vaadin') && tagName.includes('overlay')) || parent.id == 'overlay') {",
+			"      return;",
+			"    }",
+			"    parent = parent.parentElement;",
+			"  }",
+			// Check if the click was done on this element
+			"  var isClickInside = spEl.contains(event.target);",
+			"  if (!isClickInside) {",
+			"    spEl.$server.clickOutsideOccurred();",
+			"  }",
+			"}; ",
+			"document.body.addEventListener('click'," + funcName + ");"
+		);
+		
+		this.getContent().getElement().executeJs(jsCommand);
+	}
+	
+	@ClientCallable
+	protected void clickOutsideOccurred()
+	{
+		if(!this.isCloseOnOutsideClick())
+		{
+			return;
+		}
+		
+		if(this.isExpanded())
+		{
+			this.setExpanded(false);
+		}
+	}
+	
+	protected void updateFromModel(final boolean updateOverlay)
+	{
+		if(updateOverlay)
+		{
+			this.tryFixInvalidModel();
+		}
+		
+		final DateTimeFormatter formatter =
+			DateTimeFormatter.ofLocalizedDate(FormatStyle.SHORT).withLocale(this.getFormatLocale());
+		
+		this.btnOverview.setText(this.model.getStart().format(formatter)
+			+ (this.model.getStart().equals(this.model.getEnd()) ? "" : " - " + this.model.getEnd().format(formatter))
+		);
+		
+		if(updateOverlay)
+		{
+			this.overlay.setModel(this.model);
+		}
+	}
+	
+	protected void tryFixInvalidModel()
+	{
+		this.model.getDateRange()
+			.calcFor(this.model.getStart())
+			.ifPresent(result -> {
+				this.model.setStart(result.getStart());
+				this.model.setEnd(result.getEnd());
+			});
+	}
+	
+	protected void toggle()
+	{
+		this.setExpanded(!this.isExpanded());
+	}
+	
+	protected synchronized void setExpanded(final boolean expanded)
+	{
+		this.expanded = expanded;
+		this.btnOverview.setIcon(expanded ? VaadinIcon.CARET_DOWN.create() : VaadinIcon.CARET_UP.create());
+		
+		this.overlay.setVisible(expanded);
+	}
+	
+	public synchronized boolean isExpanded()
+	{
+		return this.expanded;
+	}
+	
+	// region Get UI elements
+	
+	public DateRangePickerOverlay<D> getOverlay()
+	{
+		return this.overlay;
+	}
+	
+	public Button getBtnOverview()
+	{
+		return this.btnOverview;
+	}
+	
+	public Div getOverlayContainer()
+	{
+		return this.overlayContainer;
+	}
+	
+	// endregion
+	
+	// region Labels
+	
+	/**
+	 * Sets the label for the overlay Start-DatePicker
+	 */
+	public void setStartLabel(final String label)
+	{
+		Objects.requireNonNull(label);
+		this.getOverlay().getDpStart().setLabel(label);
+	}
+	
+	/**
+	 * Sets the label for the overlay End-DatePicker
+	 */
+	public void setEndLabel(final String label)
+	{
+		Objects.requireNonNull(label);
+		this.getOverlay().getDpEnd().setLabel(label);
+	}
+	
+	/**
+	 * Sets the label for the overlay DateRange-ComboBox
+	 */
+	public void setDateRangeOptionsLabel(final String label)
+	{
+		Objects.requireNonNull(label);
+		this.getOverlay().getCbDateRange().setLabel(label);
+	}
+	
+	// endregion
+	
+	// region AllowRangeLimitExceeding
+	
+	/**
+	 * Allows the maximum start and end date to be greater or less than the configured end or start date.
+	 * <p/>
+	 * This is only the case when {@link DateRange#isCalcable()} is <code>true</code>. Otherwise incorrect values (e.g.
+	 * start before end) could be set.
+	 */
+	public void setAllowRangeLimitExceeding(final boolean allowRangeLimitExceeding)
+	{
+		this.allowRangeLimitExceeding = allowRangeLimitExceeding;
+	}
+	
+	public boolean isAllowRangeLimitExceeding()
+	{
+		return this.allowRangeLimitExceeding;
+	}
+	
+	// endregion
+	
+	// region Data
+	
+	/**
+	 * Uses the given {@link DateRange} and calculates with the current Date the {@link DateRangeModel}, which is then
+	 * set by {@link DateRangePicker#setValue(DateRangeModel)}
+	 */
+	public void setDateRangeForToday(final D range)
+	{
+		range.calcFor(LocalDate.now()).ifPresent(
+			result -> this.setValue(new DateRangeModel<>(result.getStart(), result.getEnd(), range)));
+	}
+	
+	@Override
+	public void setItems(final Collection<D> items)
+	{
+		this.overlay.setItems(items);
+	}
+	
+	@Override
+	public LocalDate getStart()
+	{
+		return this.model.getStart();
+	}
+	
+	@Override
+	public DateRangePicker<D> setStart(final LocalDate start)
+	{
+		this.model.setStart(start);
+		this.updateFromModel(true);
+		return this;
+	}
+	
+	@Override
+	public LocalDate getEnd()
+	{
+		return this.model.getEnd();
+	}
+	
+	@Override
+	public DateRangePicker<D> setEnd(final LocalDate end)
+	{
+		this.model.setEnd(end);
+		this.updateFromModel(true);
+		return this;
+	}
+	
+	@Override
+	public D getDateRange()
+	{
+		return this.model.getDateRange();
+	}
+	
+	@Override
+	public DateRangePicker<D> setDateRange(final D dateRange)
+	{
+		this.model.setDateRange(dateRange);
+		this.updateFromModel(true);
+		return this;
+	}
+	
+	@Override
+	public void setValue(final DateRangeModel<D> value)
+	{
+		Objects.requireNonNull(value);
+		
+		this.model = value;
+		this.updateFromModel(true);
+	}
+	
+	@Override
+	public DateRangeModel<D> getValue()
+	{
+		return this.model;
+	}
+	
+	@SuppressWarnings("unchecked")
+	@Override
+	public Registration addValueChangeListener(final ValueChangeListener<? super DateRangeValueChangeEvent<D>> listener)
+	{
+		@SuppressWarnings("rawtypes")
+		final ComponentEventListener componentListener =
+			event -> listener.valueChanged((DateRangeValueChangeEvent<D>)event);
+		
+		return ComponentUtil.addListener(this, DateRangeValueChangeEvent.class, componentListener);
+	}
+	
+	/**
+	 * DateRangePicker always has a value<br>
+	 * However for compatibility reasons (with Vaadin) this returns {@code null}
+	 * @return {@code null}
+	 */
+	@Override
+	public DateRangeModel<D> getEmptyValue()
+	{
+		return null;
+	}
+	
+	/**
+	 * DateRangePicker always has a value<br>
+	 * Therefore this always returns {@code false}
+	 * 
+	 * @return {@code false}
+	 */
+	@Override
+	public boolean isEmpty()
+	{
+		return false;
+	}
+	
+	/**
+	 * Do not use this method, as it throws a {@link UnsupportedOperationException}<br>
+	 * The calling of clear is not supported because DateRangePicker always has a value<br>
+	 * Use {@link DateRangePicker#setValue(DateRangeModel)} instead.
+	 *
+	 * @throws UnsupportedOperationException DateRangePicker always has a value
+	 */
+	@Override
+	public void clear()
+	{
+		throw new UnsupportedOperationException(
+			"The calling of clear is not supported because DateRangePicker always has a value");
+	}
+	
+	@Override
+	public void setReadOnly(final boolean readOnly)
+	{
+		this.getOverlay().setReadOnly(readOnly);
+	}
+	
+	@Override
+	public boolean isReadOnly()
+	{
+		return this.getOverlay().isReadOnly();
+	}
+	
+	/**
+	 * The required indicator is not implemented<br>
+	 * <br>
+	 * This method doesn't have any functionallity
+	 */
+	@Override
+	public void setRequiredIndicatorVisible(final boolean requiredIndicatorVisible)
+	{
+		// Not required/implemented
+	}
+	
+	/**
+	 * The required indicator is not implemented<br> This will always return {@code false}
+	 *
+	 * @return {@code false}
+	 */
+	@Override
+	public boolean isRequiredIndicatorVisible()
+	{
+		return false;
+	}
+	
+	// endregion
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerOverlay.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerOverlay.java
new file mode 100644
index 00000000..0b6c5106
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerOverlay.java
@@ -0,0 +1,340 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.ui;
+
+import java.time.LocalDate;
+import java.util.Collection;
+import java.util.Objects;
+import java.util.Optional;
+import java.util.function.Function;
+
+import com.vaadin.flow.component.AbstractField.ComponentValueChangeEvent;
+import com.vaadin.flow.component.AttachEvent;
+import com.vaadin.flow.component.ComponentEvent;
+import com.vaadin.flow.component.ComponentEventListener;
+import com.vaadin.flow.component.Composite;
+import com.vaadin.flow.component.HasStyle;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.combobox.ComboBox;
+import com.vaadin.flow.component.datepicker.DatePicker;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.orderedlayout.FlexComponent;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.data.binder.HasItems;
+import com.vaadin.flow.shared.Registration;
+
+import software.xdev.vaadin.daterange_picker.business.DateRange;
+import software.xdev.vaadin.daterange_picker.business.DateRangeModel;
+import software.xdev.vaadin.daterange_picker.business.DateRangeResult;
+
+
+/**
+ * Overlay of the expanded {@link DateRangePicker}
+ * 
+ * @author AB
+ *
+ */
+@CssImport(DateRangePickerStyles.LOCATION)
+public class DateRangePickerOverlay<D extends DateRange> extends Composite<VerticalLayout> implements
+	HasItems<D>,
+	FlexComponent
+{
+	/*
+	 * Fields
+	 */
+	protected boolean readOnly = false;
+	
+	protected DateRangePicker<D> dateRangePicker;
+	protected DateRangeModel<D> currentModel;
+	
+	/*
+	 * UI-Comp
+	 */
+	protected final Button btnBackwardRange = new Button(VaadinIcon.ANGLE_LEFT.create());
+	protected ComboBox<D> cbDateRange = new ComboBox<>("Period");
+	protected final Button btnForwardRange = new Button(VaadinIcon.ANGLE_RIGHT.create());
+	
+	protected DatePicker dpStart = new DatePicker("Start");
+	protected DatePicker dpEnd = new DatePicker("End");
+	
+	public DateRangePickerOverlay(final DateRangePicker<D> dateRangePicker)
+	{
+		this.dateRangePicker = Objects.requireNonNull(dateRangePicker);
+		this.currentModel = this.dateRangePicker.getValue();
+		
+		this.initUI();
+		this.registerListeners();
+	}
+	
+	protected void initUI()
+	{
+		this.btnBackwardRange
+			.addClassNames(DateRangePickerStyles.FLEX_CHILD_CONTENTSIZE, DateRangePickerStyles.CLICKABLE);
+		
+		this.cbDateRange.addClassName(DateRangePickerStyles.FLEX_CHILD_AUTOGROW);
+		this.setTextFieldDefaultWidthFlexConform(this.cbDateRange);
+		
+		this.btnForwardRange
+			.addClassNames(DateRangePickerStyles.FLEX_CHILD_CONTENTSIZE, DateRangePickerStyles.CLICKABLE);
+		
+		final HorizontalLayout hlRange = new HorizontalLayout();
+		hlRange.addClassNames(DateRangePickerStyles.FLEX_CHILD_AUTOGROW, DateRangePickerStyles.FLEX_CONTAINER);
+		hlRange.setAlignItems(Alignment.BASELINE);
+		hlRange.setJustifyContentMode(JustifyContentMode.BETWEEN);
+		hlRange.setMargin(false);
+		hlRange.setSpacing(true);
+		hlRange.setPadding(false);
+		hlRange.add(this.btnBackwardRange, this.cbDateRange, this.btnForwardRange);
+		
+		this.initDatePicker(this.dpStart);
+		this.initDatePicker(this.dpEnd);
+		
+		final HorizontalLayout hlDatepickers = new HorizontalLayout();
+		hlDatepickers.addClassNames(DateRangePickerStyles.FLEX_CHILD_AUTOGROW, DateRangePickerStyles.FLEX_CONTAINER);
+		hlDatepickers.setMargin(false);
+		hlDatepickers.setSpacing(true);
+		hlDatepickers.setPadding(false);
+		hlDatepickers.add(this.dpStart, this.dpEnd);
+		
+		this.addClassName(DateRangePickerStyles.FLEX_CONTAINER);
+		this.add(hlRange, hlDatepickers);
+		this.getContent().setPadding(true);
+	}
+	
+	protected void initDatePicker(final DatePicker dp)
+	{
+		this.setTextFieldDefaultWidthFlexConform(dp);
+		dp.addClassName(DateRangePickerStyles.FLEX_CHILD_AUTOGROW);
+		dp.setWeekNumbersVisible(true);
+	}
+	
+	@Override
+	protected void onAttach(final AttachEvent attachEvent)
+	{
+		this.cbDateRange.setItemLabelGenerator(this.dateRangePicker.getDateRangeLocalizerFunction());
+		
+		this.dateRangePicker.getDatePickerI18n()
+			.ifPresent(i18n ->
+			{
+				this.dpStart.setI18n(i18n);
+				this.dpEnd.setI18n(i18n);
+			});
+	}
+	
+	protected void setTextFieldDefaultWidthFlexConform(final HasStyle component)
+	{
+		component.getStyle().set("--vaadin-field-default-width", "auto");
+	}
+	
+	protected void registerListeners()
+	{
+		this.cbDateRange.addValueChangeListener(this::onComboBoxDateRangeValueChanged);
+		this.btnBackwardRange.addClickListener(ev -> this.moveRange(-1));
+		this.btnForwardRange.addClickListener(ev -> this.moveRange(+1));
+		this.dpStart.addValueChangeListener(this::onDatePickerValueChanged);
+		this.dpEnd.addValueChangeListener(this::onDatePickerValueChanged);
+	}
+	
+	protected void onComboBoxDateRangeValueChanged(final ComponentValueChangeEvent<ComboBox<D>, D> ev)
+	{
+		if(!ev.isFromClient())
+		{
+			return;
+		}
+		this.onValueChange(model -> model.getDateRange().calcFor(model.getStart()));
+	}
+	
+	protected void onDatePickerValueChanged(final ComponentValueChangeEvent<DatePicker, LocalDate> ev)
+	{
+		if(!ev.isFromClient())
+		{
+			return;
+		}
+		this.onValueChange(model -> model.getDateRange().calcFor(ev.getValue()));
+	}
+	
+	protected void moveRange(final int dif)
+	{
+		this.onValueChange(model -> model.getDateRange().moveDateRange(model.getStart(), dif));
+	}
+	
+	protected void calcModel(final Optional<DateRangeResult> optResult, final DateRangeModel<D> model)
+	{
+		if(optResult.isEmpty())
+		{
+			return;
+		}
+		
+		final DateRangeResult result = optResult.get();
+		model.setStart(result.getStart());
+		model.setEnd(result.getEnd());
+	}
+	
+	protected void onValueChange(final Function<DateRangeModel<D>, Optional<DateRangeResult>> calcFunc)
+	{
+		final DateRangeModel<D> model = this.getModelFromComponents();
+		
+		this.calcModel(calcFunc.apply(model), model);
+		this.updateComponentsFromModel(model);
+		
+		final DateRangeModel<D> oldValue = this.currentModel;
+		this.setCurrentModel(model);
+		
+		this.fireValueChanged(oldValue, true);
+	}
+	
+	protected DateRangeModel<D> getModelFromComponents()
+	{
+		return new DateRangeModel<>(this.dpStart.getValue(), this.dpEnd.getValue(), this.cbDateRange.getValue());
+	}
+	
+	protected void updateComponentsFromModel(final DateRangeModel<D> model)
+	{
+		final boolean datepickerReadonly = !model.getDateRange().isSettable();
+		this.dpStart.setReadOnly(datepickerReadonly);
+		this.dpEnd.setReadOnly(datepickerReadonly);
+		
+		final boolean fastNavEnabled = model.getDateRange().isMovable();
+		this.btnBackwardRange.setEnabled(fastNavEnabled);
+		this.btnForwardRange.setEnabled(fastNavEnabled);
+		
+		final boolean allowRangeLimitExceeding =
+			this.dateRangePicker.isAllowRangeLimitExceeding()
+				// If it's not calcable we can't verify that the set value is correct (e.g. when it's a free value)
+				&& model.getDateRange().isCalcable();
+		this.dpEnd.setMin(allowRangeLimitExceeding ? null : model.getStart());
+		this.dpStart.setMax(allowRangeLimitExceeding ? null : model.getEnd());
+		
+		this.cbDateRange.setValue(model.getDateRange());
+		this.dpStart.setValue(model.getStart());
+		this.dpEnd.setValue(model.getEnd());
+	}
+	
+	protected void setCurrentModel(final DateRangeModel<D> model)
+	{
+		this.currentModel = model;
+	}
+	
+	protected void fireValueChanged(final DateRangeModel<D> oldValue, final boolean isFromClient)
+	{
+		this.fireEvent(new DateRangeOverlayValueChangeEvent(this, oldValue, isFromClient));
+	}
+	
+	@Override
+	public void setItems(final Collection<D> items)
+	{
+		Objects.requireNonNull(items);
+		
+		this.getCbDateRange().setItems(items);
+	}
+	
+	// region UI Getter
+	public ComboBox<D> getCbDateRange()
+	{
+		return this.cbDateRange;
+	}
+	
+	public DatePicker getDpStart()
+	{
+		return this.dpStart;
+	}
+	
+	public DatePicker getDpEnd()
+	{
+		return this.dpEnd;
+	}
+	
+	// endregion
+	
+	// region Manage Data externally
+	public DateRangeModel<D> getModel()
+	{
+		return this.currentModel;
+	}
+	
+	public void setModel(final DateRangeModel<D> model)
+	{
+		final DateRangeModel<D> oldValue = this.currentModel;
+		
+		this.currentModel = model;
+		this.updateComponentsFromModel(this.currentModel);
+		
+		this.fireValueChanged(oldValue, false);
+	}
+	
+	public void setReadOnly(final boolean readOnly)
+	{
+		this.readOnly = readOnly;
+		
+		this.cbDateRange.setReadOnly(readOnly);
+		
+		this.btnBackwardRange.setEnabled(!readOnly);
+		this.btnForwardRange.setEnabled(!readOnly);
+		
+		if(readOnly)
+		{
+			this.dpStart.setReadOnly(true);
+			this.dpEnd.setReadOnly(true);
+		}
+		else
+		{
+			// Fix read-only if e.g. TODAY is selected
+			this.updateComponentsFromModel(this.getModelFromComponents());
+		}
+	}
+	
+	public boolean isReadOnly()
+	{
+		return this.readOnly;
+	}
+	
+	@SuppressWarnings({"unchecked", "rawtypes"})
+	public Registration addValueChangeListener(final ComponentEventListener<DateRangeOverlayValueChangeEvent> listener)
+	{
+		return this.addListener(DateRangeOverlayValueChangeEvent.class, (ComponentEventListener)listener);
+	}
+	
+	// endregion
+	
+	public class DateRangeOverlayValueChangeEvent extends ComponentEvent<DateRangePickerOverlay<D>>
+	{
+		private final DateRangeModel<D> oldValue;
+		private final boolean isFromClient;
+		
+		public DateRangeOverlayValueChangeEvent(
+			final DateRangePickerOverlay<D> source,
+			final DateRangeModel<D> oldValue,
+			final boolean isFromClient)
+		{
+			super(source, false);
+			this.oldValue = oldValue;
+			this.isFromClient = isFromClient;
+		}
+
+		public DateRangeModel<D> getOldValue()
+		{
+			return this.oldValue;
+		}
+
+		@Override
+		public boolean isFromClient()
+		{
+			return this.isFromClient;
+		}
+	}
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerStyles.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerStyles.java
new file mode 100644
index 00000000..4386b3da
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerStyles.java
@@ -0,0 +1,45 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.ui;
+
+/**
+ * Styles for the {@link DateRangePicker}
+ * 
+ * @author AB
+ *
+ */
+public final class DateRangePickerStyles
+{
+	private DateRangePickerStyles()
+	{
+	}
+	
+	public static final String LOCATION = "./styles/dateRangePicker.css";
+	
+	public static final String CLICKABLE = "date-range-picker-clickable";
+	
+	public static final String BUTTON = "date-range-picker-button";
+	public static final String OVERLAY_BASE = "date-range-picker-overlay-base";
+	public static final String OVERLAY_LAYOUT = "date-range-picker-overlay-layout";
+	
+	/*
+	 * FLEX
+	 */
+	public static final String FLEX_CONTAINER = "flex-container";
+	
+	public static final String FLEX_CHILD_AUTOGROW = "flex-child-autogrow";
+	public static final String FLEX_CHILD_CONTENTSIZE = "flex-child-contentsize";
+}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangeValueChangeEvent.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangeValueChangeEvent.java
new file mode 100644
index 00000000..1d0184c5
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangeValueChangeEvent.java
@@ -0,0 +1,34 @@
+/*
+ * Copyright © 2020 XDEV Software (https://xdev.software)
+ *
+ * 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.
+ */
+package software.xdev.vaadin.daterange_picker.ui;
+
+import com.vaadin.flow.component.AbstractField.ComponentValueChangeEvent;
+
+import software.xdev.vaadin.daterange_picker.business.DateRange;
+import software.xdev.vaadin.daterange_picker.business.DateRangeModel;
+
+
+public class DateRangeValueChangeEvent<D extends DateRange>
+	extends ComponentValueChangeEvent<DateRangePicker<D>, DateRangeModel<D>>
+{
+	public DateRangeValueChangeEvent(
+		final DateRangePicker<D> source,
+		final DateRangeModel<D> oldValue,
+		final boolean isFromClient)
+	{
+		super(source, source, oldValue, isFromClient);
+	}
+}
diff --git a/vaadin-date-range-picker/src/main/resources/META-INF/resources/frontend/styles/dateRangePicker.css b/vaadin-date-range-picker/src/main/resources/META-INF/resources/frontend/styles/dateRangePicker.css
new file mode 100644
index 00000000..e520e739
--- /dev/null
+++ b/vaadin-date-range-picker/src/main/resources/META-INF/resources/frontend/styles/dateRangePicker.css
@@ -0,0 +1,35 @@
+.date-range-picker-clickable {
+	cursor: pointer;
+}
+
+.date-range-picker-button {
+	margin-bottom: 0;
+	border-radius: 0;
+	color: var(--lumo-body-text-color);
+}
+
+.date-range-picker-overlay-base {
+	position: relative;
+}
+
+.date-range-picker-overlay-layout {
+	position: absolute;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	background-color: var(--lumo-base-color);
+	border: 1px solid var(--lumo-contrast-5pct);
+	border-top: none;
+}
+
+.flex-container {
+	display: flex;
+}
+
+.flex-child-autogrow {
+	flex: 1 1 auto;
+}
+
+.flex-child-contentsize {
+	flex: 0 1 auto;
+}