add format method

dist/js/datepicker.js

@@ -15,11 +15,14 @@ var Datepicker;
  start: '', // Start date
  weekends: [6, 0],
  defaultView: 'days',
- format: 'dd.mm.yyyy',
+ dateFormat: 'dd.mm.yyyy',
 
  // navigation
  prevHtml: '«',
- nextHtml: '»'
+ nextHtml: '»',
+
+ // events
+ onChange: ''
  };
 
  Datepicker = function (el, options) {
@@ -87,6 +90,12 @@ var Datepicker;
 
  },
 
+ _triggerOnChange: function (cellType) {
+ var dateString = this.formatDate(this.opts.dateFormat, this.date);
+
+ this.opts.onChange(dateString, this.date, this);
+ },
+
  next: function () {
  var d = this.parsedDate;
  switch (this.view) {
@@ -118,6 +127,30 @@ var Datepicker;
  }
  },
 
+ formatDate: function (string, date) {
+ var result = string,
+ d = this.parsedDate;
+
+ switch (true) {
+ case /dd/.test(result):
+ result = result.replace('dd', d.fullDate);
+ case /d/.test(result):
+ result = result.replace('d', d.date);
+ case /mm/.test(result):
+ result = result.replace('mm',d.fullMonth);
+ case /m/.test(result):
+ result = result.replace('m',d.month + 1);
+ case /MM/.test(result):
+ result = result.replace('MM', this.loc.months[d.month]);
+ case /yyyy/.test(result):
+ result = result.replace('yyyy', d.year);
+ case /yy/.test(result):
+ result = result.replace('yy', d.year.toString().slice(-2));
+ }
+
+ return result;
+ },
+
  get parsedDate() {
  return Datepicker.getParsedDate(this.date);
  },
@@ -161,7 +194,6 @@ var Datepicker;
  }
  };
 
-
  Datepicker.getDaysCount = function (date) {
  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
  };
@@ -170,6 +202,9 @@ var Datepicker;
  return {
  year: date.getFullYear(),
  month: date.getMonth(),
+ fullMonth: (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // One based
+ date: date.getDate(),
+ fullDate: date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
  day: date.getDay()
  }
  };
@@ -473,7 +508,14 @@ Datepicker.Cell = function () {
 
  _handleClick: {
  days: function (el) {
+ var date = el.data('date'),
+ d = this.d.parsedDate;
+
+ this.d.date = new Date(d.year, d.month, date);
 
+ if (this.d.opts.onChange) {
+ this.d._triggerOnChange()
+ }
  },
  months: function (el) {
  var month = el.data('month'),

index.html

@@ -15,7 +15,11 @@
  </div>
  <script type="text/javascript" src="dist/js/datepicker.js"></script>
  <script type="text/javascript">
- $('.calendar').datepicker();
+ $('.calendar').datepicker({
+ onChange: function (dateString, date, inst) {
+
+ }
+ });
  </script>
  </body>
 </html>

js/datepicker/body.js

@@ -185,7 +185,14 @@
 
  _handleClick: {
  days: function (el) {
+ var date = el.data('date'),
+ d = this.d.parsedDate;
+
+ this.d.date = new Date(d.year, d.month, date);
 
+ if (this.d.opts.onChange) {
+ this.d._triggerOnChange()
+ }
  },
  months: function (el) {
  var month = el.data('month'),

js/datepicker/datepicker.js

@@ -15,11 +15,14 @@ var Datepicker;
  start: '', // Start date
  weekends: [6, 0],
  defaultView: 'days',
- format: 'dd.mm.yyyy',
+ dateFormat: 'dd.mm.yyyy',
 
  // navigation
  prevHtml: '«',
- nextHtml: '»'
+ nextHtml: '»',
+
+ // events
+ onChange: ''
  };
 
  Datepicker = function (el, options) {
@@ -87,6 +90,12 @@ var Datepicker;
 
  },
 
+ _triggerOnChange: function (cellType) {
+ var dateString = this.formatDate(this.opts.dateFormat, this.date);
+
+ this.opts.onChange(dateString, this.date, this);
+ },
+
  next: function () {
  var d = this.parsedDate;
  switch (this.view) {
@@ -118,6 +127,30 @@ var Datepicker;
  }
  },
 
+ formatDate: function (string, date) {
+ var result = string,
+ d = this.parsedDate;
+
+ switch (true) {
+ case /dd/.test(result):
+ result = result.replace('dd', d.fullDate);
+ case /d/.test(result):
+ result = result.replace('d', d.date);
+ case /mm/.test(result):
+ result = result.replace('mm',d.fullMonth);
+ case /m/.test(result):
+ result = result.replace('m',d.month + 1);
+ case /MM/.test(result):
+ result = result.replace('MM', this.loc.months[d.month]);
+ case /yyyy/.test(result):
+ result = result.replace('yyyy', d.year);
+ case /yy/.test(result):
+ result = result.replace('yy', d.year.toString().slice(-2));
+ }
+
+ return result;
+ },
+
  get parsedDate() {
  return Datepicker.getParsedDate(this.date);
  },
@@ -161,7 +194,6 @@ var Datepicker;
  }
  };
 
-
  Datepicker.getDaysCount = function (date) {
  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
  };
@@ -170,6 +202,9 @@ var Datepicker;
  return {
  year: date.getFullYear(),
  month: date.getMonth(),
+ fullMonth: (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // One based
+ date: date.getDate(),
+ fullDate: date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
  day: date.getDay()
  }
  };

sass/_page.scss

@@ -15,5 +15,4 @@ html {
  article {
  margin: 60px 0 30px;
  }
-}
-
+}