Merge pull request #2469 from Eonasdan/development

Development

README.md

@@ -1,6 +1,6 @@
 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/R6R53OEFF)
 
-# Tempus Dominus Date/Time Picker v6.0.0-beta1
+# Tempus Dominus Date/Time Picker v6.0.0-beta2
 
 Tempus Dominus is a powerful and robust date time picker for javascript. Version 6 is another major rewrite over the previous version. V6 is written with modern browsers in mind and is written in typescript. Bootstrap, momentjs and jQuery are no longer required dependencies. Popper2 is all that is required for the picker to position correctly. If you still require jQuery (seriously, you should move off that asap) there's a jQuery provider that wraps the native js functions.
 

dist/js/jQuery-provider.js

@@ -2,7 +2,7 @@
 /*global $ */
 
 /*!
-  * Tempus Dominus v6.0.0-beta1 (https://getdatepicker.com/)
+  * Tempus Dominus v6.0.0-beta2 (https://getdatepicker.com/)
   * Copyright 2013-2021 [object Object]
   * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE)
   */

docs/404.html

@@ -222,4 +222,4 @@ <h5>Community</h5>
 
 
 </body>
-</html>
+</html>

docs/5-4/index.html

@@ -182,7 +182,7 @@ <h4 class="row">Creative Tim</h4>
             <a href="https://www.creative-tim.com/product/argon-dashboard-pro?partner=127205 " target="_blank"
                class="affiliate-project">
                 Argon Pro
-                <img src="https://s3.amazonaws.com/creativetim_bucket/products/137/thumb/opt_adp_thumbnail.jpg?1544778965"
+                <img src="https://s3.amazonaws.com/creativetim_bucket/products/137/original/argon-dashboard-pro.jpg?1637855868"
                      alt="Argon Pro" class="img-fluid">
             </a>
         </div>

docs/6/change-log.html

@@ -538,4 +538,4 @@ <h5>Community</h5>
 
 
 </body>
-</html>
+</html>

docs/6/examples/index.html

@@ -1018,7 +1018,7 @@ <h3 id="linked-pickers">Linked pickers <a class="anchorjs-link" aria-label="Anch
 const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) =&gt; {
   linked1.updateOptions({
     restrictions: {
-      maxDate: e.detail.date
+      maxDate: e.date
     }
   });
 });
@@ -1078,7 +1078,7 @@ <h3 id="linked-pickers">Linked pickers <a class="anchorjs-link" aria-label="Anch
       const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) => {
         linked1.updateOptions({
           restrictions: {
-            maxDate: e.detail.date
+            maxDate: e.date
           }
         });
       });
@@ -1755,6 +1755,78 @@ <h3 id="setting-options">Update options <a class="anchorjs-link" aria-label="Anc
     </script>
   </section>
 
+  <section>
+    <h3 id="container-option">Example with container parameter<a class="anchorjs-link" aria-label="Anchor" href="#container-option"><i class="fas fa-anchor"></i></a> <small class="show-code" title="View Code"><i class="fas fa-code"></i></small></h3>
+
+    <p>
+      All you need is an element to atach the picker to and a parent container.
+    </p>
+
+    <div class="code-blocks d-none">
+      <ul class="nav nav-tabs" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active" id="container-optionHtml-tab" data-bs-toggle="tab" data-bs-target="#container-optionHtml" type="button" role="tab" aria-controls="container-optionHtml" aria-selected="true">HTML
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="container-optionJs-tab" data-bs-toggle="tab" data-bs-target="#container-optionJs" type="button" role="tab" aria-controls="container-optionJs" aria-selected="false">Javascript
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="container-optionLog-tab" data-bs-toggle="tab" data-bs-target="#container-optionLog" type="button" role="tab" aria-controls="container-optionLog" aria-selected="false">Events
+          </button>
+        </li>
+      </ul>
+      <div class="tab-content">
+        <div class="tab-pane fade show active" id="container-optionHtml" role="tabpanel" aria-labelledby="container-optionHtml-tab">
+         <pre>           <code class="language-html">
+&lt;div id='parent-container' class='relative p-5' style='overflow: auto; height: 100px; width: 100%;'&gt;
+  &lt;div class='input-group log-event' id='containerDatePicker' data-td-target-input='nearest'
+    data-td-target-toggle='nearest'&gt;
+    &lt;input id='containerDatePickerInput' type='text' class='form-control' /&gt;
+    &lt;span class='input-group-text' data-td-target='#settingOptions' data-td-toggle='datetimepicker'&gt;
+      &lt;span class='fas fa-calendar'&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+           </code>
+         </pre>
+        </div>
+        <div class="tab-pane fade" id="container-optionJs" role="tabpanel" aria-labelledby="container-optionJs-tab">
+         <pre>           <code class="language-javascript">
+new tempusDominus.TempusDominus(document.getElementById('containerDatePicker'), {
+  container: document.querySelector('div#parent-container'),
+});
+           </code>
+         </pre>
+        </div>
+        <div class="tab-pane fade logger" id="container-optionLog" role="tabpanel" aria-labelledby="datetimepicker1Log-tab">
+          <div class="alert alert-info">
+            Events will display as you manipulate the picker.
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-6">
+          <div id="parent-container" class="relative p-5" style="overflow: auto; height: 100px; width: 100%;">
+            <div class="input-group log-event" id="containerDatePicker" data-td-target-input="nearest" data-td-target-toggle="nearest">
+              <input id="containerDatePickerInput" type="text" class="form-control">
+              <span class="input-group-text" data-td-target="#settingOptions" data-td-toggle="datetimepicker">
+                <span class="fas fa-calendar"></span>
+            </span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript">
+      new tempusDominus.TempusDominus(document.getElementById('containerDatePicker'), {
+        container: document.querySelector('div#parent-container'),
+      });
+    </script>
+  </section>
+
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 </div>
 </main></div>

docs/6/examples/jquery.html

@@ -1751,6 +1751,78 @@ <h3 id="setting-options">Updating Options <a class="anchorjs-link" aria-label="A
     </script>
   </section>
 
+  <section>
+    <h3 id="container-option">Example with container parameter<a class="anchorjs-link" aria-label="Anchor" href="#container-option"><i class="fas fa-anchor"></i></a> <small class="show-code" title="View Code"><i class="fas fa-code"></i></small></h3>
+
+    <p>
+      All you need is an element to atach the picker to and a parent container.
+    </p>
+
+    <div class="code-blocks d-none">
+      <ul class="nav nav-tabs" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active" id="container-optionHtml-tab" data-bs-toggle="tab" data-bs-target="#container-optionHtml" type="button" role="tab" aria-controls="container-optionHtml" aria-selected="true">HTML
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="container-optionJs-tab" data-bs-toggle="tab" data-bs-target="#container-optionJs" type="button" role="tab" aria-controls="container-optionJs" aria-selected="false">Javascript
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="container-optionLog-tab" data-bs-toggle="tab" data-bs-target="#container-optionLog" type="button" role="tab" aria-controls="container-optionLog" aria-selected="false">Events
+          </button>
+        </li>
+      </ul>
+      <div class="tab-content">
+        <div class="tab-pane fade show active" id="container-optionHtml" role="tabpanel" aria-labelledby="container-optionHtml-tab">
+         <pre>           <code class="language-html">
+&lt;div id='parent-container' class='relative p-5' style='overflow: auto; height: 100px; width: 100%;'&gt;
+  &lt;div class='input-group log-event' id='containerDatePicker' data-td-target-input='nearest'
+    data-td-target-toggle='nearest'&gt;
+    &lt;input id='containerDatePickerInput' type='text' class='form-control' /&gt;
+    &lt;span class='input-group-text' data-td-target='#settingOptions' data-td-toggle='datetimepicker'&gt;
+      &lt;span class='fas fa-calendar'&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+           </code>
+         </pre>
+        </div>
+        <div class="tab-pane fade" id="container-optionJs" role="tabpanel" aria-labelledby="container-optionJs-tab">
+         <pre>           <code class="language-javascript">
+$('#containerDatePicker').tempusDominus({
+  container: $('div[id="parent-container"]')[0],
+});
+           </code>
+         </pre>
+        </div>
+        <div class="tab-pane fade logger" id="container-optionLog" role="tabpanel" aria-labelledby="datetimepicker1Log-tab">
+          <div class="alert alert-info">
+            Events will display as you manipulate the picker.
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-6">
+          <div id="parent-container" class="relative p-5" style="overflow: auto; height: 100px; width: 100%;">
+            <div class="input-group log-event" id="containerDatePicker" data-td-target-input="nearest" data-td-target-toggle="nearest">
+              <input id="containerDatePickerInput" type="text" class="form-control">
+              <span class="input-group-text" data-td-target="#settingOptions" data-td-toggle="datetimepicker">
+                <span class="fas fa-calendar"></span>
+            </span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript">
+      $('#containerDatePicker').tempusDominus({
+        container: $('div[id="parent-container"]')[0],
+      });
+    </script>
+  </section>
+
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 </div>
 </main></div>

docs/6/functions.html

@@ -507,4 +507,4 @@ <h5>Community</h5>
 
 
 </body>
-</html>
+</html>

docs/6/index.html

@@ -283,4 +283,4 @@ <h5>Community</h5>
 
 
 </body>
-</html>
+</html>

docs/6/js/jQuery-provider.js

@@ -2,7 +2,7 @@
 /*global $ */
 
 /*!
-  * Tempus Dominus v6.0.0-beta1 (https://getdatepicker.com/)
+  * Tempus Dominus v6.0.0-beta2 (https://getdatepicker.com/)
   * Copyright 2013-2021 [object Object]
   * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE)
   */