datatables.net-datetime 1.4.1 → 1.5.0

package/examples/integration/form.xml

@@ -5,31 +5,50 @@
 
 <js lib="jquery moment datetime">
 <![CDATA[
+new DateTime('#inputDate', {
+	format: 'MMMM Do YYYY'
+});
+new DateTime('#inputTime', {
+	format: 'h:mm a'
+});
+
+$('#appointment').on('submit', function (e) {
+	e.preventDefault();
+
+	var name = $('#inputName').val();
+	var phone = $('#inputPhone').val();
+	var date = $('#inputDate').val();
+	var time = $('#inputTime').val();
 
-$(document).ready(function() {
-	new DateTime($('#inputDate'), {
-		format: 'MMMM Do YYYY'
-	});
-	new DateTime($('#inputTime'), {
-		format: 'h:mm a'
-	});
-
-	$('#appointment').on('submit', function (e) {
-		e.preventDefault();
-
-		alert(
-			'Making an appointment for ' +
-			$('#inputName').val() +
-			' (' + $('#inputPhone').val() + ') on ' +
-			$('#inputDate').val() + ' at ' +
-			$('#inputTime').val()
-		);
-	});
+	alert('Making an appointment for ' + name + ' (' + phone + ') on ' + date + ' at ' + time);
 });
 
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DateTime('#inputDate', {
+	format: 'MMMM Do YYYY'
+});
+new DateTime('#inputTime', {
+	format: 'h:mm a'
+});
+
+document.querySelector('#appointment').addEventListener('submit', function (e) {
+	e.preventDefault();
+
+	let name = document.querySelector('#inputName').value;
+	let phone = document.querySelector('#inputPhone').value;
+	let date = document.querySelector('#inputDate').value;
+	let time = document.querySelector('#inputTime').value;
+
+	alert('Making an appointment for ' + name + ' (' + phone + ') on ' + date + ' at ' + time);
+});
+
+]]>
+</js-vanilla>
+
 <title lib="DateTime">Use in a form</title>
 
 <info><![CDATA[

package/js/dataTables.dateTime.js

@@ -1,4 +1,4 @@
-/*! DateTime picker for DataTables.net v1.4.1
+/*! DateTime picker for DataTables.net v1.5.0
  *
  * © SpryMedia Ltd, all rights reserved.
  * License: MIT datatables.net/license/mit
@@ -6,7 +6,7 @@
 
 /**
  * @summary     DateTime picker for DataTables.net
- * @version     1.4.1
+ * @version     1.5.0
  * @file        dataTables.dateTime.js
  * @author      SpryMedia Ltd
  * @contact     www.datatables.net/contact
@@ -155,6 +155,8 @@ var DateTime = function ( input, opts ) {
 		.append( this.dom.buttons )
 		.append( this.dom.calendar );
 
+	this.dom.input.addClass('dt-datetime');
+
 	this._constructor();
 };
 
@@ -170,10 +172,33 @@ $.extend( DateTime.prototype, {
 		this._hide(true);
 		this.dom.container.off().empty();
 		this.dom.input
+			.removeClass('dt-datetime')
 			.removeAttr('autocomplete')
 			.off('.datetime');
 	},
 
+	display: function (year, month) {
+		if (year !== undefined) {
+			this.s.display.setUTCFullYear(year);
+		}
+
+		if (month !== undefined) {
+			this.s.display.setUTCMonth(month - 1);
+		}
+
+		if (year !== undefined || month !== undefined) {
+			this._setTitle();
+			this._setCalander();
+
+			return this;
+		}
+
+		return {
+			month: this.s.display.getUTCMonth() + 1,
+			year: this.s.display.getUTCFullYear()
+		};
+	},
+
 	errorMsg: function ( msg ) {
 		var error = this.dom.error;
 
@@ -1509,21 +1534,25 @@ $.extend( DateTime.prototype, {
 	_writeOutput: function ( focus ) {
 		var date = this.s.d;
 		var out = '';
+		var input = this.dom.input;
 
 		if (date) {
 			out = this._convert(date, null, this.c.format);
 		}
 
-		this.dom.input
-			.val( out )
-			.trigger('change', {write: date});
+		input.val( out );
+
+		// Create a DOM synthetic event. Can't use $().trigger() as
+		// that doesn't actually trigger non-jQuery event listeners
+		var event = new Event('change', {bubbles: true});
+		input[0].dispatchEvent(event);
 		
-		if ( this.dom.input.attr('type') === 'hidden' ) {
+		if ( input.attr('type') === 'hidden' ) {
 			this.val(out, false);
 		}
 
 		if ( focus ) {
-			this.dom.input.focus();
+			input.focus();
 		}
 	}
 } );
@@ -1613,7 +1642,7 @@ DateTime.defaults = {
 	yearRange: 25
 };
 
-DateTime.version = '1.4.1';
+DateTime.version = '1.5.0';
 
 /**
  * CommonJS factory function pass through. Matches DataTables.

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.4.0</version>
+        <version>1.5.0</version>
         <description>DataTables date / time picker</description>
         <authors>SpryMedia Ltd</authors>
         <projectUrl>http://datatables.net</projectUrl>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datatables.net-datetime",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "DateTime picker for DataTables.net",
   "main": "dist/dataTables.dateTime.js",
   "module": "dist/dataTables.dateTime.mjs",

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

@@ -27,7 +27,7 @@ describe('dateTime - api - destroy()', function () {
 		});
 		it('... date picker cant be opened', function () {
 			$('#test').click();
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 		});
 
 		dt.html('input');
@@ -35,15 +35,15 @@ describe('dateTime - api - destroy()', function () {
 			el = new DateTime(document.getElementById('test'), {});
 			$('#test').click();
 
-			expect($('.dt-datetime').length).toBe(1);
+			expect($('div.dt-datetime').length).toBe(1);
 
 			el.destroy();
 
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 		});
 		it('... date picker cant be opened', function () {
 			$('#test').click();
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 		});
 	});
 });

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

@@ -23,11 +23,11 @@ describe('dateTime - api - hide()', function () {
 			el = new DateTime(document.getElementById('test'), {});
 			el.hide();
 
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 		});
 		it('... date picker can be opened', function () {
 			$('#test').click();
-			expect($('.dt-datetime').length).toBe(1);
+			expect($('div.dt-datetime').length).toBe(1);
 		});
 
 		dt.html('input');
@@ -35,15 +35,15 @@ describe('dateTime - api - hide()', function () {
 			el = new DateTime(document.getElementById('test'), {});
 			$('#test').click();
 
-			expect($('.dt-datetime').length).toBe(1);
+			expect($('div.dt-datetime').length).toBe(1);
 
 			el.hide();
 
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 		});
 		it('... date picker can be opened', function () {
 			$('#test').click();
-			expect($('.dt-datetime').length).toBe(1);
+			expect($('div.dt-datetime').length).toBe(1);
 		});
 	});
 });

package/test/options/dateTime.firstDay.js

@@ -16,7 +16,7 @@ describe('dateTime - options - firstDay', function () {
 		it('Mid-week', function () {
 			new DateTime(document.getElementById('test'), {firstDay: 3});
 
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 			$('#test').click();
 			expect($('.dt-datetime-date thead th').text()).toBe('WedThuFriSatSunMonTue');
 		});
@@ -25,7 +25,7 @@ describe('dateTime - options - firstDay', function () {
 		it('end of week', function () {
 			new DateTime(document.getElementById('test'), {firstDay: 6});
 
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 			$('#test').click();
 			expect($('.dt-datetime-date thead th').text()).toBe('SatSunMonTueWedThuFri');
 		});

package/test/options/dateTime.init.js

@@ -9,9 +9,9 @@ describe('dateTime - basic initialisation', function () {
 		it('Standard initialsiation', function () {
 			new DateTime(document.getElementById('test'), {});
 
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 			$('#test').click();
-			expect($('.dt-datetime').length).toBe(1);
+			expect($('div.dt-datetime').length).toBe(1);
 		});
 
 		dt.html('input');
@@ -38,9 +38,9 @@ describe('dateTime - basic initialisation', function () {
 		dt.html('input');
 		it('jQuery initialsiation', function () {
 			$('#test').dtDateTime();
-			expect($('.dt-datetime').length).toBe(0);
+			expect($('div.dt-datetime').length).toBe(0);
 			$('#test').click();
-			expect($('.dt-datetime').length).toBe(1);
+			expect($('div.dt-datetime').length).toBe(1);
 		});
 
 		dt.html('input');

package/examples/initialisation/jquery.xml

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<dt-example table-type="html" table-class="display nowrap" order="2">
-
-<css lib="datetime"/>
-
-<js lib="jquery datetime">
-<![CDATA[
-
-$(document).ready(function() {
-    $('#test').dtDateTime();
-});
-
-]]>
-</js>
-
-<title lib="DateTime">jQuery initialisation</title>
-
-<info><![CDATA[
-
-This example shows the date / time input initialised via jQuery.
-
-]]></info>
-
-<custom-table>
-    <input id="test" type="text" value="2020-01-17" />
-</custom-table>
-
-</dt-example>