HTML5のinput要素に付与できるSpinnerとは何なのか？ページ読み込みのSpinnerとは関係ない

package com.form;

import lombok.Data;

@Data
public class ExampleForm {

	private String lastName;
	private String firstName;
	private String from;
	private String gender;
	private String birthday;

}

■/spring-mvc-jsp/src/main/webapp/WEB-INF/views/home/index.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<title>Home</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <spring:url value="/resources/static/common/js/jquery-ui-datespinner.js" var="jqueryUiDatespinner" />
  <script src="${jqueryUiDatespinner}"></script>
</head>
<body>
	<c:forEach var="str" items="${strList}">
		<p>${str}</p>
	</c:forEach>
	<c:forEach var="userDetail" items="${userDetailList}">
		<p>
			<span>${userDetail.lastName}</span> <span>${userDetail.firstName}
			</span>
		</p>
	</c:forEach>

	<c:if test="${not empty exUserAndAddressDetailList }">
		<table>
			<thead>
				<tr>
					<th>Name</th>
					<th>Gender</th>
					<th>Birthday</th>
					<th>postCode</th>
					<th>Address</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="exUserAndAddressDetail"
					items="${exUserAndAddressDetailList}">
					<tr>
						<td><span>${exUserAndAddressDetail.lastName}</span> <span>${exUserAndAddressDetail.firstName}</span>
						</td>
						<td><span>${exUserAndAddressDetail.gender}</span></td>
						<td><span>${exUserAndAddressDetail.birthday}</span></td>
						<td><span>${exUserAndAddressDetail.postCode}</span></td>
						<td><span>${exUserAndAddressDetail.prefecture}</span> <span>${exUserAndAddressDetail.cities}</span>
							<span>${exUserAndAddressDetail.address01}</span></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</c:if>

 	<form:form method="post"
		action="${pageContext.request.contextPath}/homeController/send"
		modelAttribute="exampleForm">
		<div>
			<!-- inputタグ -->
			<label>Last Name</label>
			<form:input path="lastName" />
		</div>
		<div>
			<label>first Name</label>
			<form:input path="firstName" />
		</div>
		<div>
			<!-- radiobuttonタグ -->
			<c:forEach items="${genderDtoList}" varStatus="rowStatus"
				var="genderDto">
				<form:radiobutton path="gender" value="${ genderDto.id }"
					label="${ genderDto.genderName }" />
			</c:forEach>
		</div>
		<div>
			<!-- selectタグ -->
			<form:select path="from">
				<form:option value="" label="--未選択--"></form:option>
				<c:forEach items="${fromDtoList}" var="fromDto">
					<form:option value="${fromDto.id}" label="${fromDto.fromName}" />
				</c:forEach>
			</form:select>
		</div>
		<div id="birthday">
		  <form:input  path="birthday" id="spinner"  />
		</div>
		<input type="submit" value="send" />
	</form:form>
</body>
<script>
$(function() {
	$( "[name='birthday']" ).datespinner();
	var spinner = $("#spinner").spinner();
	spinner.spinner("disable");
	//$(".ui-widget-content").spinner().spinner("disable");
	
	$('.ui-spinner, .ui-corner-all, .ui-widget, .ui-widget-content').on('mousedown', function(){
		return false;
	});

//	$('.ui-button, .ui-widget, .ui-spinner-button, .ui-spinner-up, .ui-corner-tr, .ui-button-icon-only').on('keypress', function() {
//		return false;
//	});
});
</script>
<style>
#birthday .ui-button:active {
  border-top-style: none !important;
  border-bottom-style: none !important;
  border-right-style: none !important;
  background-color: #f6f6f6 !important;
  border-left: 1px solid #c5c5c5 !important;
}

#birthday .ui-button:active .ui-icon {
  background-image: url("http://code.jquery.com/ui/1.13.2/themes/base/images/ui-icons_444444_256x240.png") !important;
}

#birthday .ui-button:hover {
  background-color: #f6f6f6 !important;
}
</style>
</html>

で、サーバーを起動して、ブラウザにアクセスして確認。

⇧ 非常に分かり辛いですが、Spinnerが操作できなくなっています。Spinnerのup/downのボタン部分のアイコンがjQuery UIが用意している画像を使ってるせいで、本当は非活性化したように透過度を下げたりしたかったのですが、ブラウザのIEは、background-imageのrgbaとかにも対応していないので、IEを考慮しないといけないとするとこのあたりが限界なんですかね。

あと、できることとしたら、input全体の背景色を灰色にして非活性化ってことを分かりやすくするぐらいですかね。

魔改造じゃないけども、ライブラリの実装を上書きするのは一苦労なので、あんまり変なライブラリは使わない方が良いですかね…。

ライブラリを作ってくれるのは全然かまわないのだけど、使い方をちゃんと書いてくれていないのは辛いですかね...。

まぁ、何て言うか、改めて言うことじゃないかもしらんけど、

www.publickey1.jp

⇧ jQuery UIの開発は終了しちゃっているのも微妙な感じですし...

結局、HTML5のinput要素に付与できるup/downのボタンをSpinnerと言って良いのかどうかが分からんままだなぁ...

認識齟齬の雨霰となりそうな状態、何とかして欲しいですな...

毎度モヤモヤ感が半端ない...

今回はこのへんで。