https://rumblingbald.com/wp-content/themes/redrum/js/redrum-reques…?ver=4a56bdaa80b73936fbd7034a32107c93

1/**
2 * Spa request widget
3 *
4 * This is a bit messy due to the jQuery UI Datepicker not liking being used on
5 * anything other than an input field.
6 *
7 * @package Redrum_Resort
8 */
9(function ($) {
10
11	/** Hide the datepicker when the user clicks outside of it */
12	$(document).mouseup(function (e) {
13		var container = $("#datepicker");
14
15		// if the target of the click isn't the container nor a descendant of the container
16		if (!container.is(e.target) && container.has(e.target).length === 0) {
17			container.hide();
18		}
19	});
20
21	$(document).ready(function () {
22		/** Attach a datepicker to an empty div insdie the date area */
23		$( "#datepicker" ).datepicker({
24		  dateFormat: "yy-mm-dd",
25		  onSelect: function (dateText) {
26			  /* Update the date area when a date is selected */
27			  var date = moment(dateText);
28
29			  $(".gfield_date_year input").val(date.format("YYYY"));
30				$(".gfield_date_month input").val(date.format("MM"));
31				$(".gfield_date_day input").val(date.format("DD")).change();
32			  $("#datepicker").hide();
33		  }
34		}).hide();
35
36		/** Show the datepicker when any part of the date area is clicked */
37    $("#spa-datepicker").click(function() {
38       $("#datepicker").show();
39    });
40
41		/** When the date is changed, update the widget display */
42		$(".gfield_date_day input").on("change", function () {
43			var
44				year = $(".gfield_date_year input").val(),
45				month = $(".gfield_date_month input").val(),
46				day = $(".gfield_date_day input").val(),
47				date = !year ? moment() : moment(year + '-' + month + '-' + day);
48
49			/* Update the date section */
50			$("#spa-day-month").text(date.format("MMM"));
51			$("#spa-day-date").text(date.format("D"));
52			$("#spa-day-year").text(date.format("YYYY"));
53
54			/* Update the time section */
55			$("#spa-time-hour").text($(".gfield_time_hour input").val());
56			$("#spa-time-minute").text($(".gfield_time_minute input").val());
57
58			/* Set the opacity of the AM/PM indicator */
59			if ($(".gfield_time_ampm select").val() == "am") {
60				$("#spa-time-am").css({opacity: 1});
61				$("#spa-time-pm").css({opacity: 0.2});
62			} else {
63				$("#spa-time-am").css({opacity: 0.2});
64				$("#spa-time-pm").css({opacity: 1});
65			}
66		}).change();
67
68		/**
69		 * Increment/decrement the time by 15 minutes when the up and down arrows
70		 * are clicked
71		 */
72		$("#spa-timepicker .controls").on("click", "i", function () {
73			var
74				minute = parseInt($(".gfield_time_minute input").val()),
75				hour = parseInt($(".gfield_time_hour input").val()),
76				ampm = $(".gfield_time_ampm select").val();
77
78			/* Increment with the up arrow, decrement with the down */
79			if ($(this).hasClass("fa-arrow-circle-up")) {
80				minute = minute + 15;
81			} else {
82				minute = minute - 15;
83			}
84
85			if (minute >= 60) {
86				if (hour == 11) {
87					ampm = ampm == "am" ? "pm" : "am";
88				}
89				hour++;
90				minute = '00';
91			} else if (minute < 0) {
92				if (hour == 12) {
93					ampm = ampm == "am" ? "pm" : "am";
94				}
95				hour--;
96				minute = 60 + minute;
97			} else if (minute == 0) {
98				minute = '00';
99			}
100
101			if (hour > 12) {
102				hour = 1;
103			} else if (hour < 1) {
104				hour = 12;
105			}
106
107			$(".gfield_time_minute input").val(minute);
108			$(".gfield_time_hour input").val(hour);
109			$(".gfield_time_ampm select").val(ampm);
110			$(".gfield_date_day input").change();
111		});
112	});
113})(jQuery);