├── .gitignore ├── DatePicker.js ├── LICENSE ├── README.md ├── bower.json ├── datepicker.png ├── index.html ├── package.json └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | /bower_components/ 2 | Thumbs.db 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /DatePicker.js: -------------------------------------------------------------------------------- 1 | /*global require, module, window*/ 2 | 'use strict'; 3 | var DatePicker = function (properties) { 4 | properties = properties || {}; 5 | properties['class'] = properties['class'] || 'ui icon button'; 6 | 7 | var datePicker = {}, 8 | m = window.m || require("mithril"), 9 | Calendar = window.Calendar || require('sm-calendar'), 10 | addEvent, 11 | dateFormat; 12 | 13 | addEvent = function (element, eventName, fn, useCapture) { 14 | if (element.addEventListener) { 15 | element.addEventListener(eventName, fn, useCapture); 16 | } else if (element.attachEvent) { 17 | element.attachEvent(eventName, function () { 18 | fn.apply(element, arguments); 19 | }, useCapture); 20 | } 21 | }; 22 | /* 23 | * Date Format 1.2.3 24 | * (c) 2007-2009 Steven Levithan 25 | * MIT license 26 | * 27 | * Includes enhancements by Scott Trenda 28 | * and Kris Kowal 29 | * 30 | * Accepts a date, a mask, or a date and a mask. 31 | * Returns a formatted version of the given date. 32 | * The date defaults to the current date/time. 33 | * The mask defaults to datePicker.masks.default. 34 | */ 35 | 36 | dateFormat = function () { 37 | var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g, 38 | timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g, 39 | timezoneClip = /[^-+\dA-Z]/g, 40 | pad = function (val, len) { 41 | val = String(val); 42 | len = len || 2; 43 | while (val.length < len) { 44 | val = "0" + val; 45 | } 46 | return val; 47 | }; 48 | 49 | // Regexes and supporting functions are cached through closure 50 | return function (date, mask, utc) { 51 | // You can't provide utc if you skip other args (use the "UTC:" mask prefix) 52 | if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) { 53 | mask = date; 54 | date = undefined; 55 | } 56 | 57 | // Passing date through Date applies Date.parse, if necessary 58 | date = date ? new Date(date) : new Date(); 59 | if (isNaN(date)) { 60 | //throw new SyntaxError("invalid date"); 61 | datePicker.value(''); 62 | datePicker.error('.error'); 63 | return ''; 64 | } 65 | datePicker.error(''); 66 | 67 | mask = String(datePicker.masks[mask] || mask || datePicker.masks["default"]); 68 | 69 | // Allow setting the utc argument via the mask 70 | if (mask.slice(0, 4) == "UTC:") { 71 | mask = mask.slice(4); 72 | utc = true; 73 | } 74 | 75 | var _ = utc ? "getUTC" : "get", 76 | d = date[_ + "Date"](), 77 | D = date[_ + "Day"](), 78 | m = date[_ + "Month"](), 79 | y = date[_ + "FullYear"](), 80 | H = date[_ + "Hours"](), 81 | M = date[_ + "Minutes"](), 82 | s = date[_ + "Seconds"](), 83 | L = date[_ + "Milliseconds"](), 84 | o = utc ? 0 : date.getTimezoneOffset(), 85 | flags = { 86 | d: d, 87 | dd: pad(d), 88 | ddd: datePicker.i18n.dayNames[D], 89 | dddd: datePicker.i18n.dayNames[D + 7], 90 | m: m + 1, 91 | mm: pad(m + 1), 92 | mmm: datePicker.i18n.monthNames[m], 93 | mmmm: datePicker.i18n.monthNames[m + 12], 94 | yy: String(y).slice(2), 95 | yyyy: y, 96 | h: H % 12 || 12, 97 | hh: pad(H % 12 || 12), 98 | H: H, 99 | HH: pad(H), 100 | M: M, 101 | MM: pad(M), 102 | s: s, 103 | ss: pad(s), 104 | l: pad(L, 3), 105 | L: pad(L > 99 ? Math.round(L / 10) : L), 106 | t: H < 12 ? "a" : "p", 107 | tt: H < 12 ? "am" : "pm", 108 | T: H < 12 ? "A" : "P", 109 | TT: H < 12 ? "AM" : "PM", 110 | Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""), 111 | o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4), 112 | S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10] 113 | }; 114 | 115 | datePicker.value(date); 116 | 117 | return mask.replace(token, function ($0) { 118 | return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1); 119 | }); 120 | }; 121 | }(); 122 | 123 | // Some common format strings 124 | datePicker.masks = { 125 | "default": "ddd mmm dd yyyy HH:MM:ss", 126 | shortDate: "m/d/yy", 127 | mediumDate: "mmm d, yyyy", 128 | longDate: "mmmm d, yyyy", 129 | fullDate: "dddd, mmmm d, yyyy", 130 | shortTime: "h:MM TT", 131 | mediumTime: "h:MM:ss TT", 132 | longTime: "h:MM:ss TT Z", 133 | isoDate: "yyyy-mm-dd", 134 | isoTime: "HH:MM:ss", 135 | isoDateTime: "yyyy-mm-dd'T'HH:MM:ss", 136 | isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'" 137 | }; 138 | 139 | // Internationalization strings 140 | datePicker.i18n = properties.i18n || { 141 | dayNames: [ 142 | "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", 143 | "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" 144 | ], 145 | monthNames: [ 146 | "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", 147 | "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" 148 | ] 149 | }; 150 | 151 | datePicker.format = function (date, mask, utc) { 152 | return dateFormat(date, mask, utc); 153 | }; 154 | 155 | datePicker.value = m.prop(''); 156 | datePicker.displayValue = m.prop(''); 157 | datePicker.display = m.prop('none'); 158 | datePicker.time = properties.time === undefined ? true : properties.time; 159 | datePicker.dateformat = properties.dateformat || (datePicker.time ? "mm/dd/yy HH:MM" : "mm/dd/yy"); 160 | datePicker.property = properties.property || m.prop(''); 161 | datePicker.maxdate = properties.maxdate || null; 162 | datePicker.mindate = properties.mindate || null; 163 | datePicker.error = m.prop(''); 164 | datePicker.onchange = properties.onchange || null; 165 | 166 | datePicker.change = function () { 167 | datePicker.display('none'); 168 | datePicker.manual = false; 169 | if (datePicker.onchange) { 170 | datePicker.onchange.call(datePicker, datePicker.value()); 171 | } 172 | }; 173 | 174 | datePicker.setMaxDate = function (date) { 175 | datePicker.maxdate = date || null; 176 | datePicker.calendar.setMaxDate(date); 177 | if (datePicker.getValue()) { 178 | datePicker.setValue(datePicker.getValue()); 179 | } 180 | }; 181 | 182 | datePicker.setMinDate = function (date) { 183 | datePicker.mindate = date || null; 184 | datePicker.calendar.setMinDate(date); 185 | if (datePicker.getValue()) { 186 | datePicker.setValue(datePicker.getValue()); 187 | } 188 | }; 189 | 190 | datePicker.calendar = new Calendar({ 191 | small: true, 192 | onclick: function (date) { 193 | datePicker.setValue(date); 194 | datePicker.change(); 195 | }, 196 | time: datePicker.time, 197 | maxdate: datePicker.maxdate, 198 | mindate: datePicker.mindate, 199 | pageclass: false, 200 | i18n: { 201 | monthsLong: datePicker.i18n.monthNames.slice(12 , 23), 202 | months: datePicker.i18n.monthNames.slice(0 , 12), 203 | daysLong: datePicker.i18n.dayNames.slice(7 , 13), 204 | days: datePicker.i18n.dayNames.slice(0 , 7) 205 | } 206 | }); 207 | 208 | 209 | 210 | datePicker.view = function (props) { 211 | props = props || {}; 212 | datePicker.property = props.property || datePicker.property || m.prop(''); 213 | if (datePicker.property()) { 214 | datePicker.setValue(datePicker.property()); 215 | } 216 | return m('.ui.action.input' + datePicker.error(), { 217 | config: function (el, init) { 218 | if (!init) { 219 | addEvent(window.document, 'click', function (e) { 220 | var node = e.target, 221 | isInside; 222 | isInside = el.contains(node); 223 | if (typeof node.className === 'string' && node.className.indexOf('sm-calendar-arrow') > -1) { 224 | isInside = true; 225 | } 226 | if (!isInside && datePicker.display() === 'block') { 227 | m.startComputation(); 228 | if (!datePicker.manual) { 229 | //datePicker.value(datePicker.calendar.getDate()); 230 | //datePicker.displayValue(datePicker.format(datePicker.calendar.getDate(), "mm/dd/yy HH:MM")); 231 | datePicker.setValue(datePicker.calendar.getDate()); 232 | } 233 | datePicker.change(); 234 | m.endComputation(); 235 | } 236 | }); 237 | window.setTimeout(function () { 238 | if (datePicker.value()) { 239 | if (datePicker.onchange) { 240 | datePicker.onchange.call(datePicker, datePicker.value()); 241 | } 242 | } 243 | }, 1); 244 | } 245 | } 246 | }, [ 247 | m('input[type="text"][placeholder="' + (properties.placeholder || '') + '"]', { 248 | onfocus: function () { 249 | if (this.value) { 250 | datePicker.setValue(this.value); 251 | datePicker.calendar.goToDate(datePicker.value() || new Date()); 252 | } 253 | datePicker.display('block'); 254 | }, 255 | value: datePicker.displayValue(), 256 | onkeydown: function (evt) { 257 | evt = evt || window.event; 258 | if (evt.keyCode == 27) { 259 | datePicker.change(); 260 | } else { 261 | m.redraw.strategy("none"); 262 | } 263 | }, 264 | onchange: function () { 265 | datePicker.setValue(this.value); 266 | datePicker.manual = true; 267 | }, 268 | config: function (el) { 269 | if (datePicker.display() === 'block') { 270 | el.selectionStart = el.value.length; 271 | } 272 | } 273 | }), 274 | m('.sm-calendar', { 275 | style: 'display:' + datePicker.display() + ';position:absolute;left:4px;top:35px;background-color:#fff;border:1px solid gray;z-index:100;border-radius:0 0 5px 5px;box-shadow:2px 2px 3px gray;min-width:321px;' 276 | }, datePicker.calendar.view()), 277 | m('button', { 278 | class: properties['class'], 279 | onclick: function (e) { 280 | e.preventDefault(); 281 | this.previousSibling.previousSibling.focus(); 282 | } 283 | }, [ 284 | m('i.calendar.icon') 285 | ]) 286 | ]); 287 | }; 288 | 289 | datePicker.getValue = function () { 290 | return datePicker.value(); 291 | }; 292 | 293 | datePicker.setValue = function (date) { 294 | datePicker.displayValue(datePicker.format(date, datePicker.dateformat)); 295 | var cdate = datePicker.value(); 296 | if (cdate && (datePicker.mindate && +cdate < +datePicker.mindate) || (datePicker.maxdate && +cdate > +datePicker.maxdate)) { 297 | datePicker.setValue('a'); 298 | datePicker.error('.error'); 299 | return; 300 | } 301 | datePicker.property(datePicker.value()); 302 | }; 303 | 304 | datePicker.setProperty = function (prop) { 305 | datePicker.property = prop; 306 | }; 307 | 308 | return datePicker; 309 | }; 310 | if (typeof module !== 'undefined' && module.exports) { 311 | module.exports = DatePicker; 312 | } 313 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ivan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sm-datepicker 2 | Mithril semantic-ui datepicker widget 3 | 4 | It requires [mithril](https://github.com/lhorie/mithril.js), sm-calendar, semantic-ui-table, semantic-ui-input, semantic-ui-icon and semantic-ui-grid 5 | 6 | It is expected for mithril to be in global (m variable) or it will attempt to load it with `require('mithril')`, same for sm-calendar, [webpack](http://webpack.github.io/docs/) its recommended 7 | 8 | ![Alt text](datepicker.png) 9 | 10 | ## Demo 11 | 12 | [Demo](http://pinguxx.github.io/sm-datepicker/) 13 | 14 | ```html 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ``` 36 | 37 | ```JavaScript 38 | (function (m, DatePicker) { 39 | var module = {}; 40 | 41 | 42 | module.controller = function () { 43 | module.vm.init(); 44 | var ctrl = this; 45 | this.datepicker = new DatePicker(); 46 | this.datepicker2 = new DatePicker({ 47 | time: false 48 | }); 49 | this.datepicker3 = new DatePicker({ 50 | placeholder: 'Start Date', 51 | onchange: function (date) { 52 | ctrl.datepicker4.setMinDate(date); 53 | } 54 | }); 55 | this.datepicker4 = new DatePicker({ 56 | placeholder: 'End Date', 57 | onchange: function (date) { 58 | ctrl.datepicker3.setMaxDate(date); 59 | } 60 | }); 61 | }; 62 | 63 | module.vm = {}; 64 | module.vm.init = function () { 65 | this.dates = m.prop({ 66 | start: m.prop(), 67 | end: m.prop(new Date()) 68 | }); 69 | }; 70 | 71 | 72 | module.view = function (ctrl) { 73 | return m('', [ 74 | m('.ui.grid.page', [ 75 | m('br'), 76 | m('h1.ui.dividing.header', 'Datepicker Widget') 77 | ]), 78 | m('.ui.grid.page', [ 79 | m('h2', 'Basic Datepicker'), 80 | m('.row', [ 81 | m('.column.four.wide', [ 82 | ctrl.datepicker.view() 83 | ]), 84 | m('.column.two.wide', [ 85 | m('button.ui.button.primary', { 86 | onclick: function() { 87 | console.log(ctrl.datepicker.getValue()); 88 | } 89 | }, 'get') 90 | ]) 91 | ]) 92 | ]), 93 | m('.ui.grid.page.form', [ 94 | m('h2', 'Form datepicker & no time'), 95 | m('.row', [ 96 | m('.ui.column.five.wide', [ 97 | ctrl.datepicker2.view() 98 | ]), 99 | m('.column.two.wide', [ 100 | m('button.ui.button.primary', { 101 | onclick: function() { 102 | console.log(ctrl.datepicker2.getValue()); 103 | } 104 | }, 'get') 105 | ]) 106 | ]) 107 | ]), 108 | m('.ui.grid.page', [ 109 | m('h2', 'Max/Min Date, property'), 110 | m('.column.sixteen.wide', [ 111 | m('.ui.form.fluid', [ 112 | m(".two.fields", [ 113 | m(".field.required", [ 114 | m("label[for='']", "Start Date"), 115 | ctrl.datepicker3.view({ 116 | property: module.vm.dates().start 117 | }) 118 | ]), 119 | m(".field.required", [ 120 | m("label[for='']", "End Time"), 121 | ctrl.datepicker4.view({ 122 | property: module.vm.dates().end 123 | }) 124 | ]) 125 | ]) 126 | ]) 127 | ]) 128 | ]) 129 | ]); 130 | }; 131 | 132 | m.module(window.document.body, module); 133 | }(m, DatePicker)); 134 | 135 | ``` 136 | 137 | ## Attributes 138 | It accepts the following properties, all of them are optional 139 | 140 | * mindate, min date that can be selected 141 | * maxdate, max date that can be selected 142 | * property, m.prop date, current date for the attribute 143 | * dateformat, function to format the date 144 | * time, boolean, to display the time 145 | * onchange, function to react when the date is changed 146 | * i18n, object map with: 147 | * **dayNames**, array of string days, seven for long format, seven for short format `Monday, Tuesday` ... `Mon, Tue` 148 | * **monthNames**, array of string months `January, February` ... `Jan, Feb` 149 | 150 | 151 | ## Functions 152 | Creating a datepicker 153 | ```JavaScrit 154 | var datePicker = new DatePicker(); 155 | ``` 156 | 157 | Loading the view 158 | ```JavaScrit 159 | m('div', datePicker.view()) 160 | ``` 161 | 162 | Get or set the date 163 | ```JavaScrit 164 | datePicker.setValue(date); //date must be a Date object 165 | datePicker.getValue(date); 166 | ``` 167 | 168 | Update attributes 169 | ```JavaScrit 170 | datePicker.setProperty(sell.date()); //m.prop attribute 171 | datePicker.setMaxDate(date); 172 | datePicker.setMinDate(date); 173 | ``` 174 | 175 | Display format 176 | There are some predefined formats for the date, but you can add more 177 | ```JavaScrit 178 | datePicker.masks = { 179 | "default": "ddd mmm dd yyyy HH:MM:ss", 180 | shortDate: "m/d/yy", 181 | mediumDate: "mmm d, yyyy", 182 | longDate: "mmmm d, yyyy", 183 | fullDate: "dddd, mmmm d, yyyy", 184 | shortTime: "h:MM TT", 185 | mediumTime: "h:MM:ss TT", 186 | longTime: "h:MM:ss TT Z", 187 | isoDate: "yyyy-mm-dd", 188 | isoTime: "HH:MM:ss", 189 | isoDateTime: "yyyy-mm-dd'T'HH:MM:ss", 190 | isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'" 191 | }; 192 | ``` 193 | 194 | Date format, you can format a date passing a format to it and optional utc 195 | ```JavaScrit 196 | datePicker.format(new Date(), "mm/dd/yy HH:MM", utc); 197 | ``` -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sm-datepicker", 3 | "version": "0.1.3", 4 | "homepage": "https://github.com/pinguxx/sm-datepicker", 5 | "authors": [ 6 | "Ivan Torres " 7 | ], 8 | "description": "mithril semantic-ui datepicker datetimepicker widget", 9 | "main": "DatePicker.js", 10 | "moduleType": [ 11 | "node" 12 | ], 13 | "keywords": [ 14 | "semantic-ui", 15 | "mithril", 16 | "datepicker", 17 | "date", 18 | "calendar", 19 | "time" 20 | ], 21 | "license": "MIT", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests" 28 | ], 29 | "dependencies": { 30 | "mithril": "~0.1.30", 31 | "sm-calendar": "~0.1.0" 32 | } 33 | } -------------------------------------------------------------------------------- /datepicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pinguxx/sm-datepicker/9c63bdcf7f891b7175b0daf410a75674a5eaec69/datepicker.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sm-datepicker", 3 | "version": "0.1.3", 4 | "description": "mithril semantic-ui datepicker datetimepicker widget", 5 | "main": "DatePicker.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/pinguxx/sm-datepicker.git" 12 | }, 13 | "keywords": [ 14 | "mithril", 15 | "semantic-ui", 16 | "calendar", 17 | "date", 18 | "time", 19 | "datepicker" 20 | ], 21 | "author": "Ivan Torres ", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/pinguxx/sm-datepicker/issues" 25 | }, 26 | "homepage": "https://github.com/pinguxx/sm-datepicker", 27 | "dependencies": { 28 | "mithril": "^0.2.0", 29 | "sm-calendar": "~0.1.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | /*global m, DatePicker, window*/ 2 | (function (m, DatePicker) { 3 | var module = {}; 4 | 5 | 6 | module.controller = function () { 7 | module.vm.init(); 8 | var ctrl = this; 9 | this.datepicker = new DatePicker(); 10 | this.datepicker2 = new DatePicker({ 11 | time: false, 12 | i18n: { 13 | dayNames: [ 14 | "Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab", 15 | "Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado" 16 | ], 17 | monthNames: [ 18 | "Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dec", 19 | "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" 20 | ] 21 | } 22 | }); 23 | /*this.datepicker2.i18n = { 24 | dayNames: [ 25 | "Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab", 26 | "Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado" 27 | ], 28 | monthNames: [ 29 | "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", 30 | "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" 31 | ] 32 | };*/ 33 | this.datepicker3 = new DatePicker({ 34 | placeholder: 'Start Date', 35 | onchange: function (date) { 36 | ctrl.datepicker4.setMinDate(date); 37 | } 38 | }); 39 | this.datepicker4 = new DatePicker({ 40 | placeholder: 'End Date', 41 | onchange: function (date) { 42 | ctrl.datepicker3.setMaxDate(date); 43 | } 44 | }); 45 | }; 46 | 47 | module.vm = {}; 48 | module.vm.init = function () { 49 | this.dates = m.prop({ 50 | start: m.prop(), 51 | end: m.prop() 52 | }); 53 | }; 54 | 55 | 56 | module.view = function (ctrl) { 57 | return m('', [ 58 | m('.ui.grid.page', [ 59 | m('br'), 60 | m('h1.ui.dividing.header', 'Datepicker Widget') 61 | ]), 62 | m('.ui.grid.page.stackable', [ 63 | m('h2', 'Basic Datepicker'), 64 | m('.row', [ 65 | m('.column.four.wide', [ 66 | ctrl.datepicker.view() 67 | ]), 68 | m('.column.two.wide', [ 69 | m('button.ui.button.primary', { 70 | onclick: function() { 71 | console.log(ctrl.datepicker.getValue()); 72 | } 73 | }, 'get') 74 | ]) 75 | ]) 76 | ]), 77 | m('.ui.grid.page.form.stackable', [ 78 | m('h2', 'Form datepicker & no time'), 79 | m('.row', [ 80 | m('.ui.column.five.wide', [ 81 | ctrl.datepicker2.view() 82 | ]), 83 | m('.column.two.wide', [ 84 | m('button.ui.button.primary', { 85 | onclick: function() { 86 | console.log(ctrl.datepicker2.getValue()); 87 | } 88 | }, 'get') 89 | ]) 90 | ]) 91 | ]), 92 | m('.ui.grid.page', [ 93 | m('h2', 'Max/Min Date, property'), 94 | m('.column.sixteen.wide', [ 95 | m('.ui.form.fluid', [ 96 | m(".two.fields", [ 97 | m(".field.required", [ 98 | m("label[for='']", "Start Date"), 99 | ctrl.datepicker3.view({ 100 | property: module.vm.dates().start 101 | }) 102 | ]), 103 | m(".field.required", [ 104 | m("label[for='']", "End Time"), 105 | ctrl.datepicker4.view({ 106 | property: module.vm.dates().end 107 | }) 108 | ]) 109 | ]) 110 | ]) 111 | ]) 112 | ]) 113 | ]); 114 | }; 115 | 116 | m.module(window.document.body, module); 117 | }(m, DatePicker)); 118 | --------------------------------------------------------------------------------