datatables.net-datetime 1.1.2 → 1.3.0

package/docs/api/valFormat().xml

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-api library="DateTime">
+	<name>valFormat()</name>
+	<summary>Get / set a formatted value for the instance.</summary>
+	<since>1.3.0</since>
+
+	<type type="function">
+		<signature>valFormat(format)</signature>
+		<description>Get the value of the DateTime instance.</description>
+		<parameter type="string" name="format">
+			The format that you want the date/time value in.
+		</parameter>
+		<returns type="string">The formatted value.</returns>
+	</type>
+	<type type="function">
+		<signature>valFormat(format, set)</signature>
+		<description>Set the value of the DateTime instance.</description>
+		<parameter type="string" name="format">
+			The format that the date / time value string is currently in.
+		</parameter>
+		<parameter type="string" name="set">
+			The value to be set, in the format given by the first parameter.
+		</parameter>
+		<returns type="DateTime">Self for chaining.</returns>
+	</type>
+
+	<description>
+		This method can be used to get or set the value for the DateTime instance, in a specific format. For example, it can be used to set a value given in a format that is not ISO8601, or you could read back a value in some other format (i.e. a localised human readable format).
+		
+		The formatting options available will depend upon the date / time library being used (e.g. Moment.js or Luxon).
+	</description>
+
+	<example title="Get a value from the input with a specific format"><![CDATA[
+
+let el = document.getElementById('example');
+let dt = new DateTime(el);
+
+el.addEventListener('change', function () {
+	console.log('Selected value is: ', dt.valFormat('MM-DD-YYYY'));
+} );
+
+]]></example>
+
+<example title="Set a value into the input from a formatted string"><![CDATA[
+
+let dt = new DateTime(document.getElementById('example'));
+
+dt.valFormat('MM-DD-YY', '03-02-23");
+
+]]></example>
+
+</dt-api>

package/docs/option/buttons.today.xml

@@ -9,7 +9,7 @@
 	</default>
 
 	<description>
-		When enabled, this option will cause DateTime to show a button (text set by `dt-init i18n.today`) which the end user can activate to shift the calendar view to show today's date.
+		When enabled, this option will cause DateTime to show a button (text set by `de-init i18n.today`) which the end user can activate to shift the calendar view to show today's date.
 
 		Note that the value of the field does not change when activating this button.
 	</description>

package/examples/initialisation/datetime.xml

@@ -7,7 +7,7 @@
 <![CDATA[
 
 $(document).ready(function() {
-    new DateTime(document.getElementById('test'), {
+    window.d = new DateTime(document.getElementById('test'), {
         format: 'D MMM YYYY HH:mm'
     });
 });

package/examples/initialisation/dayjs.xml

@@ -2,15 +2,17 @@
 <dt-example table-type="html" table-class="display nowrap" order="9">
 
 <css lib="datetime"/>
-<js lib="//cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.17/dayjs.min.js"/>
-<js lib="//cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.17/plugin/utc.js"/>
+<js lib="//cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js"/>
+<js lib="//cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/utc.js"/>
+<js lib="//cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/customParseFormat.min.js"/>
 <js lib="jquery datetime">
 <![CDATA[
 
 dayjs.extend(dayjs_plugin_utc);
+dayjs.extend(dayjs_plugin_customParseFormat);
 
 $(document).ready(function() {
-    new DateTime(document.getElementById('test'), {
+    window.allan = new DateTime(document.getElementById('test'), {
         format: 'D/M/YYYY'
     });
 });
@@ -23,12 +25,12 @@ $(document).ready(function() {
 
 This example shows the date / time input with [DayJS](https://github.com/iamkun/dayjs) used to provide the date / time formatting.
 
-Please note that you also need the DayJS `UTC` plugin.
+Please note that you also need the DayJS `UTC` and `customParseFormat` plug-ins.
 
 ]]></info>
 
 <custom-table>
-    <input id="test" type="text" value="17/1/2020" />
+    <input id="test" type="text" value="17/1/2022" />
 </custom-table>
 
 </dt-example>

package/examples/initialisation/luxon.xml

@@ -7,7 +7,7 @@
 <![CDATA[
 
 $(document).ready(function() {
-    new DateTime(document.getElementById('test'), {
+    window.allan = new DateTime(document.getElementById('test'), {
         format: 'd/M/yyyy, HH:mm'
     });
 });

package/js/dataTables.dateTime.d.ts

@@ -1,53 +1,67 @@
+// Type definitions for DataTables DateTime
+//
+// Project: https://datatables.net/extensions/datetime
+// Definitions by:
+//   SpryMedia
 
-declare module 'datatables.net-datetime' {
-	interface IDateTimeOptions {
-		classPrefix?: string;
-		disableDays?: number[] | null;
-		firstDay?: number;
-		format?: string;
-		hoursAvailable?: number[] | null;
-		i18n?: {
-			previous?: string;
-			next?: string;
-			months?: string[];
-			weekdays?: string[];
-			amPm?: string[];
-			hours?: string;
-			minutes?: string;
-			seconds?: string;
-			unknown?: string;
-		};
-		maxDate?: Date | null;
-		minDate?: Date | null;
-		minutesAvailable?: number[] | null;
-		strict?: boolean;
-		locale?: string;
-		onChange?: (value: string, date: Date, el: HTMLElement) => void;
-		secondsAvailable?: number[] | null;
-		showWeekNumber?: boolean;
-		yearRange?: number;
-	}
+/// <reference types="jquery" />
 
-	class DateTime {
-		static use(moment: any); // Moment library
+interface IDateTimeOptions {
+	classPrefix?: string;
+	disableDays?: number[] | null;
+	firstDay?: number;
+	format?: string;
+	hoursAvailable?: number[] | null;
+	i18n?: {
+		previous?: string;
+		next?: string;
+		months?: string[];
+		weekdays?: string[];
+		amPm?: string[];
+		hours?: string;
+		minutes?: string;
+		seconds?: string;
+		unknown?: string;
+	};
+	maxDate?: Date | null;
+	minDate?: Date | null;
+	minutesAvailable?: number[] | null;
+	strict?: boolean;
+	locale?: string;
+	onChange?: (value: string, date: Date, el: HTMLElement) => void;
+	secondsAvailable?: number[] | null;
+	showWeekNumber?: boolean;
+	yearRange?: number;
+}
 
-		constructor(el: HTMLElement, opts?: IDateTimeOptions);
-		
-		destroy(): void;
-		errorMsg(): this;
-		errorMsg(message: string): this;
-		hide(): this;
-		max(max: Date): this;
-		main(min: Date): this;
-		owns(el: HTMLElement): boolean;
-		val(): Date;
-		val(set: string | Date): this;
-	}
+export class DateTime {
+	static use(moment: any); // Moment library
 
-	export = DateTime;
+	constructor(el: HTMLElement, opts?: IDateTimeOptions);
+	
+	destroy(): void;
+	errorMsg(): this;
+	errorMsg(message: string): this;
+	hide(): this;
+	max(max: Date): this;
+	main(min: Date): this;
+	owns(el: HTMLElement): boolean;
+	val(): Date;
+	val(set: string | Date): this;
+	valFormat(format: string): string;
+	valFormat(format: string, val: string): this;
+}
 
-	// jQuery interface additions
-	interface JQuery {
-		dtDateTime(opts?: IDateTimeOptions): JQuery;
+export default DateTime;
+
+// jQuery interface additions
+interface JQuery {
+	dtDateTime(opts?: IDateTimeOptions): JQuery;
+}
+
+// Also attached to DataTables object
+declare module 'datatables.net-datetime' {
+	interface ApiStatic {
+		DataTime: DateTime;
 	}
 }

package/js/dataTables.dateTime.js

@@ -1,4 +1,4 @@
-/*! DateTime picker for DataTables.net v1.1.2
+/*! DateTime picker for DataTables.net v1.3.0
  *
  * © SpryMedia Ltd, all rights reserved.
  * License: MIT datatables.net/license/mit
@@ -6,34 +6,11 @@
 
 /**
  * @summary     DateTime picker for DataTables.net
- * @version     1.1.2
+ * @version     1.3.0
  * @file        dataTables.dateTime.js
  * @author      SpryMedia Ltd
  * @contact     www.datatables.net/contact
  */
-(function( factory ){
-	if ( typeof define === 'function' && define.amd ) {
-		// AMD
-		define( ['jquery'], function ( $ ) {
-			return factory( $, window, document );
-		} );
-	}
-	else if ( typeof exports === 'object' ) {
-		// CommonJS
-		module.exports = function (root, $) {
-			if ( ! root ) {
-				root = window;
-			}
-
-			return factory( $, root, root.document );
-		};
-	}
-	else {
-		// Browser
-		factory( jQuery, window, document );
-	}
-}(function( $, window, document, undefined ) {
-'use strict';
 
 // Supported formatting and parsing libraries:
 // * Moment
@@ -87,25 +64,16 @@ var DateTime = function ( input, opts ) {
 		this.c.maxDate = new Date(this.c.maxDate);
 	}
 
-	var timeBlock = function ( type ) {
-		return '<div class="'+classPrefix+'-timeblock">'+
-			'</div>';
-	};
-
-	var gap = function () {
-		return '<span>:</span>';
-	};
-
 	// DOM structure
 	var structure = $(
 		'<div class="'+classPrefix+'">'+
 			'<div class="'+classPrefix+'-date">'+
 				'<div class="'+classPrefix+'-title">'+
 					'<div class="'+classPrefix+'-iconLeft">'+
-						'<button type="button" title="'+i18n.previous+'">'+i18n.previous+'</button>'+
+						'<button type="button"></button>'+
 					'</div>'+
 					'<div class="'+classPrefix+'-iconRight">'+
-						'<button type="button" title="'+i18n.next+'">'+i18n.next+'</button>'+
+						'<button type="button"></button>'+
 					'</div>'+
 					'<div class="'+classPrefix+'-label">'+
 						'<span></span>'+
@@ -117,8 +85,8 @@ var DateTime = function ( input, opts ) {
 					'</div>'+
 				'</div>'+
 				'<div class="'+classPrefix+'-buttons">'+
-					'<a class="'+classPrefix+'-clear">'+i18n.clear+'</a>'+
-					'<a class="'+classPrefix+'-today">'+i18n.today+'</a>'+
+					'<a class="'+classPrefix+'-clear"></a>'+
+					'<a class="'+classPrefix+'-today"></a>'+
 				'</div>'+
 				'<div class="'+classPrefix+'-calendar"></div>'+
 			'</div>'+
@@ -138,9 +106,11 @@ var DateTime = function ( input, opts ) {
 		calendar:  structure.find( '.'+classPrefix+'-calendar' ),
 		time:      structure.find( '.'+classPrefix+'-time' ),
 		error:     structure.find( '.'+classPrefix+'-error' ),
-		buttons:     structure.find( '.'+classPrefix+'-buttons' ),
+		buttons:   structure.find( '.'+classPrefix+'-buttons' ),
 		clear:     structure.find( '.'+classPrefix+'-clear' ),
 		today:     structure.find( '.'+classPrefix+'-today' ),
+		previous:  structure.find( '.'+classPrefix+'-iconLeft' ),
+		next:      structure.find( '.'+classPrefix+'-iconRight' ),
 		input:     $(input)
 	};
 
@@ -268,28 +238,10 @@ $.extend( DateTime.prototype, {
 			this.s.d = null;
 		}
 		else if ( set === '--now' ) {
-			this.s.d = new Date();
+			this.s.d = this._dateToUtc(new Date());
 		}
 		else if ( typeof set === 'string' ) {
-			// luxon uses different method names so need to be able to call them
-			if(dateLib && dateLib == window.luxon) {
-				var luxDT = dateLib.DateTime.fromFormat(set, this.c.format)
-				this.s.d = luxDT.isValid ? luxDT.toJSDate() : null;
-			}
-			else if ( dateLib ) {
-				// Use moment, dayjs or luxon if possible (even for ISO8601 strings, since it
-				// will correctly handle 0000-00-00 and the like)
-				var m = dateLib.utc( set, this.c.format, this.c.locale, this.c.strict );
-				this.s.d = m.isValid() ? m.toDate() : null;
-			}
-			else {
-				// Else must be using ISO8601 without a date library (constructor would
-				// have thrown an error otherwise)
-				var match = set.match(/(\d{4})\-(\d{2})\-(\d{2})/ );
-				this.s.d = match ?
-					new Date( Date.UTC(match[1], match[2]-1, match[3]) ) :
-					null;
-			}
+			this.s.d = this._convert(set, this.c.format, null);
 		}
 
 		if ( write || write === undefined ) {
@@ -319,6 +271,25 @@ $.extend( DateTime.prototype, {
 		return this;
 	},
 
+	/**
+	 * Similar to `val()` but uses a given date / time format
+	 *
+	 * @param format Format to get the data as (getter) or that is input (setter)
+	 * @param val Value to write (if undefined, used as a getter)
+	 * @returns 
+	 */
+	valFormat: function (format, val) {
+		if (! val) {
+			return this._convert(this.val(), null, format);
+		}
+
+		// Convert from the format given here to the instance's configured format
+		this.val(
+			this._convert(val, format, null)
+		);
+
+		return this;
+	},
 
 	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 	 * Constructor
@@ -586,6 +557,7 @@ $.extend( DateTime.prototype, {
 								'setSeconds';
 
 						d[set]( val );
+						that._setCalander();
 						that._setTime();
 						that._writeOutput( true );
 						onChange();
@@ -619,6 +591,7 @@ $.extend( DateTime.prototype, {
 						}
 						else {
 							that._setCalander();
+							that._setTime();
 						}
 
 						onChange();
@@ -648,11 +621,75 @@ $.extend( DateTime.prototype, {
 	_compareDates: function( a, b ) {
 		// Can't use toDateString as that converts to local time
 		// luxon uses different method names so need to be able to call them
-		return dateLib && dateLib == window.luxon
-			? dateLib.DateTime.fromJSDate(a).toISODate() === dateLib.DateTime.fromJSDate(b).toISODate()
+		return this._isLuxon()
+			? dateLib.DateTime.fromJSDate(a).toUTC().toISODate() === dateLib.DateTime.fromJSDate(b).toUTC().toISODate()
 			: this._dateToUtcString(a) === this._dateToUtcString(b);
 	},
 
+	/**
+	 * Convert from one format to another
+	 *
+	 * @param {string|Date} val Value 
+	 * @param {string|null} from Format to convert from. If null a `Date` must be given
+	 * @param {string|null} to Format to convert to. If null a `Date` will be returned
+	 * @returns {string|Date} Converted value
+	 */
+	_convert(val, from, to) {
+		if (! val) {
+			return val;
+		}
+
+		if (! dateLib) {
+			// Note that in here from and to can either be null or YYYY-MM-DD
+			// They cannot be anything else
+			if ((! from && ! to) || (from && to)) {
+				// No conversion
+				return val;
+			}
+			else if (! from) {
+				// Date in, string back
+				return val.getUTCFullYear() +'-'+
+					this._pad(val.getUTCMonth() + 1) +'-'+
+					this._pad(val.getUTCDate());
+			}
+			else { // (! to)
+				// String in, date back
+				var match = val.match(/(\d{4})\-(\d{2})\-(\d{2})/ );
+				return match ?
+					new Date( Date.UTC(match[1], match[2]-1, match[3]) ) :
+					null;
+			}
+		}
+		else if (this._isLuxon()) {
+			// Luxon
+			var dtLux = val instanceof Date
+				? dateLib.DateTime.fromJSDate(val).toUTC()
+				: dateLib.DateTime.fromFormat(val, from);
+
+			if (! dtLux.isValid) {
+				return null;
+			}
+
+			return to
+				? dtLux.toFormat(to)
+				: this._dateToUtc(dtLux.toJSDate());
+		}
+		else {
+			// Moment / DayJS
+			var dtMo = val instanceof Date
+				? dateLib.utc( val, undefined, this.c.locale, this.c.strict )
+				: dateLib.utc( val, from, this.c.locale, this.c.strict );
+			
+			if (! dtMo.isValid()) {
+				return null;
+			}
+
+			return to
+				? dtMo.format(to)
+				: dtMo.toDate();
+		}
+	},
+
 	/**
 	 * When changing month, take account of the fact that some months don't have
 	 * the same number of days. For example going from January to February you
@@ -714,8 +751,8 @@ $.extend( DateTime.prototype, {
 	 */
 	_dateToUtcString: function ( d ) {
 		// luxon uses different method names so need to be able to call them
-		return dateLib && dateLib == window.luxon
-			? dateLib.DateTime.fromJSDate(d).toISODate()
+		return this._isLuxon()
+			? dateLib.DateTime.fromJSDate(d).toUTC().toISODate()
 			: d.getUTCFullYear()+'-'+
 				this._pad(d.getUTCMonth()+1)+'-'+
 				this._pad(d.getUTCDate());
@@ -974,6 +1011,17 @@ $.extend( DateTime.prototype, {
 		return '<td class="'+this.c.classPrefix+'-week">' + weekNum + '</td>';
 	},
 
+	/**
+	 * Determine if Luxon is being used
+	 *
+	 * @returns Flag for Luxon
+	 */
+	_isLuxon: function () {
+		return dateLib && dateLib.DateTime && dateLib.Duration && dateLib.Settings
+			? true
+			: false;
+	},
+
 	/**
 	 * Check if the instance has a date object value - it might be null.
 	 * If is doesn't set one to now.
@@ -983,6 +1031,13 @@ $.extend( DateTime.prototype, {
 	_needValue: function () {
 		if ( ! this.s.d ) {
 			this.s.d = this._dateToUtc( new Date() );
+
+			if (! this.s.parts.time) {
+				this.s.d.setUTCHours(0);
+				this.s.d.setUTCMinutes(0);
+				this.s.d.setSeconds(0);
+				this.s.d.setMilliseconds(0);
+			}
 		}
 
 		return this.s.d;
@@ -1077,7 +1132,7 @@ $.extend( DateTime.prototype, {
 				'selected' :
 				'';
 			
-			if (allowed && $.inArray(value, allowed) === -1) {
+			if (typeof value === 'number' && allowed && $.inArray(value, allowed) === -1) {
 				selected += ' disabled';
 			}
 
@@ -1137,9 +1192,11 @@ $.extend( DateTime.prototype, {
 			// Slight hack to allow for the different number of columns
 			a += '</tbody></thead><table class="'+className+' '+className+'-nospace"><tbody>';
 
-			var start = range !== null ?
-				range :
-				Math.floor( val / 10 )*10;
+			var start = range !== null
+				? range
+				: val === -1
+					? 0
+					: Math.floor( val / 10 )*10;
 
 			a += '<tr>';
 			for (j=start+1 ; j<start+10 ; j++ ) {
@@ -1183,6 +1240,18 @@ $.extend( DateTime.prototype, {
 
 		this._options( 'month', this._range( 0, 11 ), i18n.months );
 		this._options( 'year', this._range( i, j ) );
+
+		// Set the language strings in case any have changed
+		this.dom.today.text(i18n.today).text(i18n.today);
+		this.dom.clear.text(i18n.clear).text(i18n.clear);
+		this.dom.previous
+			.attr('title', i18n.previous)
+			.children('button')
+			.text(i18n.previous);
+		this.dom.next
+			.attr('title', i18n.next)
+			.children('button')
+			.text(i18n.next);
 	},
 
 	/**
@@ -1319,15 +1388,15 @@ $.extend( DateTime.prototype, {
 		
 		// luxon uses different method names so need to be able to call them. This happens a few time later in this method too
 		var luxDT = null
-		if (dateLib && dateLib == window.luxon) {
-			luxDT = dateLib.DateTime.fromJSDate(d);
+		if (this._isLuxon()) {
+			luxDT = dateLib.DateTime.fromJSDate(d).toUTC();
 		}
 
 		var hours = luxDT != null
 			? luxDT.hour
 			: d
 				? d.getUTCHours()
-				: 0;
+				: -1;
 
 		var allowed = function ( prop ) { // Backwards compt with `Increment` option
 			return that.c[prop+'Available'] ?
@@ -1343,7 +1412,8 @@ $.extend( DateTime.prototype, {
 				? luxDT.minute
 				: d
 					? d.getUTCMinutes()
-					: 0, allowed('minutes'),
+					: -1,
+			allowed('minutes'),
 			this.s.minutesRange
 		);
 		this._optionsTime(
@@ -1353,7 +1423,7 @@ $.extend( DateTime.prototype, {
 				? luxDT.second
 				: d
 					? d.getSeconds()
-					: 0,
+					: -1,
 			allowed('seconds'),
 			this.s.secondsRange
 		);
@@ -1428,17 +1498,8 @@ $.extend( DateTime.prototype, {
 		var date = this.s.d;
 		var out = '';
 
-		// Use moment, dayjs or luxon if possible - otherwise it must be ISO8601 (or the
-		// constructor would have thrown an error)
-		// luxon uses different method names so need to be able to call them.
 		if (date) {
-			out = dateLib && dateLib == window.luxon
-			? dateLib.DateTime.fromJSDate(this.s.d).toFormat(this.c.format)
-			: dateLib ?
-				dateLib.utc( date, undefined, this.c.locale, this.c.strict ).format( this.c.format ) :
-				date.getUTCFullYear() +'-'+
-					this._pad(date.getUTCMonth() + 1) +'-'+
-					this._pad(date.getUTCDate());
+			out = this._convert(date, null, this.c.format);
 		}
 
 		this.dom.input
@@ -1535,7 +1596,7 @@ DateTime.defaults = {
 	yearRange: 25
 };
 
-DateTime.version = '1.1.2';
+DateTime.version = '1.3.0';
 
 // Global export - if no conflicts
 if (! window.DateTime) {
@@ -1558,7 +1619,3 @@ if ($.fn.dataTable) {
 		$.fn.dataTable.Editor.DateTime = DateTime;
 	}
 }
-
-return DateTime;
-
-}));

package/make.sh

@@ -29,7 +29,7 @@ fi
 
 ./node_modules/gulp/bin/gulp.js
 
-js_compress dist/dataTables.dateTime.js
+js_wrap dist/dataTables.dateTime.js "jquery"
 css_compress dist/dataTables.dateTime.css
 
 if [ ! -d $OUT_DIR ]; then
@@ -39,6 +39,7 @@ if [ ! -d $OUT_DIR ]; then
 fi
 
 rsync -r dist/*.js $OUT_DIR/js
+rsync -r dist/*.mjs $OUT_DIR/js
 rsync -r dist/*.css $OUT_DIR/css
 
 # Copy and build examples

package/nuget.nuspec

@@ -2,7 +2,7 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
     <metadata>
         <id>datatables.net-datetime</id>
-        <version>1.1.2</version>
+        <version>1.3.0</version>
         <description>DataTables date / time picker</description>
         <authors>SpryMedia Ltd</authors>
         <projectUrl>http://datatables.net</projectUrl>

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "datatables.net-datetime",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "DateTime picker for DataTables.net",
   "main": "dist/dataTables.dateTime.js",
+  "module": "dist/dataTables.dateTime.mjs",
   "style": "dist/dataTables.dateTime.css",
   "types": "js/dataTables.dateTime.d.ts",
   "scripts": {

package/test/api/dateTime.val().js

@@ -21,7 +21,7 @@ describe('dateTime - api - val()', function () {
 		dt.html('input');
 		it('Ensure its a function', function () {
 			el = new DateTime(document.getElementById('test'));
-			expect(typeof el.min).toBe('function');
+			expect(typeof el.val).toBe('function');
 		});
 		it('Getter returns null if no date set', function () {
 			expect(el.val()).toBe(null);