mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-12 00:12:26 +03:00
Code Activity

deploy update

Browse Source
This commit is contained in:
mengxiong10
2019-11-11 00:07:05 +08:00
parent 1274a79862
commit 00d4f6797f
6 changed files with 3007 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
collapse.9db1dced.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1572655426603" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1257" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M336 784c-12.286 0-24.57-4.688-33.942-14.058l-224-224c-18.746-18.746-18.746-49.138 0-67.882l224-224c18.746-18.744 49.136-18.744 67.882 0 18.742 18.744 18.742 49.136 0 67.882L179.882 512l190.058 190.058c18.742 18.746 18.742 49.136 0 67.882C360.566 779.312 348.286 784 336 784z" p-id="1258"></path><path d="M688 784c12.286 0 24.57-4.688 33.942-14.058l224-224c18.746-18.746 18.746-49.138 0-67.882l-224-224c-18.746-18.744-49.136-18.744-67.882 0-18.742 18.744-18.742 49.136 0 67.882L844.118 512l-190.058 190.058c-18.742 18.746-18.742 49.136 0 67.882C663.434 779.312 675.714 784 688 784z" p-id="1259"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 985 B

en.ba2e3834.html
+58
View File
@@ -0,0 +1,58 @@
<!-- Basic -->
<h3 id="basic">Basic</h3>
<p>You can select or input a date, month, year, time or datetime</p>
<!-- ValueType -->
<h3 id="valuetype">ValueType</h3>
<p>You can set the type of the v-model value by <code>valueType</code>.</p>
<ul>
<li>&quot;format&quot;: return a string same as the input value.</li>
<li>&quot;date&quot;(default): return a Date Object.</li>
<li>&quot;timestamp&quot;: return a Number.</li>
<li>token: a accepted format string pattern.</li>
</ul>
<!-- Range -->
<h3 id="range">Range</h3>
<p>Support to select a date range.</p>
<!-- DisabledDateTime -->
<h3 id="disableddate--disabledtime">DisabledDate &amp; DisabledTime</h3>
<p>Disabled part of dates and time by <code>disabledDate</code> and <code>disabledTime</code> respectively</p>
<!-- Disabled -->
<h3 id="disabled--editable">Disabled &amp; editable</h3>
<ul>
<li>disabled: A disabled state of the DatePicker</li>
<li>editable: Whether to allow manual input</li>
</ul>
<!-- Shortcut -->
<h3 id="shortcut">Shortcut</h3>
<p>You can set <code>shortcuts</code> to improve user experience.
You can also use the header slot or the footer slot</p>
<!-- ControlTimePanel -->
<h3 id="control-timepanel-visible">Control TimePanel visible</h3>
<p>Determing whether the time panel is displayed by <code>showTimePanel</code>.
The time panel is displayed after the date is selected by default.</p>
<!-- ControlOpen -->
<h3 id="control-open">Control Open</h3>
<p>You can use the prop <code>open</code> to control the visible of popup.
The time picker doesn&#39;t automatically close by default.
This example automatically close the popup when the seconds is selected.</p>
<!-- HideSeconds -->
<h3 id="hide-seconds--show-ampm">Hide Seconds &amp; Show AM/PM</h3>
<p>The columns of the time Picker is displayed according to the value of format by default.
You can also set <code>showHour</code> <code>showMinute</code> <code>showSecond</code> to override the default value</p>
<!-- MinuteStep -->
<h3 id="interval-and-custom-time-options">Interval and custom time options</h3>
<p>Show stepped options by <code>hourStep</code> <code>minuteStep</code> <code>secondStep</code> or show custom options by <code>hourOptions</code> <code>minuteOptions</code> <code>secondOptions</code></p>
<!-- FixedTimeList -->
<h3 id="select-fixed-time-list">Select fixed time list</h3>
<p>You can provide a list of fixed time for users to choose by <code>timePickerOptions</code></p>
example.ad60c190.js
+2666
View File
File diff suppressed because it is too large Load Diff
example.fa5f5c95.css
+264
View File
@@ -0,0 +1,264 @@
/*
Atom One Light by Daniel Gamage
Original One Light Syntax theme from https://github.com/atom/one-light-syntax
base: #fafafa
mono-1: #383a42
mono-2: #686b77
mono-3: #a0a1a7
hue-1: #0184bb
hue-2: #4078f2
hue-3: #a626a4
hue-4: #50a14f
hue-5: #e45649
hue-5-2: #c91243
hue-6: #986801
hue-6-2: #c18401
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #383a42;
background: #fafafa;
}
.hljs-comment,
.hljs-quote {
color: #a0a1a7;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #a626a4;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #e45649;
}
.hljs-literal {
color: #0184bb;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
color: #50a14f;
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #c18401;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #986801;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #4078f2;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
html,
body {
height: 100%;
}
.container {
display: flex;
height: 100%;
}
@media screen and (max-width: 800px) {
.sidebar {
display: none;
}
}
.sidebar {
border-right: 1px solid #ebedf0;
width: 280px;
overflow: auto;
}
.sidebar a {
font-size: 14px;
line-height: 30px;
display: block;
padding-left: 16px;
overflow: hidden;
color: #314659;
white-space: nowrap;
text-overflow: ellipsis;
border-left: 1px solid transparent;
transition: all 0.3s ease;
text-decoration: none;
background-color: transparent;
outline: none;
cursor: pointer;
}
.sidebar a:hover {
color: #1485e7;
}
.sidebar a.active {
color: #1284e7;
}
.main {
flex: 1;
overflow: auto;
max-width: 100%;
}
.main p {
margin: 10px 0;
}
.content {
box-sizing: border-box;
width: 100%;
padding: 20px;
}.card {
position: relative;
display: inline-block;
width: 100%;
font-size: 14px;
color: #314659;
border: 1px solid #ebedf0;
border-radius: 4px;
}
.card + .card {
margin-top: 60px;
}
.card-demo {
padding: 30px 24px;
color: #213649;
border-top: 1px solid #ebedf0;
}
.card-demo .box {
display: flex;
flex-wrap: wrap;
}
.card-demo .box > section {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
position: absolute;
margin-top: -10px;
margin-left: 14px;
font-size: 16px;
line-height: 1;
font-weight: 700;
padding: 0 10px;
background: #fff;
}
.card-description {
padding: 12px 24px;
}
.markdown-body {
font-size: 15px;
line-height: 1.7;
}
.markdown-body p,
.markdown-body ul,
.markdown-body ol {
margin: 10px 0;
}
.markdown-body ul,
.markdown-body ol {
padding-left: 30px;
}
.markdown-body code {
margin: 0 1px;
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: rgba(27, 31, 35, 0.05);
border-radius: 3px;
}
.card-actions {
position: relative;
border-top: 1px solid #ebedf0;
height: 36px;
text-align: center;
color: #d3dce6;
cursor: pointer;
transition: 0.2s;
user-select: none;
}
.card-actions:hover {
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
}
.icon-expand {
position: absolute;
left: 50%;
top: 50%;
margin-left: -8px;
margin-top: -8px;
width: 16px;
height: 16px;
opacity: 0.3;
}
.card-code {
border-top: 1px solid #ebedf0;
}
.card-code pre {
margin: 0;
background: #fff;
}
.card-code pre::after, .card-code pre::before {
width: 0;
}
.card-code pre code {
display: block;
background: #fff;
color: #314659;
line-height: 2;
border: 0;
box-shadow: none;
padding: 16px 32px;
border-radius: 2px;
font-size: 14px;
}
expand.29367ed0.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1572655405733" class="icon" viewBox="0 0 1098 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1139" xmlns:xlink="http://www.w3.org/1999/xlink" width="214.453125" height="200"><defs><style type="text/css"></style></defs><path d="M352.548571 799.451429l-28.598857 28.598857q-5.705143 5.705143-13.165714 5.705143t-13.165714-5.705143l-266.313143-266.313143q-5.705143-5.705143-5.705143-13.165714t5.705143-13.165714l266.313143-266.313143q5.705143-5.705143 13.165714-5.705143t13.165714 5.705143l28.598857 28.598857q5.705143 5.705143 5.705143 13.165714t-5.705143 13.165714l-224.548571 224.548571 224.548571 224.548571q5.705143 5.705143 5.705143 13.165714t-5.705143 13.165714zM690.322286 189.732571l-213.138286 737.718857q-2.267429 7.460571-8.850286 11.117714t-13.458286 1.462857l-35.401143-9.728q-7.460571-2.267429-11.117714-8.850286t-1.462857-13.970286l213.138286-737.718857q2.267429-7.460571 8.850286-11.117714t13.458286-1.462857l35.401143 9.728q7.460571 2.267429 11.117714 8.850286t1.462857 13.970286zM1065.691429 561.737143l-266.313143 266.313143q-5.705143 5.705143-13.165714 5.705143t-13.165714-5.705143l-28.598857-28.598857q-5.705143-5.705143-5.705143-13.165714t5.705143-13.165714l224.548571-224.548571-224.548571-224.548571q-5.705143-5.705143-5.705143-13.165714t5.705143-13.165714l28.598857-28.598857q5.705143-5.705143 13.165714-5.705143t13.165714 5.705143l266.313143 266.313143q5.705143 5.705143 5.705143 13.165714t-5.705143 13.165714z" p-id="1140"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

index.html
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css">
<link rel="stylesheet" href="example.fa5f5c95.css"></head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-datepicker/index.min.js"></script>
<script src="example.ad60c190.js"></script>
</body>
</html>