Permalink
Browse files

Added example for RTL support

  • Loading branch information...
stefangabos committed Oct 27, 2018
1 parent f0033c1 commit 4158ceec1d6d85d00267d7d9e661f5c76ba2a723
Showing with 97 additions and 6 deletions.
  1. +31 −2 examples/bootstrap.html
  2. +4 −0 examples/examples.js
  3. +31 −2 examples/index.html
  4. +31 −2 examples/metallic.html
View
@@ -79,7 +79,8 @@ <h1>Zebra Datepicker</h1>
13. <a href="#custom-classes">Custom classes</a><br>
14. <a href="#on-change">Handling the "onChange" event</a><br>
15. <a href="#always-visible">Always-visible date pickers</a><br>
16. <a href="#data-attributes">Data attributes</a><br>
16. <a href="#rtl-support">RTL support</a><br>
17. <a href="#data-attributes">Data attributes</a><br>
</div>
</div>
@@ -592,14 +593,42 @@ <h3><strong>15.</strong> Always-visible date pickers</h3>
</div>
</div>
<a name="rtl-support"></a>
<div class="top">
<a href="#top" class="small">⯅ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>16.</strong> RTL support</h3>
<p>
Set the <code>rtl</code> property to <code>true</code> to have the current language drawn from
right to left.
</p>
<pre class="brush:js">
$('#datepicker').Zebra_DatePicker({
rtl: true
});
</pre>
<div class="well">
<div class="row">
<div class="col-sm-3">
<input id="datepicker-rtl-support" type="text" class="form-control" data-zdp_readonly_element="false">
</div>
</div>
</div>
<a name="data-attributes"></a>
<div class="top">
<a href="#top" class="small">⯅ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>16.</strong> Data attributes</h3>
<h3><strong>17.</strong> Data attributes</h3>
<p>
All the properties of the date picker can also be set via <code>data-attributes</code>.<br>
View
@@ -77,6 +77,10 @@ $(document).ready(function() {
always_visible: $('#container')
});
$('#datepicker-rtl-support').Zebra_DatePicker({
rtl: true
});
$('#datepicker-data-attributes').Zebra_DatePicker();
setTimeout(function() {
View
@@ -79,7 +79,8 @@ <h1>Zebra Datepicker</h1>
13. <a href="#custom-classes">Custom classes</a><br>
14. <a href="#on-change">Handling the "onChange" event</a><br>
15. <a href="#always-visible">Always-visible date pickers</a><br>
16. <a href="#data-attributes">Data attributes</a><br>
16. <a href="#rtl-support">RTL support</a><br>
17. <a href="#data-attributes">Data attributes</a><br>
</div>
</div>
@@ -586,14 +587,42 @@ <h3><strong>15.</strong> Always-visible date pickers</h3>
</div>
</div>
<a name="rtl-support"></a>
<div class="top">
<a href="#top" class="small">⯅ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>16.</strong> RTL support</h3>
<p>
Set the <code>rtl</code> property to <code>true</code> to have the current language drawn from
right to left.
</p>
<pre class="brush:js">
$('#datepicker').Zebra_DatePicker({
rtl: true
});
</pre>
<div class="well">
<div class="row">
<div class="col-sm-3">
<input id="datepicker-rtl-support" type="text" class="form-control" data-zdp_readonly_element="false">
</div>
</div>
</div>
<a name="data-attributes"></a>
<div class="top">
<a href="#top" class="small">⯅ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>16.</strong> Data attributes</h3>
<h3><strong>17.</strong> Data attributes</h3>
<p>
All the properties of the date picker can also be set via <code>data-attributes</code>.<br>
View
@@ -79,7 +79,8 @@ <h1>Zebra Datepicker</h1>
13. <a href="#custom-classes">Custom classes</a><br>
14. <a href="#on-change">Handling the "onChange" event</a><br>
15. <a href="#always-visible">Always-visible date pickers</a><br>
16. <a href="#data-attributes">Data attributes</a><br>
16. <a href="#rtl-support">RTL support</a><br>
17. <a href="#data-attributes">Data attributes</a><br>
</div>
</div>
@@ -586,14 +587,42 @@ <h3><strong>15.</strong> Always-visible date pickers</h3>
</div>
</div>
<a name="rtl-support"></a>
<div class="top">
<a href="#top" class="small">⯅ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>16.</strong> RTL support</h3>
<p>
Set the <code>rtl</code> property to <code>true</code> to have the current language drawn from
right to left.
</p>
<pre class="brush:js">
$('#datepicker').Zebra_DatePicker({
rtl: true
});
</pre>
<div class="well">
<div class="row">
<div class="col-sm-3">
<input id="datepicker-rtl-support" type="text" class="form-control" data-zdp_readonly_element="false">
</div>
</div>
</div>
<a name="data-attributes"></a>
<div class="top">
<a href="#top" class="small">⯅ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>16.</strong> Data attributes</h3>
<h3><strong>17.</strong> Data attributes</h3>
<p>
All the properties of the date picker can also be set via <code>data-attributes</code>.<br>

0 comments on commit 4158cee

Please sign in to comment.