Merge pull request #907 from themesberg/datepicker-instance

Datepicker instance

Author: zoltanszogyenyi

README.md

@@ -94,13 +94,13 @@ The quickest way to get started working with Flowbite is to simply include the C
 Require the following minified stylesheet inside the `head` tag:
 
 ```html
-<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
+<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.4.0/flowbite.min.css" rel="stylesheet" />
 ```
 
 And include the following javascript file before the end of the `body` tag:
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.4.0/flowbite.min.js"></script>
 ```
 
 ### Bundled JavaScript
@@ -437,7 +437,7 @@ Flowbite is an open source collection of UI components built with the utility cl
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/plugins/datepicker/">
+        <a href="https://flowbite.com/docs/components/datepicker/">
             <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
         </a>
     </td>

config.yml

@@ -5,7 +5,7 @@ enableInlineShortcodes: true
 
 params:
   homepage: "https://flowbite.com"
-  current_version: 2.3.0
+  current_version: 2.4.0
   authors: Themesberg
   social_image_path: /docs/images/og-image.png
 

content/components/clipboard.md

@@ -8,8 +8,8 @@ requires_js: true
 
 previous: Chat Bubble
 previousLink: components/chat-bubble/
-next: Device mockups
-nextLink: components/device-mockups/
+next: Datepicker
+nextLink: components/datepicker/
 ---
 
 The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element.

content/components/datepicker.md

@@ -5,8 +5,8 @@ description: Use the device mockups component to add content and screenshot prev
 group: components
 toc: true
 
-previous: Clipboard
-previousLink: components/clipboard/
+previous: Datepicker
+previousLink: components/datepicker/
 next: Drawer
 nextLink: components/drawer/
 ---

content/components/device-mockups.md

@@ -18,7 +18,7 @@ Make sure to include <a href="{{< ref "getting-started/quickstart" >}}">Flowbite
 
 ## Dropdown example
 
-If you want to show a dropdown menu when clicking on an element make sure that you add the `data-dropdown-toggle="dropdownId"` data attribute to the element (ie. a button) that will trigger the dropdown menu.
+If you want to show a dropdown menu when clicking on an element make sure that you add the data attribute `data-dropdown-toggle="dropdownId"` to the element (ie. a button) that will trigger the dropdown menu.
 
 The `dropdownId` is the id of the dropdown menu element.
 

content/components/dropdowns.md

@@ -260,7 +260,7 @@ This component can be used to set a currency value inside a form field when you
 
 ## Credit card input
 
-Use this component to set the information needed when making an online transaction with a credit card by adding the card number, expiration date, and security code. The component uses the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/).
+Use this component to set the information needed when making an online transaction with a credit card by adding the card number, expiration date, and security code. The component uses the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/).
 
 {{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="540" >}}
 <form class="max-w-sm mx-auto">
@@ -349,7 +349,7 @@ document.querySelectorAll('[data-focus-input-init]').forEach(function(element) {
 
 ## Number input with slider
 
-This example can be used to set the value of a number input field by sliding the range slider component or by typing the value in the input field. The component uses the [Flowbite Range Slider](https://flowbite.com/docs/plugins/range-slider/).
+This example can be used to set the value of a number input field by sliding the range slider component or by typing the value in the input field. The component uses the [Flowbite Range Slider](https://flowbite.com/docs/components/range-slider/).
 
 {{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="290" disable_init_js="true" javascript=`
 // Get the elements

content/forms/number-input.md

@@ -234,7 +234,7 @@ Use this example to show or hide the timepicker when clicking on an trigger elem
 
 ## Inline timepicker buttons
 
-This is an advanced example that you can use to show the details of an event and select a date of the event based on the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/) and select the time using a predefined set of time intervals based on checkbox elements.
+This is an advanced example that you can use to show the details of an event and select a date of the event based on the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/) and select the time using a predefined set of time intervals based on checkbox elements.
 
 {{< example id="timepicker-inline-example" github="components/timepicker.md" show_dark=true >}}
 <h2 class="text-xl text-gray-900 dark:text-white font-bold mb-2">Digital Transformation</h2>
@@ -376,7 +376,7 @@ This is an advanced example that you can use to show the details of an event and
 
 ## Modal with timepicker
 
-Use this example to select a date and time inside of a modal component based on the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/) and select a time interval using checkbox elements with predefined time values for event time scheduling.
+Use this example to select a date and time inside of a modal component based on the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/) and select a time interval using checkbox elements with predefined time values for event time scheduling.
 
 {{< example id="timepicker-modal-example" github="components/timepicker.md" class="flex justify-center" show_dark=true iframeHeight="880" >}}
 <button type="button" data-modal-target="timepicker-modal" data-modal-toggle="timepicker-modal" class="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700">

content/forms/timepicker.md

@@ -219,7 +219,7 @@ module.exports = {
 
 ```bash
     <!-- ... -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.4.0/flowbite.min.js"></script>
   </body>
 </html>
 ```

content/getting-started/blazor.md

@@ -15,6 +15,12 @@ nextLink: getting-started/react/
 
 We strive to keep a good accountability of all of the version changes that we make for the Flowbite library.
 
+### v2.4.0
+
+- the datepicker is now a core component of Flowbite and has API methods, events, and options
+- updated the documentation for the datepicker component and related integration guides
+- minor visual bug fixes and improvements
+
 ### v2.3.0
 
 - added new "copy to clipboard" component and examples