Skip to content

Commit ccfd8b8

Browse files
mymthmymth
committed
change bootstrap's default version to v5 and update the styles and demos with frameworks' latest versions
Close mymth#37, mymth#73
1 parent b7088bb commit ccfd8b8

9 files changed

+164
-156
lines changed

‎demo/bs4.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Vanilla JS Datepicker Demo</title>
7-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
88
<link rel="stylesheet" type="text/css" href="../dist/css/datepicker-bs4.css">
9-
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
9+
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
1010
<style type="text/css">
1111
main .section {
1212
padding: 3rem 1.5rem;
@@ -96,7 +96,7 @@ <h1 class="title">Demo</h1>
9696
</div>
9797
<div class="row">
9898
<div class="col">
99-
<p><small>Style: <a href="index.html">Bulma</a> | <em>Bootstrap</em> | <a href="foundation.html">Foundation</a> | <a href="plain-css.html">Plain CSS</a></small></p>
99+
<p><small>Style: <a href="index.html">Bulma</a> | <em>Bootstrap (<a href="bs5.html">v5</a>, v4)</em> | <a href="foundation.html">Foundation</a> | <a href="plain-css.html">Plain CSS</a></small></p>
100100
</div>
101101
</div>
102102
</section>
@@ -426,9 +426,9 @@ <h4 class="subtitle">Text direction</h4>
426426
</aside>
427427

428428
<div class="toggle-btn"></div>
429-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
430-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
431-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
429+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
430+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
431+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
432432
<script src="../dist/js/datepicker-full.js"></script>
433433
<script src="./live-demo.js"></script>
434434
<script>

‎demo/bs5.html

+77-76
Large diffs are not rendered by default.

‎demo/foundation.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Vanilla JS Datepicker Demo</title>
7-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous">
88
<link rel="stylesheet" type="text/css" href="../dist/css/datepicker-foundation.css">
9-
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
9+
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
1010
<style type="text/css">
1111
main .section {
1212
padding: 3rem 1.5rem;
@@ -125,7 +125,7 @@ <h1 class="title">Demo</h1>
125125
</div>
126126
<div class="row">
127127
<div class="columns">
128-
<p><small>Style: <a href="index.html">Bulma</a> | <a href="bs4.html">Bootstrap</a> | <em>Foundation</em> | <a href="plain-css.html">Plain CSS</a></small></p>
128+
<p><small>Style: <a href="index.html">Bulma</a> | <a href="bs5.html">Bootstrap</a> | <em>Foundation</em> | <a href="plain-css.html">Plain CSS</a></small></p>
129129
</div>
130130
</div>
131131
</section>
@@ -479,9 +479,9 @@ <h4 class="subtitle">Text direction</h4>
479479
</aside>
480480

481481
<div class="toggle-btn"></div>
482-
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
483-
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.2.6/what-input.min.js"></script>
484-
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
482+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
483+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.2.6/what-input.min.js"></script> -->
484+
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script>
485485
<script src="../dist/js/datepicker-full.js"></script>
486486
<script src="./live-demo.js"></script>
487487
<script>

‎demo/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Vanilla JS Datepicker Demo</title>
7-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css">
7+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.css">
88
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css">
99
<link rel="stylesheet" type="text/css" href="../dist/css/datepicker-bulma.css">
10-
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
10+
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
1111
<style type="text/css">
1212
aside {
1313
position: fixed;
@@ -90,7 +90,7 @@ <h1 class="title">Demo</h1>
9090
</div>
9191
<div class="columns">
9292
<div class="column content">
93-
<p>Style: <em>Bulma</em> | <a href="bs4.html">Bootstrap</a> | <a href="foundation.html">Foundation</a> | <a href="plain-css.html">Plain CSS</a></p>
93+
<p>Style: <em>Bulma</em> | <a href="bs5.html">Bootstrap</a> | <a href="foundation.html">Foundation</a> | <a href="plain-css.html">Plain CSS</a></p>
9494
<p class="is-size-7">* This page uses <a href="https://wikiki.github.io/elements/tooltip/" target="_blank">bulma-tooltip</a> for tooltips.</p>
9595
</div>
9696
</div>

‎demo/plain-css.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Vanilla JS Datepicker Demo</title>
77
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css">
88
<link rel="stylesheet" type="text/css" href="../dist/css/datepicker.css">
9-
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
9+
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
1010
<style type="text/css">
1111
pre {
1212
background-color: #f5f5f5;
@@ -127,7 +127,7 @@ <h1 class="title">Demo</h1>
127127
</div>
128128
<div class="columns">
129129
<div class="column">
130-
<p><small>Style: <a href="index.html">Bulma</a> | <a href="bs4.html">Bootstrap</a> | <a href="foundation.html">Foundation</a> | <em>Plain CSS</em></small></p>
130+
<p><small>Style: <a href="index.html">Bulma</a> | <a href="bs5.html">Bootstrap</a> | <a href="foundation.html">Foundation</a> | <em>Plain CSS</em></small></p>
131131
<p><small>* This page uses <a href="https://wikiki.github.io/elements/tooltip/" target="_blank">bulma-tooltip</a> for tooltips.</small></p>
132132
</div>
133133
</div>

‎docs/README.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,12 @@ const datepicker = new Datepicker(elem, {
163163

164164
2. import scss file for Bootstrap instead.
165165

166+
```scss
167+
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bs5';
168+
```
169+
170+
_Or if your Bootstrap's version is v4.x_
171+
166172
```scss
167173
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bs4';
168174
```
@@ -239,11 +245,13 @@ const datepicker = new Datepicker(elem, {
239245
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"></script>
240246
```
241247

242-
_If you use Bulma, Bootstrap or Foundation, you can use the css for your framework instead._
248+
_If you use Bulma, Bootstrap (v5, v4) or Foundation, you can use the css for your framework instead._
243249

244250
```html
245251
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-bulma.min.css">
246252
<!-- or -->
253+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-bs5.min.css">
254+
<!-- or -->
247255
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-bs4.min.css">
248256
<!-- or -->
249257
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-foundation.min.css">

‎package-lock.json

+54-55
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,14 @@
4747
"devDependencies": {
4848
"@rollup/plugin-node-resolve": "^11.0.1",
4949
"autoprefixer": "^10.3.7",
50-
"bootstrap4": "npm:bootstrap@^4.5.3",
51-
"bootstrap5": "npm:bootstrap@^5.0.1",
52-
"bulma": "^0.9.1",
50+
"bootstrap": "^5.1.3",
51+
"bootstrap4": "npm:bootstrap@^4.6.1",
52+
"bulma": "^0.9.3",
5353
"bulma-tooltip": "^3.0.2",
5454
"cssnano": "^4.1.10",
5555
"docsify-cli": "^4.4.2",
5656
"esm": "^3.2.25",
57-
"foundation-sites": "^6.6.3",
57+
"foundation-sites": "^6.7.4",
5858
"jsdom": "^16.4.0",
5959
"mocha": "^8.2.1",
6060
"postcss": "^8.3.11",

‎sass/index-bs5.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import '../node_modules/bootstrap5/scss/functions';
2-
@import '../node_modules/bootstrap5/scss/variables';
3-
@import '../node_modules/bootstrap5/scss/mixins';
1+
@import '../node_modules/bootstrap/scss/functions';
2+
@import '../node_modules/bootstrap/scss/variables';
3+
@import '../node_modules/bootstrap/scss/mixins';
44

55
@import 'datepicker-bs5';

0 commit comments

Comments
 (0)