DatePicker

Calendar widget that appears in Aside. Used in Forms for an implementation of <input type="date"> elements.

The DatePicker can be launched with a JavaScript API. You should implement the onselect method to get notified whenever the user picks a date. Note that you must manually open and close the DatePicker.

var datePicker = ts.ui.DatePicker({
	title: "Your Birthday",
	value: '1973-03-26',
	onselect: function(newval, oldval) {
		ts.ui.Notification.success(this.value);
		this.close();
	},
	onclosed: function() {
		this.dispose();
	}
});
datePicker.open();

You can specify a min and max value.

ts.ui.DatePicker({
	title: "Your Birthday",
	value: '1984-05-23',
	min: '1984-01-01',
	max: '1985-12-24',
	onselect: function() {
		this.close();
	},
	onclosed: function() {
		this.dispose();
	}
}).open();

You can also use the onrendercell callback to manually adjust which cells are selectable, as well add in additional classes per cell for styling purposes.

ts.ui.DatePicker({
	title: "Manually Set Clickable Dates",
	value: '1984-05-23',
	min: '1984-01-01',
	max: '1985-12-24',
	onrendercell: function(cell){
		var jsDate = new Date(cell.year, cell.month, cell.day);
		var isWeekday = ![0,6].includes(jsDate.getDay());
			cell.selectable = isWeekday;
			cell.className = (isWeekday ? 'weekday' : 'weekend');
		},
		onselect: function() {
			ts.ui.Notification.success(this.value);
			this.close();
		},
		onclosed: function() {
			this.dispose();
		}
	}).open();

Here is an example DatePicker where a value is NOT set ahead of time.

ts.ui.DatePicker({
	title: "Date Range with no starting value",
	value: null,
	min: '2019-01-01',
	max: '2019-03-31',
	onselect: function() {
		ts.ui.Notification.success(this.value);
		this.close();
	},
	onclosed: function() {
		this.dispose();
	}
}).open();

You can set and change a note for the datepicker.

ts.ui.DatePicker({
	title: 'The note is under the header',
	value: '2019-01-01',
	note: 'Have a nice day',
	onselect: function() {
		this.close();
	},
	onclosed: function() {
		this.dispose();
	}
}).open();

You can also make a deselect datepicker.

ts.ui.DatePicker({
	title: 'Deselect the date',
	value: '2019-01-01',
	deselectable: true,
	onselect: function() {
		ts.ui.Notification.success('You deselected the date');
		this.close();
	},
	onclosed: function() {
		this.dispose();
	}
}).open();

The object argument configures a ts.ui.DatePickerModel as outlined below.

If you find a bug or need a feature…

Create GitHub Issue…