|
| 1 | +<!-- also @https://codepen.io/yordangeorgiev/pen/xxwNeJL --> |
| 2 | +<html> |
| 3 | + <head> <title>vue-ctk-date-time-picker-02</title> |
| 4 | + |
| 5 | + <style> |
| 6 | + html, body { |
| 7 | + overflow-x: hidden; |
| 8 | + max-width: 100%; |
| 9 | + font-family: Helvetica Neue, Arial, sansserif; |
| 10 | + height: 1000px; |
| 11 | + } |
| 12 | + </style> |
| 13 | + <link rel=" stylesheet" type=" text/css" href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-ctk-date-time-picker.css" > |
| 14 | +</head> |
| 15 | + |
| 16 | +<body> |
| 17 | + <script src="https://unpkg.com/vue" charset="utf-8"></script> |
| 18 | + <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-ctk-date-time-picker.umd.min.js" charset=" utf-8" ></script> |
| 19 | +<div id="app" style="fontsize: 7em"> |
| 20 | + <vue-ctk-date-time-pic :label="start_time" id="start_time_control" :value="time"> </vue-ctk-date-time-pic> |
| 21 | + <vue-ctk-date-time-pic :label="stop_time" id="stop_time_control" :value="time"> </vue-ctk-date-time-pic> |
| 22 | +</div> |
| 23 | + |
| 24 | +<script type="text/x-template" id="vue-ctk-date-time-picker-tpl"> |
| 25 | + <vue-ctk-date-time-picker :format="'YYYY-MM-DD hh:mm'" :formatted="'YYYY-MM-DD hh:mm'" :label="'Select date'" |
| 26 | + v-model="value" :first-day-of-week="1" :no-weekends-days="false"> |
| 27 | + </vue-ctk-date-time-picker> |
| 28 | +</script> |
| 29 | + |
| 30 | +<script> |
| 31 | +var valVueDtPick = Vue.component('vue-ctk-date-time-pic', { |
| 32 | + template: "#vue-ctk-date-time-picker-tpl" |
| 33 | + , data: function () { |
| 34 | + return { |
| 35 | + value: null |
| 36 | + } |
| 37 | + }, |
| 38 | + methods: { |
| 39 | + log: function (val) { |
| 40 | + console.log(val) |
| 41 | + } |
| 42 | + }, |
| 43 | + components: { 'datetime-picker': Vue.component('vue-ctk-date-time-picker', window['vue-ctk-date-time-picker'])} |
| 44 | + }) |
| 45 | + |
| 46 | +new Vue({ |
| 47 | + el: "#app" |
| 48 | + , data: function () { |
| 49 | + return { |
| 50 | + time: null |
| 51 | + } |
| 52 | + }, |
| 53 | + components: { 'vue-ctk-date-time-pic': valVueDtPick} |
| 54 | +}) |
| 55 | +</script> |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +<div> |
| 60 | +<p> this page demonstrates the following : </p> |
| 61 | +<pre> |
| 62 | + - umd usage of vue-ctk-date-time-picker from CDN - https://www.jsdelivr.com/package/npm/vue-ctk-date-time-picker?path=dist |
| 63 | + - iso-8601 :formatted="'YYYY-MM-DD HH:mm'" for the string in the inputs |
| 64 | + - use monday as the first day of the week |
| 65 | + - :no-weekends-days="false" - can be set to true and the user cannot select the days |
| 66 | + - extend the vue-ctk-date-time-picker via custom template |
| 67 | +</pre> |
| 68 | +</body> |
| 69 | +</html> |
0 commit comments