mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 12:14:22 +08:00
51 lines
14 KiB
HTML
51 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Date Pickers | Vue Material Kit</title>
|
|
<meta name="description" content="">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
|
|
|
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.2a3f43e2.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/11.28c85460.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
|
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="active sidebar-link">Date Pickers</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/date-pickers.html#simple-examples" class="sidebar-link">Simple Examples</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="date-pickers"><a href="#date-pickers" aria-hidden="true" class="header-anchor">#</a> Date Pickers</h1> <p>We have created a date-time picker starting from the <a href="https://vuematerial.io/" target="_blank" rel="noopener noreferrer">vuematerial.io<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> date picker. We have changed the colours, typography and buttons, so it can look like the rest of the dashboard. You don't have to import the component you just use it like this:</p> <h2 id="simple-examples"><a href="#simple-examples" aria-hidden="true" class="header-anchor">#</a> Simple Examples</h2> <div class="demo-block demo-box demo-component-docs demo-date-pickers.html"><div class="source"><div class="md-layout-item md-size-100"><div class="md-field md-theme-default md-clearable md-datepicker"><i class="md-icon md-icon-font md-icon-image md-date-icon md-theme-default"><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"></path> <path d="M0 0h24v24H0z" fill="none"></path></svg></i> <input pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" type="text" id="md-input-pmsqrjqgw" class="md-input"> <label>Select date</label> <!----> <!----> <!----> <!----> <!----></div></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-layout-item md-size-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-datepicker</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selectedLabeled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Select date<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-datepicker</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
|
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
selectedLabeled<span class="token punctuation">:</span> <span class="token keyword">null</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
|
|
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span class="showText" style="display:none;">Show</span></div></div> <blockquote><p>Note: for more details about the datepicker props and attributes please see the <strong>Datepicker</strong> section from <a href="https://vuematerial.io/components/datepicker" target="_blank" rel="noopener noreferrer">vuematerial.io<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></blockquote></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="prev">
|
|
Brand Colors
|
|
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/modal.html">
|
|
Modal
|
|
</a>
|
|
→
|
|
</span></p></div> </div> <!----></div></div>
|
|
<script src="/vue-material-kit/documentation/assets/js/11.28c85460.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.2a3f43e2.js" defer></script>
|
|
</body>
|
|
</html>
|