vue3-datepicker-lite
Version:
A simple datepicker component for vue3.0
280 lines (274 loc) • 7.89 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue3-datepicker-lite</title>
<style>
body {
padding-top: 10px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
}
@media (min-width: 1200px) {
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
}
.hero-unit {
padding: 60px;
margin-bottom: 30px;
font-size: 18px;
font-weight: 200;
line-height: 30px;
color: inherit;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 31.5px;
}
h1, h2, h3 {
line-height: 40px;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
}
p {
margin: 0 0 10px;
}
ul, ol {
padding: 0;
margin: 0 0 10px 25px;
}
li {
line-height: 20px;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
code, pre {
padding: 0 3px 2px;
font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
font-size: 12px;
color: #333333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
code {
padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1 id="home">vue3-datepicker-lite</h1>
<p>A very simple datepicker component for vue3.0!</p>
<hr />
<p><a href="https://github.com/linmasahiro/vue3-datepicker-lite">Github</a></p>
<p>
<iframe src="https://ghbtns.com/github-btn.html?user=linmasahiro&repo=vue3-datepicker-lite&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</p>
</div>
<h2 id="demo">Demo</h2>
<p>Example Sample Demo</p>
<div>
<div id="app"></div>
</div>
<br/>
<h2 id="info">Get Start</h2>
<div>
<ol>
<li>
Use NPM
<ol>
<li>
<pre><code>npm install vue3-datepicker-lite --save</code></pre>
</li>
<li>
<p>add to your project</p>
<pre><code>import DatepickerLite from 'vue3-datepicker-lite'</code></pre>
</li>
<li>
<p>set component attribuite</p>
<pre>
<code>
<datepicker-lite
:id-attr="datepickerSetting.id"
:name-attr="datepickerSetting.name"
:class-attr="datepickerSetting.class"
:value-attr="datepickerSetting.value"
:placeholder-attr="datepickerSetting.placeholder"
:is-button-type="datepickerSetting.isButtonType"
:year-minus="datepickerSetting.yearMinus"
:years-range="10"
:from="datepickerSetting.fromDate"
:to="datepickerSetting.toDate"
:disabled-date="datepickerSetting.disabledDate"
:locale="datepickerSetting.locale"
@value-changed="datepickerSetting.changeEvent"
:disable-input="datepickerSetting.disableInput"
:show-bottom-button="true"
/>
</code>
</pre>
</li>
<li>
<p>sample setting data:</p>
<pre>
<code>
const datepickerSetting = {
id: "birthday",
name: "birthday",
class: "myDateInput",
value: "2020/10/01",
placeholder: "Select",
isButtonType: false,
yearMinus: 0,
fromDate: "2010/02/10",
toDate: "2030/12/10",
disabledDate: [
"2020/10/02",
"2020/10/03",
"2020/10/04",
"2020/10/05",
"2020/10/06",
],
locale: {
format: "YYYY/MM/DD",
weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
startsWeeks: 0,
todayBtn: "Today",
clearBtn: "Clear",
closeBtn: "Close",
},
changeEvent: (value) => {
console.log(value + " selected!");
},
disableInput: false,
}
// if u want to change date format
const datepickerSetting2 = {
id: "birthday2",
name: "birthday2",
class: "myDateInput",
value: "01/10/2020",
placeholder: "Select",
isButtonType: false,
yearMinus: 0,
fromDate: "10/02/2020",
toDate: "10/02/2021",
disabledDate: [
"02/10/2020",
"03/10/2020",
"04/10/2020",
"05/10/2020",
"06/10/2020",
],
locale: {
format: "DD-MM-YYYY",
weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
startsWeeks: 0,
todayBtn: "Today",
clearBtn: "Clear",
closeBtn: "Close",
},
changeEvent: (value) => {
console.log(value + " selected!");
},
disableInput: false,
}
// if u want to change to your country years and not input box.
const datepickerSetting3 = {
id: "birthday3",
name: "birthday3",
class: "myDateInput",
value: "2020/10/01",
placeholder: "Select",
isButtonType: true,
yearMinus: 1911,
yearsRange: 10,
fromDate: "2020/02/10",
toDate: "",
disabledDate: [],
locale: {
format: "YYYY/MM/DD",
weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
startsWeeks: 0,
todayBtn: "Today",
clearBtn: "Clear",
closeBtn: "Close",
},
changeEvent: (value) => {
console.log(value + " selected!");
},
disableInput: false,
};
</code>
</pre>
</li>
</ol>
</li>
</ol>
</div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Copyright © 2020 <a href="https://github.com/linmasahiro" target="_blank">Lin</a> All Rights Reserved.</p>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>