Skip to content

Commit eb4e284

Browse files
AlexKrupkoAlexKrupko
committed
Added title format parameters
1 parent bd43f63 commit eb4e284

8 files changed

+67
-55
lines changed

‎Gruntfile.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
module.exports = function (grunt)
22
{
3+
const sass = require('node-sass');
4+
35
require('time-grunt')(grunt);
46
require('load-grunt-tasks')(grunt);
57

@@ -9,10 +11,9 @@ module.exports = function (grunt)
911
* Cool light visual date picker on pure JavaScript\n\
1012
* Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE10+, iOS Safari 8+, Android Browser 4.4+\n\
1113
*\n\
12-
* @author Alexander Krupko <[email protected]>\n\
13-
* @copyright 2016 Avrora Team www.avrora.team\n\
14+
* @author Alexander Krupko <[email protected]>\n\
15+
* @copyright 2016 Alexander Krupko\n\
1416
* @license MIT\n\
15-
* @tutorial http://datepickerx.avrora.team\n\
1617
* @version ' + grunt.file.readJSON('package.json').version + '\n\
1718
*/\n';
1819

@@ -22,7 +23,8 @@ module.exports = function (grunt)
2223
options: {
2324
sourceMap : false,
2425
outputStyle: 'expanded',
25-
indentWidth: 4
26+
indentWidth: 4,
27+
implementation: sass
2628
},
2729
dev: {
2830
files : [{

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,6 @@ Also DatePickerX provides global `DatePickerX` object with following methods:
5252
* `todayButtonLabel` - today button label. Default: `'Today'`
5353
* `clearButton` - if `true` clear button should be enabled. Date picker value will be cleared by clicking this button. Default: `true`
5454
* `clearButtonLabel` - clear button label. Default: `'Clear'`
55+
* `titleFormatDay` - Title format for day value items. All literals from the `format` property can be used. Each literal should be wrapped in curly brackets. Default: `'{MM} {dd}, {yyyy}'`
56+
* `titleFormatMonth` - Title format for month value items. All literals from the `format` property can be used. Each literal should be wrapped in curly brackets. Default: `'{MM} {yyyy}'`
57+
* `titleFormatYear` - Title format for year value items. All literals from the `format` property can be used. Each literal should be wrapped in curly brackets. Default: `'{yyyy}'`

‎dist/css/DatePickerX.css

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
* Cool light visual date picker on pure JavaScript
55
* Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE10+, iOS Safari 8+, Android Browser 4.4+
66
*
7-
* @author Alexander Krupko <[email protected]>
8-
* @copyright 2016 Avrora Team www.avrora.team
7+
* @author Alexander Krupko <[email protected]>
8+
* @copyright 2016 Alexander Krupko
99
* @license MIT
10-
* @tutorial http://datepickerx.avrora.team
11-
* @version 1.0.4
10+
* @version 1.0.5
1211
*/
1312

1413
.date-picker-x-container {

‎dist/css/DatePickerX.min.css

+3-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/DatePickerX.js

+19-15
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
* Cool light visual date picker on pure JavaScript
55
* Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE10+, iOS Safari 8+, Android Browser 4.4+
66
*
7-
* @author Alexander Krupko <[email protected]>
8-
* @copyright 2016 Avrora Team www.avrora.team
7+
* @author Alexander Krupko <[email protected]>
8+
* @copyright 2016 Alexander Krupko
99
* @license MIT
10-
* @tutorial http://datepickerx.avrora.team
11-
* @version 1.0.4
10+
* @version 1.0.5
1211
*/
1312

1413
!function()
@@ -26,7 +25,10 @@
2625
todayButton : true,
2726
todayButtonLabel : 'Today',
2827
clearButton : true,
29-
clearButtonLabel : 'Clear'
28+
clearButtonLabel : 'Clear',
29+
titleFormatDay : '{MM} {dd}, {yyyy}',
30+
titleFormatMonth : '{MM} {yyyy}',
31+
titleFormatYear : '{yyyy}'
3032
},
3133
openedDPX = null;
3234

@@ -153,8 +155,9 @@
153155
* MM - full month name
154156
* yy - 2-digits year number
155157
* yyyy - 4-digits year number
158+
* @param {Boolean} [useBrackets=false] If true, literals should be wrapped to curly brackets
156159
*/
157-
function getFormatedDate(dt, format)
160+
function getFormatedDate(dt, format, useBrackets)
158161
{
159162
var items = {
160163
d : dt.getDate(),
@@ -174,9 +177,10 @@
174177
items.M = options.shortMonthLabels[items.M];
175178
items.MM = options.singleMonthLabels[items.MM];
176179

177-
return format.replace(/(?:[dmM]{1,2}|D|yyyy|yy)/g, function(m)
180+
var regexp = useBrackets ? /\{([dmM]{1,2}|D|yyyy|yy)\}/g : /([dmM]{1,2}|D|yyyy|yy)/g;
181+
return format.replace(regexp, function(match, literal)
178182
{
179-
return typeof items[m] !== 'undefined' ? items[m] : m;
183+
return typeof items[literal] !== 'undefined' ? items[literal] : match;
180184
});
181185
}
182186

@@ -311,23 +315,25 @@
311315

312316
// set title
313317
elements.title.innerHTML = mode
314-
? (mode === 2 ? options.singleMonthLabels[setMonth] + ' ' : '') + setYear
318+
? getFormatedDate(dt, mode === 2 ? options.titleFormatMonth : options.titleFormatYear, true)
315319
: (zeroYear + ' - ' + (zeroYear + 9));
316320
elements.title.dpxValue = dt.getTime();
317-
elements.title.title = mode === 2 ? setYear : (zeroYear + ' - ' + (zeroYear + 9));
321+
elements.title.title = mode === 2
322+
? getFormatedDate(dt, options.titleFormatYear, true)
323+
: (zeroYear + ' - ' + (zeroYear + 9));
318324

319325
// prev and next arrows
320326
elements.prevTitle.classList[dt.getTime() <= dtMin ? 'add' : 'remove']('dpx-disabled');
321327
mode === 2 ? dt.setMonth(setMonth - 1) : dt.setFullYear(mode ? setYear - 1 : zeroYear - 10);
322328
elements.prevTitle.title = mode
323-
? (mode === 2 ? options.singleMonthLabels[dt.getMonth()] + ' ' : '') + dt.getFullYear()
329+
? getFormatedDate(dt, mode === 2 ? options.titleFormatMonth : options.titleFormatYear, true)
324330
: ((zeroYear - 10) + ' - ' + (zeroYear - 1));
325331
elements.prevTitle.dpxValue = dt.getTime();
326332

327333
mode === 2 ? dt.setMonth(dt.getMonth() + 2) : dt.setFullYear(mode ? setYear + 1 : zeroYear + 20);
328334
elements.nextTitle.classList[dt.getTime() > dtMax ? 'add' : 'remove']('dpx-disabled');
329335
elements.nextTitle.title = mode
330-
? (mode === 2 ? options.singleMonthLabels[dt.getMonth()] + ' ' : '') + dt.getFullYear()
336+
? getFormatedDate(dt, mode === 2 ? options.titleFormatMonth : options.titleFormatYear, true)
331337
: ((zeroYear + 10) + ' - ' + (zeroYear + 19));
332338
elements.nextTitle.dpxValue = dt.getTime();
333339

@@ -375,9 +381,7 @@
375381
i = mode === 2 ? 42 : 16;
376382
for (; i--; dt[setter](dt[getter]() + 1)) {
377383
var classes = ['dpx-item'],
378-
title = mode ? options.singleMonthLabels[dt.getMonth()] + ' ' : '';
379-
mode === 2 && (title += dt.getDate() + ', ');
380-
title += dt.getFullYear();
384+
title = getFormatedDate(dt, [options.titleFormatYear, options.titleFormatMonth, options.titleFormatDay][mode], true);
381385

382386
(mode ? (mode === 2 ? dt.getMonth() !== setMonth : dt.getFullYear() !== setYear) : (dt.getFullYear() < zeroYear || dt.getFullYear() > zeroYear + 9)) && classes.push('dpx-out');
383387
mode === 2 && (dt.getDay() === 6 || dt.getDay() === 0) && classes.push('dpx-weekend');

‎dist/js/DatePickerX.min.js

+4-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+13-12
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,19 @@
2222
],
2323
"license": "MIT",
2424
"devDependencies": {
25-
"grunt": "^1.0.1",
26-
"grunt-autoprefixer": "^3.0.4",
27-
"grunt-combine-media-queries": "^1.0.20",
28-
"grunt-contrib-clean": "^1.0.0",
29-
"grunt-contrib-copy": "^1.0.0",
30-
"grunt-contrib-cssmin": "^1.0.1",
31-
"grunt-contrib-uglify": "^1.0.1",
32-
"grunt-contrib-watch": "^1.0.0",
33-
"grunt-sass": "^2.1.0",
34-
"load-grunt-tasks": "^3.5.0",
35-
"npm": "^6.1.0",
36-
"time-grunt": "^1.4.0"
25+
"grunt": "*",
26+
"grunt-autoprefixer": "*",
27+
"grunt-combine-media-queries": "*",
28+
"grunt-contrib-clean": "*",
29+
"grunt-contrib-copy": "*",
30+
"grunt-contrib-cssmin": "*",
31+
"grunt-contrib-uglify": "*",
32+
"grunt-contrib-watch": "*",
33+
"grunt-sass": "*",
34+
"node-sass": "*",
35+
"load-grunt-tasks": "*",
36+
"npm": "*",
37+
"time-grunt": "*"
3738
},
3839
"dependencies": {}
3940
}

‎src/js/DatePickerX.js

+16-11
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@
1313
todayButton : true,
1414
todayButtonLabel : 'Today',
1515
clearButton : true,
16-
clearButtonLabel : 'Clear'
16+
clearButtonLabel : 'Clear',
17+
titleFormatDay : '{MM} {dd}, {yyyy}',
18+
titleFormatMonth : '{MM} {yyyy}',
19+
titleFormatYear : '{yyyy}'
1720
},
1821
openedDPX = null;
1922

@@ -140,8 +143,9 @@
140143
* MM - full month name
141144
* yy - 2-digits year number
142145
* yyyy - 4-digits year number
146+
* @param {Boolean} [useBrackets=false] If true, literals should be wrapped to curly brackets
143147
*/
144-
function getFormatedDate(dt, format)
148+
function getFormatedDate(dt, format, useBrackets)
145149
{
146150
var items = {
147151
d : dt.getDate(),
@@ -161,9 +165,10 @@
161165
items.M = options.shortMonthLabels[items.M];
162166
items.MM = options.singleMonthLabels[items.MM];
163167

164-
return format.replace(/(?:[dmM]{1,2}|D|yyyy|yy)/g, function(m)
168+
var regexp = useBrackets ? /\{([dmM]{1,2}|D|yyyy|yy)\}/g : /([dmM]{1,2}|D|yyyy|yy)/g;
169+
return format.replace(regexp, function(match, literal)
165170
{
166-
return typeof items[m] !== 'undefined' ? items[m] : m;
171+
return typeof items[literal] !== 'undefined' ? items[literal] : match;
167172
});
168173
}
169174

@@ -298,23 +303,25 @@
298303

299304
// set title
300305
elements.title.innerHTML = mode
301-
? (mode === 2 ? options.singleMonthLabels[setMonth] + ' ' : '') + setYear
306+
? getFormatedDate(dt, mode === 2 ? options.titleFormatMonth : options.titleFormatYear, true)
302307
: (zeroYear + ' - ' + (zeroYear + 9));
303308
elements.title.dpxValue = dt.getTime();
304-
elements.title.title = mode === 2 ? setYear : (zeroYear + ' - ' + (zeroYear + 9));
309+
elements.title.title = mode === 2
310+
? getFormatedDate(dt, options.titleFormatYear, true)
311+
: (zeroYear + ' - ' + (zeroYear + 9));
305312

306313
// prev and next arrows
307314
elements.prevTitle.classList[dt.getTime() <= dtMin ? 'add' : 'remove']('dpx-disabled');
308315
mode === 2 ? dt.setMonth(setMonth - 1) : dt.setFullYear(mode ? setYear - 1 : zeroYear - 10);
309316
elements.prevTitle.title = mode
310-
? (mode === 2 ? options.singleMonthLabels[dt.getMonth()] + ' ' : '') + dt.getFullYear()
317+
? getFormatedDate(dt, mode === 2 ? options.titleFormatMonth : options.titleFormatYear, true)
311318
: ((zeroYear - 10) + ' - ' + (zeroYear - 1));
312319
elements.prevTitle.dpxValue = dt.getTime();
313320

314321
mode === 2 ? dt.setMonth(dt.getMonth() + 2) : dt.setFullYear(mode ? setYear + 1 : zeroYear + 20);
315322
elements.nextTitle.classList[dt.getTime() > dtMax ? 'add' : 'remove']('dpx-disabled');
316323
elements.nextTitle.title = mode
317-
? (mode === 2 ? options.singleMonthLabels[dt.getMonth()] + ' ' : '') + dt.getFullYear()
324+
? getFormatedDate(dt, mode === 2 ? options.titleFormatMonth : options.titleFormatYear, true)
318325
: ((zeroYear + 10) + ' - ' + (zeroYear + 19));
319326
elements.nextTitle.dpxValue = dt.getTime();
320327

@@ -362,9 +369,7 @@
362369
i = mode === 2 ? 42 : 16;
363370
for (; i--; dt[setter](dt[getter]() + 1)) {
364371
var classes = ['dpx-item'],
365-
title = mode ? options.singleMonthLabels[dt.getMonth()] + ' ' : '';
366-
mode === 2 && (title += dt.getDate() + ', ');
367-
title += dt.getFullYear();
372+
title = getFormatedDate(dt, [options.titleFormatYear, options.titleFormatMonth, options.titleFormatDay][mode], true);
368373

369374
(mode ? (mode === 2 ? dt.getMonth() !== setMonth : dt.getFullYear() !== setYear) : (dt.getFullYear() < zeroYear || dt.getFullYear() > zeroYear + 9)) && classes.push('dpx-out');
370375
mode === 2 && (dt.getDay() === 6 || dt.getDay() === 0) && classes.push('dpx-weekend');

0 commit comments

Comments
 (0)