Added custom format callbacks

README.md

@@ -26,7 +26,32 @@ If you want to have a toggle button next to the input, wrap both elements into a
 		<span class="input-group-btn"><button type="button" class="btn btn-primary" data-toggle="datepicker"><i class="fa fa-calendar"></i></button></span>
 	</div>
 
-###Requirements
+##Advanced usage
+
+###Custom date formats
+
+You can specify your own date formats if you want; to do so, you will have to override two functions, the one that formats the selected date and the one that parses the input value into a `Date` object.
+
+The default implementation uses the `dd/mm/yyyy` format, with the following functions:
+
+	formatDate: function(date) {
+		var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
+		return formatted;
+	},
+	parseDate: function(string) {
+		var date = new Date();
+		var parts = string.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
+		if ( parts && parts.length == 4 ) {
+			date = new Date( parts[3], parts[2] - 1, parts[1] );
+		}
+		return date;
+	}
+
+As you can see, it's pretty straightforward to override them, but it's strongly recommended to use a date manipulation library such as moment.js to avoid localization/crossbrowser issues.
+
+Just make sure to return a valid formatted date in `formatDate` and a valid `Date` object in `parseDate`
+
+##Requirements
 
  - jQuery 1.8+
  - A recent/decent web browser (Firefox, Chrome or Opera suggested; IE8+ works too)

index.html

@@ -43,7 +43,26 @@ <h3>Automatic mode</h3>
 			</div>
 		</div>
 		<!--  -->
-		<h3>Requirements</h3>
+		<h2>Advanced usage</h2>
+		<h3>Custom date formats</h3>
+		<p>You can specify your own date formats if you want; to do so, you will have to override two functions, the one that formats the selected date and the one that parses the input value into a <code>Date</code> object.</p>
+		<p>The default implementation uses the <code>dd/mm/yyyy</code> format, with the following functions:</p>
+		<pre>formatDate: function(date) {
+    var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
+    return formatted;
+},
+parseDate: function(string) {
+    var date = new Date();
+    var parts = string.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
+    if ( parts &amp;&amp; parts.length == 4 ) {
+        date = new Date( parts[3], parts[2] - 1, parts[1] );
+    }
+    return date;
+}</pre>
+		<p>As you can see, it's pretty straightforward to override them, but it's strongly recommended to use a date manipulation library such as moment.js to avoid localization/crossbrowser issues.</p>
+		<p>Just make sure to return a valid formatted date in <code>formatDate</code> and a valid <code>Date</code> object in <code>parseDate</code></p>
+		<!--  -->
+		<h2>Requirements</h2>
 		<ul>
 			<li><a href="http://jquery.com/">jQuery</a> 1.8+</li>
 			<li>A recent/decent web browser (Firefox, Chrome or Opera suggested; IE8+ works too)</li>

js/jquery.datepicker.js

@@ -15,6 +15,18 @@
 			daysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
 		},
 		defaults: {
+			formatDate: function(date) {
+				var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
+				return formatted;
+			},
+			parseDate: function(string) {
+				var date = new Date();
+				var parts = string.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
+				if ( parts && parts.length == 4 ) {
+					date = new Date( parts[3], parts[2] - 1, parts[1] );
+				}
+				return date;
+			},
 			limitCenturies: true,
 			closeOnPick: true
 		},
@@ -168,7 +180,7 @@
 							numbering++;
 							continue;
 						}
-						if (num == date.getDate() && month == date.getMonth() && year == date.getFullYear() && numbering < lastCur) {
+						if (numbering == date.getDate() && month == date.getMonth() && year == date.getFullYear()) {
 							type += ' today';
 						}
 						if (numbering == selected.getDate() && month == selected.getMonth() && year == selected.getFullYear()) {
@@ -196,10 +208,7 @@
 				if ( typeof opts.element == 'string' ) {
 					opts.element = $(opts.element);
 				}
-				var parts = opts.element.val().match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
-				if ( parts && parts.length == 4 ) {
-					date = new Date( parts[3], parts[2] - 1, parts[1] );
-				}
+				date = opts.parseDate( opts.element.val() );
 			}
 			var selected = {
 					day: date.getDate(),
@@ -247,7 +256,7 @@
 				date.setDate(selected.day);
 				date.setMonth(selected.month);
 				date.setYear(selected.year);
-				var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
+				var formatted = opts.formatDate(date);
 				$(opts.element).val(formatted);
 				if (opts.closeOnPick) {
 					$.datePicker.hide();