datatables.net-datetime/examples/integration/form.xml

DateTime picker for DataTables.net

<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html" table-class="display nowrap" order="1">

<css lib="datetime bootstrap4"/>

<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();

	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[

This example shows the DateTime picker being used in a [Bootstrap 4](https://getbootstrap.com/docs/4.6/components/forms/) styled form. The date and time have been separated into separate fields to demonstrate that ability, but equally could be combined into a single field if needed.

The form submission will just show an alert with the information from the form in this case.

]]></info>

<custom-table>
	<form id="appointment">
		<div class="form-group">
		  <label for="inputName">Name</label>
		  <input type="text" class="form-control" id="inputName" />
		</div>
		<div class="form-group">
		  <label for="inputPhone">Phone number</label>
		  <input type="text" class="form-control" id="inputPhone"/>
		</div>
		<div class="form-group">
		  <label for="inputDate">Appointment Date</label>
		  <input type="text" class="form-control" id="inputDate"/>
		</div>
		<div class="form-group">
		  <label for="inputTime">Appointment Time</label>
		  <input type="text" class="form-control" id="inputTime"/>
		</div>
		<button type="submit" class="btn btn-primary">Submit</button>
	  </form>
</custom-table>

</dt-example>