├── .gitignore
├── README.md
├── css
    └── datepicker.css
├── index.html
├── package.json
└── persian-datepicker.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | *.DS_Store
4 | [Tt]humbs.db


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-persian-datepicker-playground
2 | persian datepicker config generator and playground 
3 | [Demo](http://babakhani.github.io/PersianWebToolkit/doc/datepicker/playground.html)
4 | 


--------------------------------------------------------------------------------
/css/datepicker.css:
--------------------------------------------------------------------------------
  1 | a {
  2 |     color: #000 !important;
  3 | }
  4 | 
  5 | .datepicker-demo-box {
  6 |     position: fixed;
  7 | }
  8 | 
  9 | .datepicker-main {
 10 |     min-height: 600px;
 11 |     padding-top: 70px;
 12 | }
 13 | 
 14 | .datepicker-main .alert-info {
 15 |     font-size: 12px;
 16 |     padding: 5px;
 17 |     opacity: 0.9;
 18 |     background: #f1f1f1;
 19 |     color: #999;
 20 |     border: none;
 21 | }
 22 | 
 23 | .datepicker-main .alert-info:hover {
 24 |     opacity: 1;
 25 | }
 26 | 
 27 | .datepicker-main .datepicker-main--panel {
 28 |     position: fixed;
 29 |     width: 50%;
 30 | }
 31 | 
 32 | .navbar {
 33 |     border-radius: 0 !important;
 34 | }
 35 | 
 36 | .navbar-header a {
 37 |     color: hsla(0, 0%, 100%, .7) !important;
 38 | }
 39 | 
 40 | textarea {
 41 |     display: block;
 42 |     height: 150px;
 43 | }
 44 | 
 45 | .datepicker-checkbox {
 46 |     width: 40% !important;
 47 | }
 48 | 
 49 | .datepicker-plot-area {
 50 |     width: 286px;
 51 | }
 52 | 
 53 | /*--Helper--*/
 54 | 
 55 | .margin-top {
 56 |     margin-top: 15px;
 57 | }
 58 | 
 59 | .no-padding {
 60 |     padding: 0 !important;
 61 | }
 62 | 
 63 | .datepicker-footer {
 64 |     padding: 2.5rem;
 65 |     color: #999;
 66 |     background-color: #f9f9f9;
 67 |     border-top: .05rem solid #e5e5e5;
 68 | }
 69 | 
 70 | /* The switch - the box around the slider */
 71 | .switch {
 72 |     position: relative;
 73 |     display: inline-block;
 74 |     width: 60px;
 75 |     height: 34px;
 76 | }
 77 | 
 78 | /* Hide default HTML checkbox */
 79 | .switch input {
 80 |     display: none;
 81 | }
 82 | 
 83 | /* The slider */
 84 | .slider {
 85 |     position: absolute;
 86 |     cursor: pointer;
 87 |     top: 0;
 88 |     left: 0;
 89 |     right: 0;
 90 |     bottom: 0;
 91 |     background-color: #ccc;
 92 |     -webkit-transition: .1s;
 93 |     transition: .1s;
 94 | }
 95 | 
 96 | .slider:before {
 97 |     position: absolute;
 98 |     content: "";
 99 |     height: 26px;
100 |     width: 26px;
101 |     left: 4px;
102 |     bottom: 4px;
103 |     background-color: white;
104 |     -webkit-transition: .1s;
105 |     transition: .1s;
106 | }
107 | 
108 | input:checked + .slider {
109 |     background-color: #00A693;
110 | }
111 | 
112 | input:focus + .slider {
113 |     box-shadow: 0 0 1px #2196F3;
114 | }
115 | 
116 | input:disabled + .slider {
117 |     opacity: 0.4;
118 | }
119 | 
120 | input:checked + .slider:before {
121 |     -webkit-transform: translateX(26px);
122 |     -ms-transform: translateX(26px);
123 |     transform: translateX(26px);
124 | }
125 | 
126 | /* Rounded sliders */
127 | .slider.round {
128 |     border-radius: 34px;
129 | }
130 | 
131 | .slider.round:before {
132 |     border-radius: 50%;
133 | }
134 | 
135 | p.alert.alert-info {
136 |     margin-top: 8px;
137 | }
138 | 
139 | /* nav-tab */
140 | .btn-success {
141 |     color: #ffffff !important;
142 |     background-color: #5cb85c !important;
143 | }
144 | 
145 | .nav-tabs li a.btn-success:hover,
146 | .nav-tabs li a.btn-success:focus,
147 | .nav-tabs li a.btn-success:active {
148 |     background-color: #438a43 !important;
149 |     color: #ffffff !important;
150 | }
151 | 
152 | .options-container a:hover {
153 |     color: darkgreen;
154 | }
155 | 
156 | .nav-tabs li a {
157 |     border: none !important;
158 |     border-bottom: 1px solid #eeeeee !important;
159 |     border-radius: 0 !important;
160 | }
161 | 
162 | .nav-tabs li a:hover,
163 | .nav-tabs li a:focus,
164 | .nav-tabs li a:active {
165 |     border-bottom: 1px solid #00a693 !important;
166 |     background-color: #ffffff !important;
167 |     color: #00a693 !important;
168 | }
169 | 
170 | .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
171 |     border-bottom: 1px solid #00a693 !important;
172 |     background-color: #ffffff !important;
173 |     color: #00a693 !important;
174 | }
175 | 
176 | .nav-tabs > li.active > a.btn-success, .nav-tabs > li.active > a.btn-success:hover, .nav-tabs > li.active > a.btn-success:focus {
177 |     background-color: #438a43 !important;
178 |     color: #ffffff !important;
179 | }
180 | 
181 | .tooltip {
182 |     width: 130px;
183 | }
184 | 
185 | .tooltiptext {
186 |     background-color: rgba(0, 0, 0, 0.39) !important;
187 | }
188 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Welcome to Vue</title>
  5 |     <script src="node_modules/vue/dist/vue.js"></script>
  6 |     <script src="node_modules/jquery/dist/jquery.js"></script>
  7 | 
  8 |     <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
  9 | 
 10 |     <script src="node_modules/persian-date/dist/persian-date.js"></script>
 11 |     <script src="node_modules/persian-datepicker/dist/js/persian-datepicker.js"></script>
 12 |     <link rel="stylesheet" type="text/css" href="node_modules/persian-datepicker/dist/css/persian-datepicker.css">
 13 | 
 14 |     <link rel="stylesheet" type="text/css" href="css/datepicker.css">
 15 |     <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">
 16 | 
 17 |     <!-- <style>
 18 |          .options-container {
 19 |              height: 500px;
 20 |              overflow: scroll;
 21 |          }
 22 |      </style>-->
 23 | </head>
 24 | <body>
 25 | 
 26 | 
 27 | <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
 28 |     <div class="container-fluid">
 29 |         <div class="navbar-header">
 30 | 
 31 |             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 32 |                 <span class="icon-bar"></span>
 33 |                 <span class="icon-bar"></span>
 34 |                 <span class="icon-bar"></span>
 35 |             </button>
 36 | 
 37 |             <a class="navbar-brand" href="#">Vue persian datepicker</a>
 38 |         </div>
 39 |     </div>
 40 | </nav>
 41 | 
 42 | <div class="container-fluid datepicker-main">
 43 |     <div class="container-fluid">
 44 |         <div class="row content">
 45 |             <div id="app">
 46 |                 <div class="row">
 47 |                     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
 48 |                         <div class="datepicker-demo-box">
 49 |                             <div class="form-group">
 50 |                                 <label>altField:</label>
 51 |                                 <input readonly class="form-control" id="altfieldExample"/>
 52 |                             </div>
 53 |                             <div class="form-group">
 54 |                                 <label>Field:</label>
 55 |                                 <datepicker v-on:eventcalled="eventcalled"
 56 |                                             v-bind:options="datepickerOptions"></datepicker>
 57 |                             </div>
 58 |                         </div>
 59 |                     </div>
 60 |                     <div class="col-xs-12 col-sm-8 col-md-8  col-lg-9 options-container">
 61 |                         <div>
 62 | 
 63 |                             <!-- Nav tabs -->
 64 |                             <ul id="configTab" class="nav nav-tabs" role="tablist">
 65 |                                 <li role="presentation" class="active">
 66 |                                     <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
 67 |                                         General
 68 |                                     </a>
 69 |                                 </li>
 70 |                                 <li role="presentation">
 71 |                                     <a href="#calendar" aria-controls="calednar" role="tab" data-toggle="tab">
 72 |                                         Calendar
 73 |                                     </a>
 74 |                                 </li>
 75 |                                 <li role="presentation">
 76 |                                     <a href="#timesettings" aria-controls="timesettings" role="tab" ata-toggle="tab">
 77 |                                         Pickers
 78 |                                     </a>
 79 |                                 </li>
 80 |                                 <li role="presentation">
 81 |                                     <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
 82 |                                         Navigator
 83 |                                     </a>
 84 |                                 </li>
 85 |                                 <!--<li role="presentation">-->
 86 |                                 <!--<a href="#setting" aria-controls="setting" role="tab" data-toggle="tab">-->
 87 |                                 <!--Timepicker-->
 88 |                                 <!--</a>-->
 89 |                                 <!--</li>-->
 90 |                                 <li role="presentation">
 91 |                                     <a href="#calender" aria-controls="calender" role="tab"
 92 |                                        data-toggle="tab">
 93 |                                         Toolbox
 94 |                                     </a>
 95 |                                 </li>
 96 |                                 <li role="presentation">
 97 |                                     <a href="#template" aria-controls="template" role="tab"
 98 |                                        data-toggle="tab">
 99 |                                         Template
100 |                                     </a>
101 |                                 </li>
102 |                                 <li role="presentation">
103 |                                     <a href="#eventsbox" aria-controls="eventsbox" role="tab"
104 |                                        data-toggle="tab">
105 |                                         event
106 |                                     </a>
107 |                                 </li>
108 |                                 <li role="presentation">
109 |                                     <a class="btn-success" href="#messages" aria-controls="messages" role="tab"
110 |                                        data-toggle="tab">
111 |                                         Get Configuration
112 |                                     </a>
113 |                                 </li>
114 | 
115 | 
116 |                             </ul>
117 | 
118 |                             <!-- Tab panes -->
119 |                             <div class="tab-content">
120 |                                 <div role="tabpanel" class="tab-pane" id="calendar">
121 |                                     <div class="panel-body">
122 |                                         <div class="row">
123 |                                             <div class="col-xs-12">
124 |                                                 <div class="form-group">
125 |                                                     <label>calendarType:</label>
126 |                                                     <select v-model="datepickerOptions.calendarType"
127 |                                                             class="form-control">
128 |                                                         <option>persian</option>
129 |                                                         <option>gregorian</option>
130 |                                                     </select>
131 |                                                     <p class="alert alert-info margin-top">
132 |                                                         set default calendar mode of datepicker, available options:
133 |                                                         'persian', 'gregorian'
134 |                                                     </p>
135 |                                                 </div>
136 |                                             </div>
137 | 
138 |                                             <div class="col-xs-6">
139 |                                                 <div class="form-group">
140 |                                                     <label>persian showHint:</label>
141 |                                                     <div>
142 |                                                         <label class="switch">
143 |                                                             <input type="checkbox"
144 |                                                                    v-model="datepickerOptions.calendar.persian.showHint">
145 |                                                             <span class="slider" data-toggle="tooltip"
146 |                                                                   data-placement="bottom"
147 |                                                                   title="right someThings here!"></span>
148 |                                                         </label>
149 |                                                     </div>
150 |                                                     <p class="alert alert-info margin-top">
151 |                                                         if set true, small date hint of this calendar will be shown on
152 |                                                         another calendar
153 |                                                     </p>
154 |                                                 </div>
155 |                                                 <div class="form-group">
156 |                                                     <label for="sel1">persian locale:</label>
157 |                                                     <select v-model="datepickerOptions.calendar.persian.locale"
158 |                                                             class="form-control">
159 |                                                         <option>fa</option>
160 |                                                         <option>en</option>
161 |                                                     </select>
162 |                                                     <p class="alert alert-info margin-top">
163 |                                                         set locale of calendar available options: 'fa', 'en'
164 |                                                     </p>
165 |                                                 </div>
166 | 
167 |                                                 <div class="form-group">
168 |                                                     <label for="sel1">persian locale:</label>
169 |                                                     <select v-model="datepickerOptions.calendar.persian.leapYearMode"
170 |                                                             class="form-control">
171 |                                                         <option>algorithmic</option>
172 |                                                         <option>astronomical</option>
173 |                                                     </select>
174 |                                                     <p class="alert alert-info margin-top">
175 |                                                         if set true, small date hint of this calendar will be shown on
176 |                                                         another calendar
177 |                                                     </p>
178 |                                                 </div>
179 |                                             </div>
180 |                                             <div class="col-xs-6">
181 |                                                 <div class="form-group">
182 | 
183 |                                                     <div class="row">
184 |                                                         <label class="col-xs-12">gregorian showHint:</label>
185 |                                                     </div>
186 |                                                     <div>
187 |                                                         <label class="switch">
188 |                                                             <input type="checkbox"
189 |                                                                    v-model="datepickerOptions.calendar.gregorian.showHint">
190 |                                                             <span class="slider" data-toggle="tooltip"
191 |                                                                   data-placement="bottom"
192 |                                                                   title="right someThings here!"></span>
193 |                                                         </label>
194 |                                                     </div>
195 |                                                     <p class="alert alert-info margin-top">
196 |                                                         if set true, small date hint of this calendar will be shown on
197 |                                                         another calendar
198 |                                                     </p>
199 |                                                 </div>
200 |                                                 <div class="form-group">
201 |                                                     <label for="sel1">gregorian locale:</label>
202 |                                                     <select v-model="datepickerOptions.calendar.gregorian.locale"
203 |                                                             class="form-control" id="sel1">
204 |                                                         <option>fa</option>
205 |                                                         <option>en</option>
206 |                                                     </select>
207 |                                                     <p class="alert alert-info margin-top">
208 |                                                         set locale of calendar available options: 'fa', 'en'
209 |                                                     </p>
210 |                                                 </div>
211 |                                             </div>
212 |                                         </div>
213 |                                     </div>
214 |                                 </div>
215 |                                 <div role="tabpanel" class="tab-pane active" id="home">
216 |                                     <div class="panel-body">
217 |                                         <div class="row">
218 |                                             <div class="form-group col-xs-6">
219 |                                                 <label>inline:</label>
220 |                                                 <div>
221 |                                                     <label class="switch">
222 |                                                         <input type="checkbox" v-model="datepickerOptions.inline"
223 |                                                                type="checkbox">
224 |                                                         <span class="slider" data-toggle="tooltip"
225 |                                                               data-placement="bottom"
226 |                                                               title="right someThings here!"></span>
227 |                                                     </label>
228 |                                                 </div>
229 | 
230 |                                                 <p class="alert alert-info margin-top">
231 |                                                     if true datepicker render inline
232 |                                                 </p>
233 | 
234 |                                             </div>
235 | 
236 |                                             <div class="form-group col-xs-6">
237 |                                                 <label>responsive:</label>
238 |                                                 <div>
239 |                                                     <label class="switch">
240 |                                                         <input type="checkbox"
241 |                                                                v-model="datepickerOptions.responsive"
242 |                                                                type="checkbox">
243 |                                                         <span class="slider" data-toggle="tooltip"
244 |                                                               data-placement="bottom"
245 |                                                               title="right someThings here!"></span>
246 |                                                     </label>
247 |                                                 </div>
248 |                                                 <p class="alert alert-info margin-top">
249 |                                                     if set true make enable responsive view on mobile devices
250 |                                                 </p>
251 |                                             </div>
252 | 
253 |                                             <div class="form-group col-xs-6">
254 |                                                 <label>autoClose:</label>
255 |                                                 <div>
256 |                                                     <label class="switch">
257 |                                                         <input :disabled="datepickerOptions.inline"
258 |                                                                v-model="datepickerOptions.autoClose"
259 |                                                                type="checkbox">
260 |                                                         <span class="slider"></span>
261 |                                                     </label>
262 |                                                 </div>
263 |                                                 <p class="alert alert-info margin-top">
264 |                                                     If true picker close When select a date
265 |                                                 </p>
266 |                                             </div>
267 | 
268 |                                             <div class="form-group col-xs-6">
269 |                                                 <label>onlySelectOnDate:</label>
270 |                                                 <div>
271 |                                                     <label class="switch">
272 |                                                         <input type="checkbox"
273 |                                                                v-model="datepickerOptions.onlySelectOnDate">
274 |                                                         <span class="slider"></span>
275 |                                                     </label>
276 |                                                 </div>
277 |                                                 <p class="alert alert-info margin-top">
278 |                                                     if true date select just by click on day in month grid, and when
279 |                                                     user select month or year selected date doesnt change
280 |                                                 </p>
281 |                                             </div>
282 |                                             <div class="row">
283 |                                                 <div class="col-xs-12">
284 |                                                     <div class="form-group col-xs-6">
285 |                                                         <label for="sel1">viewMode:</label>
286 |                                                         <select v-model="datepickerOptions.viewMode"
287 |                                                                 class="form-control">
288 |                                                             <option>day</option>
289 |                                                             <option>month</option>
290 |                                                             <option>year</option>
291 |                                                         </select>
292 |                                                         <p class="alert alert-info">
293 |                                                             default view mode, Acceptable value : day,month,year
294 |                                                         </p>
295 |                                                     </div>
296 |                                                     <div class="form-group col-xs-6">
297 |                                                         <label>initialValue:</label>
298 |                                                         <div>
299 |                                                             <label class="switch">
300 |                                                                 <input type="checkbox"
301 |                                                                        v-model="datepickerOptions.initialValue">
302 |                                                                 <span class="slider"></span>
303 |                                                             </label>
304 |                                                         </div>
305 |                                                         <p class="alert alert-info margin-top">
306 |                                                             If set true datepicker init with input value date
307 |                                                         </p>
308 |                                                     </div>
309 |                                                 </div>
310 |                                             </div>
311 |                                             <div class="form-group col-xs-6">
312 |                                                 <label>format:</label>
313 |                                                 <input :disabled="datepickerOptions.inline" class="form-control"
314 |                                                        v-model="datepickerOptions.format"/>
315 |                                                 <p class="alert alert-info">
316 |                                                     Default input value formatt string.
317 |                                                 </p>
318 |                                             </div>
319 |                                             <div class="form-group col-xs-6">
320 |                                                 <label>altFormat:</label>
321 |                                                 <input class="form-control" v-model="datepickerOptions.altFormat"/>
322 |                                                 <p class="alert alert-info">
323 |                                                     Default input value formatt string.
324 |                                                 </p>
325 |                                             </div>
326 | 
327 |                                             <div class="form-group col-xs-6">
328 |                                                 <label>minDate:</label>
329 |                                                 <input class="form-control" v-model="datepickerOptions.minDate"/>
330 |                                                 <p class="alert alert-info">
331 |                                                     set min date on datepicker, prevent user select date before
332 |                                                     given
333 |                                                     unix time
334 |                                                 </p>
335 |                                             </div>
336 | 
337 |                                             <div class="form-group col-xs-6">
338 |                                                 <label>maxDate:</label>
339 |                                                 <input class="form-control" v-model="datepickerOptions.maxDate"/>
340 |                                                 <p class="alert alert-info">
341 |                                                     set max date on datepicker, prevent user select date after given
342 |                                                     unix time
343 |                                                 </p>
344 |                                             </div>
345 | 
346 | 
347 |                                             <div class="form-group col-xs-12">
348 |                                                 <label>postion:</label>
349 |                                                 <input class="form-control" v-model="datepickerOptions.position"/>
350 |                                                 <p class="alert alert-info">
351 |                                                     position of datepicker element relative to input element, accept
352 |                                                     auto, [x,y]
353 |                                                 </p>
354 |                                             </div>
355 | 
356 |                                             <div class="form-group col-xs-6">
357 |                                                 <label>observer:</label>
358 |                                                 <div>
359 |                                                     <label class="switch">
360 |                                                         <input type="checkbox"
361 |                                                                :disabled="datepickerOptions.inline"
362 |                                                                v-model="datepickerOptions.observer">
363 |                                                         <span class="slider"></span>
364 |                                                     </label>
365 |                                                 </div>
366 |                                                 <p class="alert alert-info margin-top">
367 |                                                     if true datepicker update self by user inputted date string,
368 |                                                     accept
369 |                                                     'yyyy/mm/dd' example: '1396/10/2', '1396/1/12'
370 |                                                 </p>
371 |                                             </div>
372 | 
373 |                                             <div class="form-group col-xs-6">
374 |                                                 <label>inputDelay:</label>
375 |                                                 <input class="form-control"
376 |                                                        :disabled="datepickerOptions.inline"
377 |                                                        v-model="datepickerOptions.inputDelay"/>
378 |                                                 <p class="alert alert-info">
379 |                                                     waite time for last user key-down event, accept millisecond
380 |                                                 </p>
381 |                                             </div>
382 |                                         </div>
383 |                                     </div>
384 |                                 </div>
385 |                                 <div role="tabpanel" class="tab-pane" id="profile">
386 |                                     <div class="panel-body">
387 |                                         <div class="row">
388 |                                             <div class="form-group col-xs-6">
389 |                                                 <label>Navigator enabled:</label>
390 |                                                 <div>
391 |                                                     <label class="switch">
392 |                                                         <input :disabled="datepickerOptions.onlyTimePicker"
393 |                                                                type="checkbox"
394 |                                                                v-model="datepickerOptions.navigator.enabled"
395 |                                                                type="checkbox">
396 |                                                         <span class="slider"></span>
397 |                                                     </label>
398 |                                                 </div>
399 | 
400 |                                                 <p class="alert alert-info">
401 |                                                     make navigator enable or disable
402 |                                                 </p>
403 | 
404 |                                             </div>
405 |                                             <div class="form-group col-xs-6">
406 |                                                 <label>Navigator Scroll enabled:</label>
407 |                                                 <div>
408 |                                                     <label class="switch">
409 |                                                         <input type="checkbox"
410 |                                                                v-model="datepickerOptions.navigator.scroll.enabled"
411 |                                                                type="checkbox">
412 |                                                         <span class="slider"></span>
413 |                                                     </label>
414 |                                                 </div>
415 |                                                 <p class="alert alert-info">
416 |                                                     if you want make disable scroll navigation set this option false
417 |                                                 </p>
418 |                                             </div>
419 |                                             <div class="form-group col-xs-6">
420 |                                                 <label>next button text:</label>
421 |                                                 <input type="text"
422 |                                                        v-model="datepickerOptions.navigator.text.btnNextText"/>
423 |                                                 <p class="alert alert-info">
424 |                                                     text of next button
425 |                                                 </p>
426 |                                             </div>
427 |                                             <div class="form-group col-xs-6">
428 |                                                 <label>previews button text:</label>
429 |                                                 <input type="text"
430 |                                                        v-model="datepickerOptions.navigator.text.btnPrevText"/>
431 |                                                 <p class="alert alert-info">
432 |                                                     text of previews button
433 |                                                 </p>
434 |                                             </div>
435 |                                         </div>
436 |                                     </div>
437 |                                 </div>
438 | 
439 | 
440 |                                 <div role="tabpanel" class="tab-pane" id="timesettings">
441 |                                     <div class="panel-body">
442 |                                         <div class="row">
443 |                                             <div class="col-xs-4">
444 |                                                 <div class="form-group">
445 |                                                     <label>yearPicker:</label>
446 |                                                     <div>
447 |                                                         <label class="switch">
448 |                                                             <input type="checkbox"
449 |                                                                    v-model="datepickerOptions.yearPicker.enabled">
450 |                                                             <span class="slider"></span>
451 |                                                         </label>
452 |                                                     </div>
453 |                                                     <p class="alert alert-info margin-top ">
454 |                                                         make yearPicker enable or disable
455 |                                                     </p>
456 |                                                 </div>
457 |                                                 <div class="form-group">
458 |                                                     <label>yearPicker TitleFormat:</label>
459 |                                                     <div>
460 |                                                         <input class="form-control"
461 |                                                                v-model="datepickerOptions.yearPicker.titleFormat"/>
462 |                                                     </div>
463 |                                                     <p class="alert alert-info margin-top ">
464 |                                                         YearPicker title format string
465 |                                                     </p>
466 |                                                 </div>
467 |                                             </div>
468 | 
469 | 
470 |                                             <div class="col-xs-4">
471 |                                                 <div class="form-group">
472 |                                                     <label>monthPicker:</label>
473 |                                                     <div>
474 |                                                         <label class="switch">
475 |                                                             <input type="checkbox"
476 |                                                                    v-model="datepickerOptions.monthPicker.enabled">
477 |                                                             <span class="slider"></span>
478 |                                                         </label>
479 |                                                     </div>
480 |                                                     <p class="alert alert-info margin-top ">
481 |                                                         make monthPicker enable or disable
482 |                                                     </p>
483 |                                                 </div>
484 | 
485 |                                                 <div class="form-group">
486 |                                                     <label>monthPicker TitleFormat:</label>
487 |                                                     <div>
488 |                                                         <input class="form-control"
489 |                                                                v-model="datepickerOptions.monthPicker.titleFormat"/>
490 |                                                     </div>
491 |                                                     <p class="alert alert-info margin-top ">
492 |                                                         MonthPicker title format string
493 |                                                     </p>
494 |                                                 </div>
495 | 
496 |                                             </div>
497 | 
498 | 
499 |                                             <div class="col-xs-4">
500 |                                                 <div class="form-group">
501 |                                                     <label>dayPicker:</label>
502 |                                                     <div>
503 |                                                         <label class="switch">
504 |                                                             <input type="checkbox"
505 |                                                                    v-model="datepickerOptions.dayPicker.enabled">
506 |                                                             <span class="slider"></span>
507 |                                                         </label>
508 |                                                     </div>
509 |                                                     <p class="alert alert-info margin-top ">
510 |                                                         make datePicker enable or disable
511 |                                                     </p>
512 |                                                 </div>
513 | 
514 |                                                 <div class="form-group">
515 |                                                     <label>dayPicker TitleFormat:</label>
516 |                                                     <div>
517 |                                                         <input class="form-control"
518 |                                                                v-model="datepickerOptions.dayPicker.titleFormat"/>
519 |                                                     </div>
520 |                                                     <p class="alert alert-info margin-top ">
521 |                                                         DayPicker title format string
522 |                                                     </p>
523 |                                                 </div>
524 |                                             </div>
525 |                                         </div>
526 | 
527 |                                         <h3>Timepicker</h3>
528 |                                         <div class="row">
529 | 
530 |                                             <div class="form-group col-xs-6">
531 |                                                 <label>onlyTimePicker:</label>
532 |                                                 <div>
533 |                                                     <label class="switch">
534 |                                                         <input type="checkbox"
535 |                                                                v-model="datepickerOptions.onlyTimePicker">
536 |                                                         <span class="slider"></span>
537 |                                                     </label>
538 |                                                 </div>
539 |                                                 <p class="alert alert-info margin-top ">
540 |                                                     if true all pickers hide and just show timepicker
541 |                                                 </p>
542 |                                             </div>
543 | 
544 |                                             <div class="form-group col-xs-6">
545 |                                                 <label>timPicker:</label>
546 |                                                 <div>
547 |                                                     <label class="switch">
548 |                                                         <input type="checkbox"
549 |                                                                v-model="datepickerOptions.timePicker.enabled">
550 |                                                         <span class="slider"></span>
551 |                                                     </label>
552 |                                                 </div>
553 |                                                 <p class="alert alert-info margin-top ">
554 |                                                     make timePicker enable or disable
555 |                                                 </p>
556 |                                             </div>
557 |                                             <div class="col-xs-4">
558 |                                                 <div class="form-group">
559 |                                                     <label>timePicker hour:</label>
560 |                                                     <div>
561 |                                                         <label class="switch">
562 |                                                             <input type="checkbox"
563 |                                                                    v-model="datepickerOptions.timePicker.hour.enabled">
564 |                                                             <span class="slider"></span>
565 |                                                         </label>
566 |                                                     </div>
567 |                                                 </div>
568 |                                                 <div class="form-group">
569 |                                                     <label>timePicker hour step:</label>
570 |                                                     <div>
571 |                                                         <input class="form-control"
572 |                                                                v-model="datepickerOptions.timePicker.hour.step"/>
573 |                                                     </div>
574 |                                                     <p class="alert alert-info margin-top ">
575 |                                                         Hour section step
576 |                                                     </p>
577 |                                                 </div>
578 |                                             </div>
579 |                                             <div class="col-xs-4">
580 |                                                 <div class="form-group">
581 |                                                     <label>timePicker minute:</label>
582 |                                                     <div>
583 |                                                         <label class="switch">
584 |                                                             <input type="checkbox"
585 |                                                                    v-model="datepickerOptions.timePicker.minute.enabled">
586 |                                                             <span class="slider"></span>
587 |                                                         </label>
588 |                                                     </div>
589 |                                                 </div>
590 | 
591 |                                                 <div class="form-group">
592 |                                                     <label>timePicker minute step:</label>
593 |                                                     <div>
594 |                                                         <input class="form-control"
595 |                                                                v-model="datepickerOptions.timePicker.minute.step"/>
596 |                                                     </div>
597 |                                                     <p class="alert alert-info margin-top ">
598 |                                                         minute section step
599 |                                                     </p>
600 |                                                 </div>
601 | 
602 | 
603 |                                             </div>
604 | 
605 |                                             <div class="col-xs-4">
606 |                                                 <div class="form-group">
607 |                                                     <label>timePicker second:</label>
608 |                                                     <div>
609 |                                                         <label class="switch">
610 |                                                             <input type="checkbox"
611 |                                                                    v-model="datepickerOptions.timePicker.second.enabled">
612 |                                                             <span class="slider"></span>
613 |                                                         </label>
614 |                                                     </div>
615 |                                                 </div>
616 | 
617 |                                                 <div class="form-group">
618 |                                                     <label>timePicker second step:</label>
619 |                                                     <div>
620 |                                                         <input class="form-control"
621 |                                                                v-model="datepickerOptions.timePicker.second.step"/>
622 |                                                     </div>
623 |                                                     <p class="alert alert-info margin-top ">
624 |                                                         second section step
625 |                                                     </p>
626 |                                                 </div>
627 |                                             </div>
628 |                                         </div>
629 |                                         <div class="form-group col-xs-6">
630 |                                             <label>timepicker Meridian:</label>
631 |                                             <div>
632 |                                                 <label class="switch">
633 |                                                     <input type="checkbox"
634 |                                                            v-model="datepickerOptions.timePicker.meridian.enabled">
635 |                                                     <span class="slider"></span>
636 |                                                 </label>
637 |                                             </div>
638 |                                             <p class="alert alert-info">
639 |                                                 if you set this as false, datepicker timepicker system moved to 24-hour
640 |                                                 system
641 |                                             </p>
642 |                                         </div>
643 |                                         <div class="form-group col-xs-6">
644 |                                             <label>Time Picker Step:</label>
645 |                                             <input class="form-control"
646 |                                                    v-model="datepickerOptions.timePicker.step"/>
647 |                                             <p class="alert alert-info">
648 |                                                 Time section step
649 |                                             </p>
650 |                                         </div>
651 | 
652 | 
653 |                                     </div>
654 |                                 </div>
655 | 
656 |                                 <div role="tabpanel" class="tab-pane" id="calender">
657 | 
658 |                                     <div class="panel-body">
659 |                                         <div class="row">
660 |                                             <div class="form-group col-xs-12">
661 |                                                 <label>Toolbox enabled:</label>
662 |                                                 <div>
663 |                                                     <label class="switch">
664 |                                                         <input type="checkbox"
665 |                                                                v-model="datepickerOptions.toolbox.enabled">
666 |                                                         <span class="slider"></span>
667 |                                                     </label>
668 |                                                 </div>
669 |                                                 <p class="alert alert-info">
670 |                                                     boolean option that make toolbar enable or disable
671 |                                                 </p>
672 |                                             </div>
673 |                                         </div>
674 |                                         <div class="row">
675 |                                             <div class="form-group col-xs-4">
676 |                                                 <label>todayButton enabled:</label>
677 |                                                 <div>
678 |                                                     <label class="switch">
679 |                                                         <input type="checkbox"
680 |                                                                v-model="datepickerOptions.toolbox.todayButton.enabled">
681 |                                                         <span class="slider"></span>
682 |                                                     </label>
683 |                                                 </div>
684 |                                                 <p class="alert alert-info">
685 |                                                     toolbox today button enable or disable
686 |                                                 </p>
687 |                                             </div>
688 | 
689 |                                             <div class="form-group col-xs-4">
690 |                                                 <label>today button fa text:</label>
691 |                                                 <input class="form-control"
692 |                                                        v-model="datepickerOptions.toolbox.todayButton.text.fa"/>
693 |                                                 <p class="alert alert-info">
694 |                                                     show when current calendar is Persian
695 |                                                 </p>
696 |                                             </div>
697 | 
698 |                                             <div class="form-group col-xs-4">
699 |                                                 <label>today button en text:</label>
700 |                                                 <input class="form-control"
701 |                                                        v-model="datepickerOptions.toolbox.todayButton.text.en"/>
702 |                                                 <p class="alert alert-info">
703 |                                                     show when current calendar is Gregorian
704 |                                                 </p>
705 |                                             </div>
706 |                                         </div>
707 | 
708 |                                         <div class="row">
709 |                                             <div class="form-group col-xs-4">
710 |                                                 <label>submitButton enabled:</label>
711 |                                                 <div>
712 |                                                     <label class="switch">
713 |                                                         <input type="checkbox"
714 |                                                                v-model="datepickerOptions.toolbox.submitButton.enabled">
715 |                                                         <span class="slider"></span>
716 |                                                     </label>
717 |                                                 </div>
718 |                                                 <p class="alert alert-info">
719 |                                                     toolbox submit button enable or disable
720 |                                                 </p>
721 |                                             </div>
722 | 
723 |                                             <div class="form-group col-xs-4">
724 |                                                 <label>submit button fa text:</label>
725 |                                                 <input class="form-control"
726 |                                                        v-model="datepickerOptions.toolbox.submitButton.text.fa"/>
727 |                                                 <p class="alert alert-info">
728 |                                                     show when current calendar is Persian
729 |                                                 </p>
730 |                                             </div>
731 | 
732 |                                             <div class="form-group col-xs-4">
733 |                                                 <label>submit button en text:</label>
734 |                                                 <input class="form-control"
735 |                                                        v-model="datepickerOptions.toolbox.submitButton.text.en"/>
736 |                                                 <p class="alert alert-info">
737 |                                                     show when current calendar is Gregorian
738 |                                                 </p>
739 |                                             </div>
740 |                                         </div>
741 | 
742 |                                         <div class="row">
743 |                                             <div class="form-group col-xs-6">
744 |                                                 <label>Enabled Calendar Switch:</label>
745 |                                                 <div>
746 |                                                     <label class="switch">
747 |                                                         <input :disabled="datepickerOptions.onlyTimePicker"
748 |                                                                type="checkbox"
749 |                                                                v-model="datepickerOptions.toolbox.calendarSwitch.enabled"
750 |                                                                type="checkbox">
751 |                                                         <span class="slider"></span>
752 |                                                     </label>
753 |                                                 </div>
754 |                                                 <p class="alert alert-info">
755 |                                                     make calendar switch enable or disable
756 |                                                 </p>
757 |                                             </div>
758 |                                             <div class="form-group col-xs-4">
759 |                                                 <label>calendarSwitch text format string:</label>
760 |                                                 <input class="form-control"
761 |                                                        v-model="datepickerOptions.toolbox.calendarSwitch.format"/>
762 |                                                 <p class="alert alert-info">
763 |                                                     calendar switch text format string
764 |                                                 </p>
765 |                                             </div>
766 |                                         </div>
767 |                                     </div>
768 |                                 </div>
769 |                                 <div role="tabpanel" class="tab-pane" id="eventsbox">
770 |                                     <div class="panel-body">
771 |                                         <textarea class="form-control"
772 |                                                   rows="20"
773 |                                                   v-model="eventsLog"></textarea>
774 |                                     </div>
775 |                                 </div>
776 |                                 <div role="tabpanel" class="tab-pane" id="template">
777 |                                     <div class="panel-body">
778 |                                         <textarea class="form-control"
779 |                                                   rows="20"
780 |                                                   v-model="datepickerOptions.template"></textarea>
781 |                                     </div>
782 |                                 </div>
783 |                                 <div role="tabpanel" class="tab-pane" id="messages">
784 |                                     <div class="panel-body">
785 |                                         <textarea class="form-control" rows="20">{{datepickerOptions}}</textarea>
786 |                                     </div>
787 |                                 </div>
788 |                             </div>
789 |                         </div>
790 |                     </div>
791 |                 </div>
792 |             </div>
793 |         </div>
794 |     </div>
795 | </div>
796 | <footer class="datepicker-footer">
797 |     <p>vue persian datepicker created by <a
798 |             href="https://github.com/bitaedalati">bita edalati</a>
799 |         <a class="header-logo-invertocat pull-right" href="https://github.com/bitaedalati" data-hotkey="g d"
800 |            aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">
801 |             <svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16"
802 |                  width="32">
803 |                 <path fill-rule="evenodd"
804 |                       d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
805 |             </svg>
806 |         </a>
807 |     </p>
808 |     <p>
809 |         <a href="#">Back to top</a>
810 |     </p>
811 | 
812 | 
813 | </footer>
814 | 
815 | <script src="persian-datepicker.js"></script>
816 | <script>
817 |     $(document).ready(function () {
818 |         $('[data-toggle="tooltip"]').tooltip();
819 |     });
820 | </script>
821 | </body>
822 | </html>
823 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-persian-datepiker-playground",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "simple-server 6767",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "author": "bita.edalati@gmail.com",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "simple-server": "*"
14 |   },
15 |   "dependencies": {
16 |     "bootstrap": "^3.3.7",
17 |     "jquery": "^3.2.1",
18 |     "persian-date": "^0.3.0-b",
19 |     "persian-datepicker": "^0.5.11",
20 |     "vue": "^2.4.2",
21 |     "vue-clipboards": "^1.1.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/persian-datepicker.js:
--------------------------------------------------------------------------------
  1 | Vue.component('datepicker', {
  2 |     template: '<div>' +
  3 |     '<div v-if="options.inline"></div>' +
  4 |     '<input class="form-control"  v-else type="text" plcaholder="test" />' +
  5 |     '</div>',
  6 |     props: ['options'],
  7 |     watch: {
  8 |         options: {
  9 |             handler: function (val, oldVal) {
 10 |                 console.log(this.options.inline);
 11 |                 var that = this;
 12 |                 setTimeout(function () {
 13 |                     that.pdatepicker.destroy();
 14 |                     that.pdatepicker = $(that.$el).children('*').persianDatepicker(val);
 15 |                     that.pdatepicker.show();
 16 |                 }, 1);
 17 |             },
 18 |             deep: true
 19 |         },
 20 |     },
 21 |     mounted: function () {
 22 |         let that = this,
 23 |             eventsOptions = {
 24 |                 onSelect: function () {
 25 |                     that.$emit('eventcalled', "onSelect")
 26 |                 },
 27 |                 onShow: function () {
 28 |                     that.$emit('eventcalled', "onShow")
 29 |                 },
 30 |                 onHide: function () {
 31 |                     that.$emit('eventcalled', "onHide")
 32 |                 },
 33 |                 onDestroy: function () {
 34 |                     that.$emit('eventcalled', "onDestroy")
 35 |                 },
 36 |                 dayPicker: {
 37 |                     onSelect: function () {
 38 |                         that.$emit('eventcalled', "dayPicker.onSelect");
 39 |                     }
 40 |                 },
 41 |                 monthPicker: {
 42 |                     onSelect: function () {
 43 |                         that.$emit('eventcalled', "monthPicker.onSelect");
 44 |                     }
 45 |                 },
 46 |                 yearPicker: {
 47 |                     onSelect: function () {
 48 |                         that.$emit('eventcalled', "yearPicker.onSelect");
 49 |                     }
 50 |                 },
 51 |                 navigator: {
 52 |                     onSwitch: function () {
 53 |                         that.$emit('eventcalled', "navigator.onSwitch");
 54 |                     },
 55 |                     onNext: function () {
 56 |                         that.$emit('eventcalled', " navigator.onNext");
 57 |                     },
 58 |                     onPrev: function () {
 59 |                         that.$emit('eventcalled', "navigator.onPrev");
 60 |                     }
 61 | 
 62 |                 },
 63 |                 toolbox: {
 64 |                     todayButton: {
 65 |                         onToday: function () {
 66 |                             that.$emit('eventcalled', "toolbox.todayButton.onToday");
 67 |                         }
 68 |                     },
 69 |                     calendarSwitch: {
 70 |                         onSwitch: function () {
 71 |                             that.$emit('eventcalled', "toolbox.calendarSwitch.onSwitch");
 72 |                         }
 73 |                     },
 74 |                     submitButton: {
 75 |                         onSubmit: function () {
 76 |                             that.$emit('eventcalled', "toolbox.calendarSwitch.onSwitch");
 77 |                         }
 78 |                     }
 79 |                 }
 80 |             };
 81 | 
 82 |         this.pdatepicker = $(this.$el).children('*').persianDatepicker($.extend(true, this.options, eventsOptions));
 83 |     }
 84 | 
 85 | 
 86 | });
 87 | 
 88 | 
 89 | $(document).ready(function () {
 90 |     $('#configTab a').click(function (e) {
 91 |         e.preventDefault();
 92 |         $(this).tab('show');
 93 |     })
 94 | })
 95 | 
 96 | 
 97 | new Vue({
 98 |     deep: true,
 99 |     el: '#app',
100 |     methods: {
101 |         eventcalled: function (eventMessage) {
102 |             let logtime = new persianDate().toCalendar('gregorian').toLocale('en').format('YYYY/MM/DD HH:mm:ss');
103 |             this.eventsLog = logtime + ':  ' + eventMessage + '\n'  + this.eventsLog;
104 |         }
105 |     },
106 |     data: {
107 |         eventsLog: '',
108 |         datepickerOptions: {
109 |             inline: true,
110 |             format: 'l',
111 |             viewMode: 'day',
112 |             persianDigit: true,
113 |             initialValue: true,
114 |             minDate: 1504713660730,
115 |             maxDate: 1604713660730,
116 |             autoClose: false,
117 |             position: 'auto',
118 |             altFormat: 'lll',
119 |             altField: '#altfieldExample',
120 |             onlyTimePicker: false,
121 |             onlySelectOnDate: false,
122 |             calendarType: 'persian',
123 |             inputDelay: 800,
124 |             observer: false,
125 |             calendar: {
126 |                 persian: {
127 |                     locale: 'fa',
128 |                     showHint: true,
129 |                     leapYearMode: 'algorithmic'
130 |                 },
131 |                 gregorian: {
132 |                     locale: 'en',
133 |                     showHint: true
134 |                 }
135 |             },
136 |             navigator: {
137 |                 enabled: true,
138 |                 scroll: {
139 |                     enabled: true
140 |                 },
141 |                 text: {
142 |                     btnNextText: '<',
143 |                     btnPrevText: '>'
144 |                 }
145 |             },
146 |             toolbox: {
147 |                 enabled: true,
148 |                 calendarSwitch: {
149 |                     enabled: true,
150 |                     format: 'MMMM'
151 |                 },
152 |                 todayButton: {
153 |                     enabled: true,
154 |                     text: {
155 |                         fa: 'امروز',
156 |                         en: 'Today',
157 |                     }
158 |                 },
159 |                 submitButton: {
160 |                     enabled: true,
161 |                     text: {
162 |                         fa: 'تایید',
163 |                         en: 'Submit',
164 |                     }
165 |                 },
166 |                 text: {
167 |                     btnToday: 'امروز'
168 |                 }
169 |             },
170 |             timePicker: {
171 |                 enabled: true,
172 |                 step: 1,
173 |                 hour: {
174 |                     enabled: true,
175 |                     step: null
176 |                 },
177 |                 minute: {
178 |                     enabled: true,
179 |                     step: null
180 |                 },
181 |                 second: {
182 |                     enabled: true,
183 |                     step: null
184 |                 },
185 |                 meridian: {
186 |                     enabled: true
187 |                 }
188 |             },
189 |             dayPicker: {
190 |                 enabled: true,
191 |                 titleFormat: 'YYYY MMMM'
192 |             },
193 |             monthPicker: {
194 |                 enabled: true,
195 |                 titleFormat: 'YYYY'
196 |             },
197 |             yearPicker: {
198 |                 enabled: true,
199 |                 titleFormat: 'YYYY'
200 |             },
201 |             template1: 'dsadsad',
202 |             template: `
203 | <div id="plotId" class="datepicker-plot-area {{cssClass}}">
204 |     {{#navigator.enabled}}
205 |         <div data-navigator class="datepicker-navigator">
206 |             <div class="pwt-btn pwt-btn-next">{{navigator.text.btnNextText}}</div>
207 |             <div class="pwt-btn pwt-btn-switch">{{navigator.switch.text}}</div>
208 |             <div class="pwt-btn pwt-btn-prev">{{navigator.text.btnPrevText}}</div>
209 |         </div>
210 |     {{/navigator.enabled}}
211 |     <div class="datepicker-grid-view" >
212 |     {{#days.enabled}}
213 |         {{#days.viewMode}}
214 |         <div class="datepicker-day-view" >    
215 |             <div class="month-grid-box">
216 |                 <div class="header">
217 |                     <div class="title"></div>
218 |                     <div class="header-row">
219 |                         {{#weekdays.list}}
220 |                             <div class="header-row-cell">{{.}}</div>
221 |                         {{/weekdays.list}}
222 |                     </div>
223 |                 </div>    
224 |                 <table cellspacing="0" class="table-days">
225 |                     <tbody>
226 |                         {{#days.list}}
227 |                            
228 |                             <tr>
229 |                                 {{#.}}
230 |                                     {{#enabled}}
231 |                                         <td data-date="{{dataDate}}" data-unix="{{dataUnix}}" >
232 |                                             <span  class="{{#otherMonth}}other-month{{/otherMonth}}">{{title}}</span>
233 |                                             {{#altCalendarShowHint}}
234 |                                             <i  class="alter-calendar-day">{{alterCalTitle}}</i>
235 |                                             {{/altCalendarShowHint}}
236 |                                         </td>
237 |                                     {{/enabled}}
238 |                                     {{^enabled}}
239 |                                         <td data-date="{{dataDate}}" data-unix="{{dataUnix}}" class="disabled">
240 |                                             <span class="{{#otherMonth}}other-month{{/otherMonth}}">{{title}}</span>
241 |                                             {{#altCalendarShowHint}}
242 |                                             <i  class="alter-calendar-day">{{alterCalTitle}}</i>
243 |                                             {{/altCalendarShowHint}}
244 |                                         </td>
245 |                                     {{/enabled}}
246 |                                     
247 |                                 {{/.}}
248 |                             </tr>
249 |                         {{/days.list}}
250 |                     </tbody>
251 |                 </table>
252 |             </div>
253 |         </div>
254 |         {{/days.viewMode}}
255 |     {{/days.enabled}}
256 |     
257 |     {{#month.enabled}}
258 |         {{#month.viewMode}}
259 |             <div class="datepicker-month-view">
260 |                 {{#month.list}}
261 |                     {{#enabled}}               
262 |                         <div data-month="{{dataMonth}}" class="month-item {{#selected}}selected{{/selected}}">{{title}}</small></div>
263 |                     {{/enabled}}
264 |                     {{^enabled}}               
265 |                         <div data-month="{{dataMonth}}" class="month-item month-item-disable {{#selected}}selected{{/selected}}">{{title}}</small></div>
266 |                     {{/enabled}}
267 |                 {{/month.list}}
268 |             </div>
269 |         {{/month.viewMode}}
270 |     {{/month.enabled}}
271 |     
272 |     {{#year.enabled }}
273 |         {{#year.viewMode }}
274 |             <div class="datepicker-year-view" >
275 |                 {{#year.list}}
276 |                     {{#enabled}}
277 |                         <div data-year="{{dataYear}}" class="year-item {{#selected}}selected{{/selected}}">{{title}}</div>
278 |                     {{/enabled}}
279 |                     {{^enabled}}
280 |                         <div data-year="{{dataYear}}" class="year-item year-item-disable {{#selected}}selected{{/selected}}">{{title}}</div>
281 |                     {{/enabled}}                    
282 |                 {{/year.list}}
283 |             </div>
284 |         {{/year.viewMode }}
285 |     {{/year.enabled }}
286 |     
287 |     </div>
288 |     {{#time}}
289 |     {{#enabled}}
290 |     <div class="datepicker-time-view">
291 |         {{#hour.enabled}}
292 |             <div class="hour time-segment" data-time-key="hour">
293 |                 <div class="up-btn" data-time-key="hour">▲</div>
294 |                 <input value="{{hour.title}}" type="text" placeholder="hour" class="hour-input">
295 |                 <div class="down-btn" data-time-key="hour">▼</div>                    
296 |             </div>       
297 |             <div class="divider">
298 |                 <span>:</span>
299 |             </div>
300 |         {{/hour.enabled}}
301 |         {{#minute.enabled}}
302 |             <div class="minute time-segment" data-time-key="minute" >
303 |                 <div class="up-btn" data-time-key="minute">▲</div>
304 |                 <input disabled value="{{minute.title}}" type="text" placeholder="minute" class="minute-input">
305 |                 <div class="down-btn" data-time-key="minute">▼</div>
306 |             </div>        
307 |             <div class="divider second-divider">
308 |                 <span>:</span>
309 |             </div>
310 |         {{/minute.enabled}}
311 |         {{#second.enabled}}
312 |             <div class="second time-segment" data-time-key="second"  >
313 |                 <div class="up-btn" data-time-key="second" >▲</div>
314 |                 <input disabled value="{{second.title}}"  type="text" placeholder="second" class="second-input">
315 |                 <div class="down-btn" data-time-key="second" >▼</div>
316 |             </div>
317 |             <div class="divider meridian-divider"></div>
318 |             <div class="divider meridian-divider"></div>
319 |         {{/second.enabled}}
320 |         {{#meridian.enabled}}
321 |             <div class="meridian time-segment" data-time-key="meridian" >
322 |                 <div class="up-btn" data-time-key="meridian">▲</div>
323 |                 <input disabled value="{{meridian.title}}" type="text" class="meridian-input">
324 |                 <div class="down-btn" data-time-key="meridian">▼</div>
325 |             </div>
326 |         {{/meridian.enabled}}
327 |     </div>
328 |     {{/enabled}}
329 |     {{/time}}
330 |     
331 |     {{#toolbox}}
332 |     {{#enabled}}
333 |     <div class="toolbox">
334 |         {{#toolbox.submitButton.enabled}}
335 |             <div class="pwt-btn-submit">{{submitButtonText}}</div>
336 |         {{/toolbox.submitButton.enabled}}        
337 |         {{#toolbox.todayButton.enabled}}
338 |             <div class="pwt-btn-today">{{todayButtonText}}</div>
339 |         {{/toolbox.todayButton.enabled}}        
340 |         {{#toolbox.calendarSwitch.enabled}}
341 |             <div class="pwt-btn-calendar">{{calendarSwitchText}}</div>
342 |         {{/toolbox.calendarSwitch.enabled}}
343 |     </div>
344 |     {{/enabled}}
345 |     {{^enabled}}
346 |         {{#onlyTimePicker}}
347 |         <div class="toolbox">
348 |             <div class="pwt-btn-exit">{{text.btnExit}}</div>
349 |         </div>
350 |         {{/onlyTimePicker}}
351 |     {{/enabled}}
352 |     {{/toolbox}}
353 | </div>
354 | `
355 |         },
356 |         render: h => h('#App')
357 |     }
358 | 
359 | })


--------------------------------------------------------------------------------