diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..4dece5f
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+ "directory": "vendor"
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 11022e1..73b8c8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
/.idea
node_modules
+vendor
\ No newline at end of file
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..f28bb77
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,6 @@
+{
+ "name": "datepicker",
+ "dependencies": {
+ "jquery": "~2.1.4"
+ }
+}
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index 77f8dfe..bba0307 100644
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@@ -1,12 +1,64 @@
-;(function () {
- var pluginName = 'datepicker';
+var Datepicker;
- function Datepicker () {
+(function (window, $, undefined) {
+ var pluginName = 'datepicker',
+ $body, $datepickersContainer,
+ baseTemplate = '' +
+ '
',
+ defaults = {
+ inline: true,
+ start: '',
+ format: 'dd.mm.yyyy'
+ };
- }
+ Datepicker = function (el, options) {
+ this.$el = typeof el == 'string' ? $(el) : el;
+
+ this.opts = $.extend({}, defaults, options);
+
+ if (!this.opts.start) {
+ this.opts.start = new Date();
+ }
+ if (this.containerBuilt && !this.opts.inline) {
+ this._buildDatepickersContainer();
+ }
+
+ if ($body == undefined) {
+ $body = $('body');
+ }
+
+ this.init()
+ };
Datepicker.prototype = {
+ containerBuilt: false,
init: function () {
+ this._buildBaseHtml();
+
+ this.days = new Datepicker.Body(this, 'days', this.opts)
+
+ },
+
+ _buildDatepickersContainer: function () {
+ this.containerBuilt = true;
+ $body.append('')
+ $datepickersContainer = $('#datepickers-container');
+ },
+
+ _buildBaseHtml: function () {
+ var $appendTarget = this.$el;
+ if(!this.opts.inline) {
+ $appendTarget = $datepickersContainer;
+ }
+ this.$datepicker = $(baseTemplate).appendTo($appendTarget);
+ this.$content = $('.datepicker--content', this.$datepicker);
+ this.$header = $('.datepicker--header', this.$datepicker);
+ },
+
+ _defineDOM: function () {
}
};
@@ -30,7 +82,54 @@
}
};
-})();
+})(window, jQuery, '');
Datepicker.Cell = function () {
-};
\ No newline at end of file
+};
+;(function () {
+ var templates = {
+ days:'' +
+ ''
+ };
+
+ Datepicker.Body = function (d, type, opts) {
+ this.d = d;
+ this.type = type;
+ this.opts = opts;
+
+ this.viewDate = opts.start;
+
+ this.init();
+ };
+
+ Datepicker.Body.prototype = {
+ init: function () {
+ this._render();
+ },
+
+ _getCellsNumber: function () {
+ var d = this.viewDate;
+
+ return {
+ days: new Date(d.getFullYear(), d.getMonth()+1, 0).getDate(),
+ months: 12,
+ years: 10
+ }
+ },
+
+ _buildBaseHtml: function () {
+ this.$el = $(templates[this.type]).appendTo(this.d.$content);
+ this.$names = $('.datepicker--days--names', this.$el);
+ this.$cells = $('.datepicker--days--cells', this.$el);
+ },
+
+ _render: function () {
+ var cells = this._getCellsNumber();
+
+ this._buildBaseHtml();
+ }
+ };
+})();
diff --git a/gulpfile.js b/gulpfile.js
index dd7dafd..b6e26da 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,7 +6,7 @@ var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task('js', function () {
- gulp.src(['js/datepicker/datepicker.js', 'js/datepicker/cell.js'])
+ gulp.src(['js/datepicker/datepicker.js', 'js/datepicker/cell.js', 'js/datepicker/body.js'])
.pipe(concat('datepicker.js'))
.pipe(gulp.dest('dist/js/'))
.pipe(livereload())
diff --git a/index.html b/index.html
index 296a452..fce917f 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,13 @@
Datepicker
-
+
+
+
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
new file mode 100644
index 0000000..161ff44
--- /dev/null
+++ b/js/datepicker/body.js
@@ -0,0 +1,47 @@
+;(function () {
+ var templates = {
+ days:'' +
+ ''
+ };
+
+ Datepicker.Body = function (d, type, opts) {
+ this.d = d;
+ this.type = type;
+ this.opts = opts;
+
+ this.viewDate = opts.start;
+
+ this.init();
+ };
+
+ Datepicker.Body.prototype = {
+ init: function () {
+ this._render();
+ },
+
+ _getCellsNumber: function () {
+ var d = this.viewDate;
+
+ return {
+ days: new Date(d.getFullYear(), d.getMonth()+1, 0).getDate(),
+ months: 12,
+ years: 10
+ }
+ },
+
+ _buildBaseHtml: function () {
+ this.$el = $(templates[this.type]).appendTo(this.d.$content);
+ this.$names = $('.datepicker--days--names', this.$el);
+ this.$cells = $('.datepicker--days--cells', this.$el);
+ },
+
+ _render: function () {
+ var cells = this._getCellsNumber();
+
+ this._buildBaseHtml();
+ }
+ };
+})();
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index af4a212..ac1f32e 100644
--- a/js/datepicker/datepicker.js
+++ b/js/datepicker/datepicker.js
@@ -1,12 +1,64 @@
-;(function () {
- var pluginName = 'datepicker';
+var Datepicker;
- function Datepicker () {
+(function (window, $, undefined) {
+ var pluginName = 'datepicker',
+ $body, $datepickersContainer,
+ baseTemplate = '' +
+ '',
+ defaults = {
+ inline: true,
+ start: '',
+ format: 'dd.mm.yyyy'
+ };
- }
+ Datepicker = function (el, options) {
+ this.$el = typeof el == 'string' ? $(el) : el;
+
+ this.opts = $.extend({}, defaults, options);
+
+ if (!this.opts.start) {
+ this.opts.start = new Date();
+ }
+ if (this.containerBuilt && !this.opts.inline) {
+ this._buildDatepickersContainer();
+ }
+
+ if ($body == undefined) {
+ $body = $('body');
+ }
+
+ this.init()
+ };
Datepicker.prototype = {
+ containerBuilt: false,
init: function () {
+ this._buildBaseHtml();
+
+ this.days = new Datepicker.Body(this, 'days', this.opts)
+
+ },
+
+ _buildDatepickersContainer: function () {
+ this.containerBuilt = true;
+ $body.append('')
+ $datepickersContainer = $('#datepickers-container');
+ },
+
+ _buildBaseHtml: function () {
+ var $appendTarget = this.$el;
+ if(!this.opts.inline) {
+ $appendTarget = $datepickersContainer;
+ }
+ this.$datepicker = $(baseTemplate).appendTo($appendTarget);
+ this.$content = $('.datepicker--content', this.$datepicker);
+ this.$header = $('.datepicker--header', this.$datepicker);
+ },
+
+ _defineDOM: function () {
}
};
@@ -30,4 +82,4 @@
}
};
-})();
\ No newline at end of file
+})(window, jQuery, '');
\ No newline at end of file