mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-06 01:52:26 +03:00
Deploy updates
This commit is contained in:
mengxiong10
@@ -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>"format": return a string same as the input value.</li>
|
||||
<li>"date"(default): return a Date Object.</li>
|
||||
<li>"timestamp": 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 & 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 & 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.
|
||||
Use the header slot or the footer slot to render extra element in panel for customized requirements.</p>
|
||||
<!-- ControlTimePanel -->
|
||||
|
||||
<h3 id="control-timepanel-visibledatetime-mode">Control TimePanel visible(datetime mode)</h3>
|
||||
<p>The display or hiding of the time panel can be controlled 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.
|
||||
This example shows how to close the popup when the seconds is selected.</p>
|
||||
<!-- HideSeconds -->
|
||||
|
||||
<h3 id="hide-seconds-selection--display-ampm-selection">Hide seconds selection & display AMPM selection</h3>
|
||||
<p>The columns of the time Picker is displayed according to the value of format(HH:mm:ss) 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>Set stepped time options by <code>hourStep</code> <code>minuteStep</code> <code>secondStep</code>
|
||||
Set custom time 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>
|
||||
@@ -0,0 +1,266 @@
|
||||
/*
|
||||
|
||||
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: 10px 20px;
|
||||
}.card {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #314659;
|
||||
border: 1px solid #ebedf0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.card.active {
|
||||
border-color: #1284e7;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
+2759
File diff suppressed because it is too large
Load Diff
+2
-2
@@ -7,11 +7,11 @@
|
||||
<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.d9dc2dda.css"></head>
|
||||
<link rel="stylesheet" href="example.22434e06.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.adb34724.js"></script>
|
||||
<script src="example.d4e17d8d.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<!-- Basic -->
|
||||
|
||||
<h3 id="基本">基本</h3>
|
||||
<p>可以选择或手动输入一个日期, 月, 年, 时间或者日期加时间</p>
|
||||
<!-- ValueType -->
|
||||
|
||||
<h3 id="绑定值的类型">绑定值的类型</h3>
|
||||
<p>通过<code>valueType</code>去设置<code>ｖ-model</code>绑定的值的类型</p>
|
||||
<ul>
|
||||
<li>"format": 返回一个字符串，和输入框格式化之后的一样．</li>
|
||||
<li>"date"(default): 返回一个 Date 对象.</li>
|
||||
<li>"timestamp": 返回一个时间戳.</li>
|
||||
<li>token: 一个可以被解析的 token, 返回格式化这个 token 的字符串.</li>
|
||||
</ul>
|
||||
<!-- Range -->
|
||||
|
||||
<h3 id="日期范围">日期范围</h3>
|
||||
<p>支持选择一个日期范围</p>
|
||||
<!-- DisabledDateTime -->
|
||||
|
||||
<h3 id="不可选择的日期和时间">不可选择的日期和时间</h3>
|
||||
<p>可用 <code>disabledDate</code> 和 <code>disabledTime</code> 分别禁止选择部分日期和时间</p>
|
||||
<!-- Disabled -->
|
||||
|
||||
<h3 id="禁用和可编辑">禁用和可编辑</h3>
|
||||
<ul>
|
||||
<li><code>disabled</code>: 设置组件是否禁用</li>
|
||||
<li><code>editable</code>: 设置是否可手动输入</li>
|
||||
</ul>
|
||||
<!-- Shortcut -->
|
||||
|
||||
<h3 id="快捷选项">快捷选项</h3>
|
||||
<p>可以通过设置 <code>shortcuts</code> 提升用户体验.
|
||||
也可以使用 slot header 或者 footer 去设置额外的元素.</p>
|
||||
<!-- ControlTimePanel -->
|
||||
|
||||
<h3 id="控制时间选择的显示和隐藏日期时间模式">控制时间选择的显示和隐藏(日期时间模式)</h3>
|
||||
<p>时间选择的显示可以通过 <code>showTimePanel</code> 控制.
|
||||
默认情况下选择一个日期后时间面板就自动显示.</p>
|
||||
<!-- ControlOpen -->
|
||||
|
||||
<h3 id="控制弹窗打开">控制弹窗打开</h3>
|
||||
<p>可以通过 <code>open</code> 去控制弹窗的显示
|
||||
下面的例子说明怎么关闭弹窗当选择秒的时候</p>
|
||||
<!-- HideSeconds -->
|
||||
|
||||
<h3 id="隐藏秒和显示-ampm">隐藏秒和显示 am/pm</h3>
|
||||
<p>时间选择的列是自动显示通过 <code>format</code>的设置.
|
||||
你可以通过 <code>showHour</code> <code>showMinute</code> <code>showSecond</code> 覆盖默认值</p>
|
||||
<!-- MinuteStep -->
|
||||
|
||||
<h3 id="间隔的时间和自定义时间选择">间隔的时间和自定义时间选择</h3>
|
||||
<p>设置间隔的时间通过<code>hourStep</code> <code>minuteStep</code> <code>secondStep</code>.
|
||||
设置自定义的选择通过<code>hourOptions</code> <code>minuteOptions</code> <code>secondOptions</code>.</p>
|
||||
<!-- FixedTimeList -->
|
||||
|
||||
<h3 id="固定的时间列表">固定的时间列表</h3>
|
||||
<p>可以通过 <code>timePickerOptions</code> 提供一个固定的时间列表选择</p>
|
||||
Reference in New Issue
Block a user