examples/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DateTimePicker - Example Usage</title>
	<link href="../src/css/datetimepicker.css" rel="stylesheet"/>
	<link href="../src/css/jquery-ui.css" rel="stylesheet"/>
	<link href="../src/css/jquery-ui-extra.css" rel="stylesheet"/>
	<style type="text/css">
		.example:after,
		.clearfix::after {
			content: "";
			clear:   both;
			display: table;
		}

		.bold-extra .datetimepicker-extra {
			color:       #FF0000;
			font-weight: bold;
		}

		.now-button{
			padding: 5px;
			margin: 0 10px;
			color: white;
			background: darkgreen;
			border-collapse: collapse;
			border: 1px solid lightgreen;
		}
		.day-end{
			padding: 5px;
			margin: 0 10px;
			color: white;
			background: darkred;
			border-collapse: collapse;
			border: 1px solid red;
		}
	</style>
</head>
<body>
<script src="../dep/jquery.1.10.2.js"></script>
<script src="../dep/jquery-ui.1.11.4.js"></script>
<script src="../dep/moment.js"></script>
<script src="../dep/locale/default.js"></script>
<script src="../src/js/datetimepicker.js"></script>
<script type="text/javascript">
	$(document)
		.ready(
			function (){
				$.DateTimePicker.defaultOptions.template = $.DateTimePicker.getTemplate('../src/html/datetimepicker.html');

				$("#date-picker1")
					.DateTimePicker(
						{
							allow: {
								months: "MM-Y",
								weeks: "[W]W-Y",
								days: 'DD-MM-Y',
								time: "DD-MM-Y H:mm"
							},
							debug: false,
							displayWeeks: true,
							view: 'days',
							inline: true
						}
					);

				$("#date-picker2")
					.DateTimePicker(
						{
							debug: true,
							view: 'days',
							allow: {
								days: 'DD/MM/Y'
							},
							min: moment()
								.subtract(1, "month"),
							max: moment()
								.add(1, "month")
						}
					);

				$("#date-picker3")
					.DateTimePicker({
						allow: {
							months: 'MM/Y',
							days: "DD/MM/Y"
						}
					});

				$(".date-range")
					.DateTimePicker({
						allow: {
							days: 'DD-MM-Y'
						},
						min: moment()
							.subtract(1, "month"),
						max: moment()
							.add(1, "month"),
						hooks: {
							init: function (){
								if(typeof this.$el.data("data-max") === typeof void 0)
								{
									this.$el.data("data-max", this.options.max);
								}
								if(typeof this.$el.data("data-min") === typeof void 0)
								{
									this.$el.data("data-min", this.options.min);
								}
							}
						}
					})
					.DateTimePicker(
						"hooks",
						{
							"set": function (){
								let value = this.$el.val();
								let $opposite = null;

								if(this.$el.hasClass("data-min"))
								{
									$opposite = $('.date-range')
										.filter('.data-max');

									if(!value)
									{
										value = $opposite.data('data-min');
									}

									if(typeof value === typeof void 0)
									{
										value = null;
									}

									$opposite.DateTimePicker(
										"options",
										{
											min: value
										}
									);
								}

								if(this.$el.hasClass("data-max"))
								{
									$opposite = $('.date-range')
										.filter('.data-min');

									if(!value)
									{
										value = $opposite.data('data-max');
									}

									$opposite.DateTimePicker(
										"options",
										{
											max: value
										}
									);
								}
							}
						})
					.on(
						"change",
						function (){
							let $this = $(this);
							let base = $this.data('DateTimePicker');

							base.callHook("set");
						}
					);

				$("#date-picker5")
					.DateTimePicker({
						allow: {
							months: "Y-MM",
							days: "Y-MM-DD"
						},
						classes: 'bold-extra',
						hooks: {
							showCalendar: function ($placeholder, view){
								let $extra = $placeholder.find(".datetimepicker-extra");
								switch(view)
								{
								case 'days':
									$extra.html("Click on a day to select");
									this.showView($extra);
									break;

								case 'months':
									$extra.html("Click on a month to select");
									this.showView($extra);
									break;

								default:
									view = view.charAt(0)
										.toUpperCase() + view.substr(1);
									$extra.html(view + " is not selectable!");
									this.showView($extra);
									break;
								}
							}
						}
					})
					.DateTimePicker(
						"hooks",
						{
							"showCalendar": function ($placeholder, view){
								console.log($placeholder, view);
							}
						}
					);

				$("#date-picker6")
					.DateTimePicker({
						allow: {
							years: 'Y',
							months: "Y-MM",
							weeks: "Y-[W]W",
							days: "Y-MM-DD"
						}
					});

				$("#date-picker7")
					.DateTimePicker({
						allow: {
							years: 'Y',
							months: "Y-MM",
							weeks: "Y-[W]W",
							days: "Y-MM-DD",
							time: "Y-MM-DD H:mm:ss.SSS"
						},
						trigger:{
							"#date-picker7-month-trigger": "months",
							"#date-picker7-day-trigger": "days"
						}
					});

				$("#date-picker8")
					.DateTimePicker({
						allow: {
							time: "Y-MM-DD H:mm:ss.SSS"
						}
					});

				$("#date-picker9")
					.DateTimePicker({
						allow: {
							time: "Y-MM-DD HH:mm:ss.SSS",
							months: "Y-MM"
						},
						buttons:[
							$.DateTimePicker.DefaultButtons.dayBegin,
							$.DateTimePicker.DefaultButtons.now.setOptions({className: 'now-button'}),
							$.DateTimePicker.DefaultButtons.dayEnd.setOptions({className: 'day-end'})
						]
					});

				/*
				$("#date-picker7-month-trigger")
					.on(
						"click",
						function (){
							$("#date-picker7")
								.DateTimePicker(
									"exec", {
										show: ["months"]
									}
								);
						}
					);

				$("#date-picker7-day-trigger")
					.on(
						"click",
						function (){
							$("#date-picker7")
								.DateTimePicker(
									"exec", {
										show: ["days"]
									}
								);
						}
					);
					*/
			}
		);
</script>

<div class="example">
	<h1>Example 1</h1>
	<h2>Date + Time - Inline Selector</h2>
	<input placeholder="Inline Date+Time Picker" id="date-picker1" type="text"/>
</div>


<div class="example">
	<h1>Example 2</h1>
	<h2>Date without time limited to a month before and a month after today</h2>
	<input placeholder="Limited Interval Picker" id="date-picker2" type="text"/>
</div>

<div class="example">
	<h1>Example 3</h1>
	<h2>Date Picker - Possible outputs are months and days</h2>
	<input placeholder="Multiple Outputs Picker" id="date-picker3" type="text"/>
</div>

<div class="example">
	<h1>Example 4</h1>
	<h2>Date Interval Picker</h2>
	<input placeholder="First Day" id="date-picker4-1" class="date-range data-min" type="text"/> -
	<input placeholder="Last Day" id="date-picker4-2" class="date-range data-max" type="text"/>
</div>

<div class="example">
	<h1>Example 5</h1>
	<h2>Date Picker with an "extra" touch!</h2>
	<input placeholder="" id="date-picker5" type="text"/>
</div>
<div class="example">
	<h1>Example 6</h1>
	<h2>Year-, Month-, Week- and Day-Picker</h2>
	<input placeholder="" id="date-picker6" type="text"/>
</div>
<div class="example">
	<h1>Example 7</h1>
	<h2>Year-, Month-, Week-, Day- and Time-Picker</h2>
	<h3>with external triggers for opening monthly and daily views</h3>
	<input placeholder="" id="date-picker7" type="text"/>
	<button id="date-picker7-month-trigger" type="button">Month-Picker</button>
	<button id="date-picker7-day-trigger" type="button">Day-Picker</button>
</div>
<div class="example">
	<h1>Example 8</h1>
	<h2>Date-Time Picker</h2>
	<h3>both date and time must be selected</h3>
	<input placeholder="" id="date-picker8" type="text"/>
</div>
<div class="example">
	<h1>Example 9</h1>
	<h2>Date-Time Picker</h2>
	<h3>With Now, Day-Begin and Day-End buttons</h3>
	<input placeholder="" id="date-picker9" type="text"/>
</div>

</body>
</html>