jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

begin work with input node

Browse Source
This commit is contained in:
t1m0n 2015-11-14 14:21:46 +03:00
parent 3d3046467b
commit cce9a64017
5 changed files with 243 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dist/css/datepicker.css vendored
View File

@ -11,11 +11,21 @@
/* ------------------------------------------------- /* -------------------------------------------------
Datepicker Datepicker
------------------------------------------------- */ ------------------------------------------------- */
.datepickers-container {
position: absolute;
left: 0;
top: 0; }
.datepicker { .datepicker {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 2px; border-radius: 2px;
box-sizing: content-box; box-sizing: content-box;
width: 224px; } width: 224px;
position: absolute;
left: -100000px;
opacity: 0; }
.datepicker.active {
opacity: 1; }
.datepicker--content { .datepicker--content {
padding: 2px; } padding: 2px; }

122
dist/js/datepicker.js vendored
View File

@ -10,13 +10,14 @@ var Datepicker;
'</div>', '</div>',
defaults = { defaults = {
//TODO сделать работу с инпутом //TODO сделать работу с инпутом
inline: true, inline: false,
language: 'ru', language: 'ru',
startDate: new Date(), startDate: new Date(),
firstDay: '', firstDay: '',
weekends: [6, 0], weekends: [6, 0],
dateFormat: '', dateFormat: '',
toggleSelected: true, toggleSelected: true,
position: 'bottom left',
view: 'days', view: 'days',
minView: 'days', minView: 'days',
@ -39,6 +40,8 @@ var Datepicker;
todayButton: false, todayButton: false,
clearButton: false, clearButton: false,
showEvent: 'focus',
// navigation // navigation
prevHtml: '&laquo;', prevHtml: '&laquo;',
nextHtml: '&raquo;', nextHtml: '&raquo;',
@ -49,22 +52,29 @@ var Datepicker;
}; };
Datepicker = function (el, options) { Datepicker = function (el, options) {
this.$el = typeof el == 'string' ? $(el) : el; this.el = el;
this.$el = $(el);
this.opts = $.extend({}, defaults, options); this.opts = $.extend({}, defaults, options);
if (!this.opts.startDate) {
this.opts.startDate = new Date();
}
if (this.containerBuilt && !this.opts.inline) {
this._buildDatepickersContainer();
}
if ($body == undefined) { if ($body == undefined) {
$body = $('body'); $body = $('body');
} }
if (!this.opts.startDate) {
this.opts.startDate = new Date();
}
if (this.el.nodeName == 'INPUT') {
this.elIsInput = true;
}
if (!this.containerBuilt && !this.opts.inline && this.elIsInput) {
this._buildDatepickersContainer();
}
this.inited = false; this.inited = false;
this.visible = false;
this.silent = false; // Need to prevent unnecessary rendering this.silent = false; // Need to prevent unnecessary rendering
this.currentDate = this.opts.startDate; this.currentDate = this.opts.startDate;
@ -86,6 +96,12 @@ var Datepicker;
this._buildBaseHtml(); this._buildBaseHtml();
this._defineLocale(this.opts.language); this._defineLocale(this.opts.language);
if (this.elIsInput) {
if (!this.opts.inline) {
this._bindEvents()
}
}
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts); this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show(); this.views[this.currentView].show();
this.nav = new Datepicker.Navigation(this, this.opts); this.nav = new Datepicker.Navigation(this, this.opts);
@ -94,6 +110,13 @@ var Datepicker;
this.inited = true; this.inited = true;
}, },
_bindEvents : function () {
this.$el.on(this.opts.showEvent, this._onShowEvent.bind(this));
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
$body.on('mousedown.datepicker', this._onMouseDownBody.bind(this));
},
isWeekend: function (day) { isWeekend: function (day) {
return this.opts.weekends.indexOf(day) !== -1; return this.opts.weekends.indexOf(day) !== -1;
}, },
@ -126,8 +149,13 @@ var Datepicker;
_buildBaseHtml: function () { _buildBaseHtml: function () {
var $appendTarget = this.$el; var $appendTarget = this.$el;
if(!this.opts.inline) {
$appendTarget = $datepickersContainer; if(this.el.nodeName == 'INPUT') {
if (!this.opts.inline) {
$appendTarget = $datepickersContainer;
} else {
}
} }
this.$datepicker = $(baseTemplate).appendTo($appendTarget); this.$datepicker = $(baseTemplate).appendTo($appendTarget);
this.$content = $('.datepicker--content', this.$datepicker); this.$content = $('.datepicker--content', this.$datepicker);
@ -145,7 +173,7 @@ var Datepicker;
var selectedDates = this.selectedDates, var selectedDates = this.selectedDates,
parsedSelected = Datepicker.getParsedDate(selectedDates[0]), parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
formattedDates = this.formatDate(this.opts.dateFormat, selectedDates[0]), formattedDates = this.formatDate(this.loc.dateFormat, selectedDates[0]),
_this = this, _this = this,
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date); dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
@ -315,6 +343,74 @@ var Datepicker;
return type ? types[type] : types.day return type ? types[type] : types.day
}, },
_getDimensions: function () {
var offset = this.$el.offset();
return {
width: this.$el.outerWidth(),
height: this.$el.outerHeight(),
left: offset.left,
top: offset.top
}
},
setPosition: function (position) {
var dims = this._getDimensions(),
pos = position.split(' '),
top, left,
offset = 6,
main = pos[0],
secondary = pos[1];
switch (main) {
case 'bottom':
top = dims.top + dims.height + offset;
break;
}
switch(secondary) {
case 'left':
left = dims.left
}
this.$datepicker.css({
left: left,
top: top
})
},
show: function () {
this.$datepicker.addClass('active');
this.setPosition(this.opts.position);
this.visible = true;
},
hide: function () {
this.$datepicker.removeClass('active');
this.visible = false;
},
_onShowEvent: function () {
if (!this.visible) {
this.show();
}
},
_onMouseDownBody: function (e) {
if (!this.inFocus) {
this.hide();
}
},
_onMouseDownDatepicker: function (e) {
this.inFocus = true;
},
_onMouseUpDatepicker: function (e) {
this.inFocus = false;
this.$el.focus()
},
get parsedDate() { get parsedDate() {
return Datepicker.getParsedDate(this.date); return Datepicker.getParsedDate(this.date);
}, },
@ -451,7 +547,7 @@ var Datepicker;
} }
}; };
})(window, jQuery, ''); })(window, jQuery);
;(function () { ;(function () {
var template = '' + var template = '' +
'<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' + '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +

2
index.html
View File

@ -10,7 +10,7 @@
<body> <body>
<div class="contents"> <div class="contents">
<article> <article>
<div class="calendar"></div> <input class="calendar" type="text"/>
</article> </article>
</div> </div>
<script type="text/javascript" src="dist/js/datepicker.js"></script> <script type="text/javascript" src="dist/js/datepicker.js"></script>

122
js/datepicker/datepicker.js
View File

@ -10,13 +10,14 @@ var Datepicker;
'</div>', '</div>',
defaults = { defaults = {
//TODO сделать работу с инпутом //TODO сделать работу с инпутом
inline: true, inline: false,
language: 'ru', language: 'ru',
startDate: new Date(), startDate: new Date(),
firstDay: '', firstDay: '',
weekends: [6, 0], weekends: [6, 0],
dateFormat: '', dateFormat: '',
toggleSelected: true, toggleSelected: true,
position: 'bottom left',
view: 'days', view: 'days',
minView: 'days', minView: 'days',
@ -39,6 +40,8 @@ var Datepicker;
todayButton: false, todayButton: false,
clearButton: false, clearButton: false,
showEvent: 'focus',
// navigation // navigation
prevHtml: '&laquo;', prevHtml: '&laquo;',
nextHtml: '&raquo;', nextHtml: '&raquo;',
@ -49,22 +52,29 @@ var Datepicker;
}; };
Datepicker = function (el, options) { Datepicker = function (el, options) {
this.$el = typeof el == 'string' ? $(el) : el; this.el = el;
this.$el = $(el);
this.opts = $.extend({}, defaults, options); this.opts = $.extend({}, defaults, options);
if (!this.opts.startDate) {
this.opts.startDate = new Date();
}
if (this.containerBuilt && !this.opts.inline) {
this._buildDatepickersContainer();
}
if ($body == undefined) { if ($body == undefined) {
$body = $('body'); $body = $('body');
} }
if (!this.opts.startDate) {
this.opts.startDate = new Date();
}
if (this.el.nodeName == 'INPUT') {
this.elIsInput = true;
}
if (!this.containerBuilt && !this.opts.inline && this.elIsInput) {
this._buildDatepickersContainer();
}
this.inited = false; this.inited = false;
this.visible = false;
this.silent = false; // Need to prevent unnecessary rendering this.silent = false; // Need to prevent unnecessary rendering
this.currentDate = this.opts.startDate; this.currentDate = this.opts.startDate;
@ -86,6 +96,12 @@ var Datepicker;
this._buildBaseHtml(); this._buildBaseHtml();
this._defineLocale(this.opts.language); this._defineLocale(this.opts.language);
if (this.elIsInput) {
if (!this.opts.inline) {
this._bindEvents()
}
}
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts); this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show(); this.views[this.currentView].show();
this.nav = new Datepicker.Navigation(this, this.opts); this.nav = new Datepicker.Navigation(this, this.opts);
@ -94,6 +110,13 @@ var Datepicker;
this.inited = true; this.inited = true;
}, },
_bindEvents : function () {
this.$el.on(this.opts.showEvent, this._onShowEvent.bind(this));
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
$body.on('mousedown.datepicker', this._onMouseDownBody.bind(this));
},
isWeekend: function (day) { isWeekend: function (day) {
return this.opts.weekends.indexOf(day) !== -1; return this.opts.weekends.indexOf(day) !== -1;
}, },
@ -126,8 +149,13 @@ var Datepicker;
_buildBaseHtml: function () { _buildBaseHtml: function () {
var $appendTarget = this.$el; var $appendTarget = this.$el;
if(!this.opts.inline) {
$appendTarget = $datepickersContainer; if(this.el.nodeName == 'INPUT') {
if (!this.opts.inline) {
$appendTarget = $datepickersContainer;
} else {
}
} }
this.$datepicker = $(baseTemplate).appendTo($appendTarget); this.$datepicker = $(baseTemplate).appendTo($appendTarget);
this.$content = $('.datepicker--content', this.$datepicker); this.$content = $('.datepicker--content', this.$datepicker);
@ -145,7 +173,7 @@ var Datepicker;
var selectedDates = this.selectedDates, var selectedDates = this.selectedDates,
parsedSelected = Datepicker.getParsedDate(selectedDates[0]), parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
formattedDates = this.formatDate(this.opts.dateFormat, selectedDates[0]), formattedDates = this.formatDate(this.loc.dateFormat, selectedDates[0]),
_this = this, _this = this,
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date); dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
@ -315,6 +343,74 @@ var Datepicker;
return type ? types[type] : types.day return type ? types[type] : types.day
}, },
_getDimensions: function () {
var offset = this.$el.offset();
return {
width: this.$el.outerWidth(),
height: this.$el.outerHeight(),
left: offset.left,
top: offset.top
}
},
setPosition: function (position) {
var dims = this._getDimensions(),
pos = position.split(' '),
top, left,
offset = 6,
main = pos[0],
secondary = pos[1];
switch (main) {
case 'bottom':
top = dims.top + dims.height + offset;
break;
}
switch(secondary) {
case 'left':
left = dims.left
}
this.$datepicker.css({
left: left,
top: top
})
},
show: function () {
this.$datepicker.addClass('active');
this.setPosition(this.opts.position);
this.visible = true;
},
hide: function () {
this.$datepicker.removeClass('active');
this.visible = false;
},
_onShowEvent: function () {
if (!this.visible) {
this.show();
}
},
_onMouseDownBody: function (e) {
if (!this.inFocus) {
this.hide();
}
},
_onMouseDownDatepicker: function (e) {
this.inFocus = true;
},
_onMouseUpDatepicker: function (e) {
this.inFocus = false;
this.$el.focus()
},
get parsedDate() { get parsedDate() {
return Datepicker.getParsedDate(this.date); return Datepicker.getParsedDate(this.date);
}, },
@ -451,4 +547,4 @@ var Datepicker;
} }
}; };
})(window, jQuery, ''); })(window, jQuery);

13
sass/datepicker/_datepicker.scss
View File

@ -4,11 +4,24 @@
Datepicker Datepicker
------------------------------------------------- */ ------------------------------------------------- */
.datepickers-container {
position: absolute;
left: 0;
top: 0;
}
.datepicker { .datepicker {
border: 1px solid $colorGrey; border: 1px solid $colorGrey;
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
box-sizing: content-box; box-sizing: content-box;
width: $datepickerWidth; width: $datepickerWidth;
position: absolute;
left: -100000px;
opacity: 0;
&.active {
opacity: 1;
}
} }
.datepicker--content { .datepicker--content {