jsp 选择时分秒控件_用javascript实现的日期时间输入控件-JSP教程,Java技巧及代码...

在b/s程序设计中,经常需要向一个输入框输入日期或时间,并验证输入是否有效。通常的验证方法是在提交的时候进行字符串验证,如果是合法的日期时间则正常提交,否则取消提交并给出错误信息。或者,将日期时间的输入变成几个下拉列表框,由用户选择年月日时分秒。

这里给出一个用javascript编写的日期时间输入验证脚本。这个脚本可以使一个普通的输入框变成日期时间输入框。你只能在这个输入框里输入日期时间格式的字符串,而不允许你输入任何其他的字符。当你输入非法字符时,它并不是不负责任地弹出错误对话框,而是完全过滤掉你的输入以保证你输入框的内容绝对是合法的日期时间格式。

事实上,你可以向这个脚本中添加其他验证函数,让这个脚本可以控制其它类型格式的输入,例如:数字、电子邮件、用户id等等。

代码如下:

function istime(str){

var a = str.match(/^(\d{0,2}):(\d{0,2}):(\d{0,2})$/);

if (a == null) return false;

if (a[1]>=24 || a[2]>=60 || a[3]>=60) return false;

return true;

}

function isdatetime(str){

var a = str.match(/^(\d{0,4})-(\d{0,2})-(\d{0,2}) (\d{0,2}):(\d{0,2}):(\d{0,2})$/);

if (a == null) return false;

if ( a[2]>=13 || a[3]>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP实现日期控件,可以使用第三方框架或者自己编写 JavaScript 实现。以下是一个简单的示例代码: 1. 借助第三方框架 使用第三方框架可以简化日期控件实现过程,常见的框架有 jQuery UI、Bootstrap Datepicker 等。以 jQuery UI 为例: 首先,在 jsp 页面中引入 jQuery 库和 jQuery UI 库: ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> ``` 然后,在需要使用日期控件的 input 标签中添加以下代码: ``` <input type="text" id="datepicker"> ``` 最后,在 JavaScript实现日期控件: ``` $( function() { $( "#datepicker" ).datepicker(); } ); ``` 2. 自己编写 JavaScript 实现 如果不想使用第三方框架,也可以自己编写 JavaScript 实现。以下是一个简单的示例代码: 在 jsp 页面中添加以下代码: ``` <input type="text" id="datepicker"> ``` 在 JavaScript实现日期控件: ``` var datepicker = document.getElementById("datepicker"); datepicker.addEventListener("focus", function() { var datePickerDiv = document.createElement("div"); datePickerDiv.setAttribute("id", "datePickerDiv"); var currentDate = new Date(); var currentYear = currentDate.getFullYear(); var currentMonth = currentDate.getMonth() + 1; var currentDay = currentDate.getDate(); var yearSelect = "<select id='yearSelect'>"; for (var i = currentYear - 10; i <= currentYear + 10; i++) { yearSelect += "<option value='" + i + "'>" + i + "</option>"; } yearSelect += "</select>"; var monthSelect = "<select id='monthSelect'>"; for (var i = 1; i <= 12; i++) { var monthText = i < 10 ? "0" + i : i; monthSelect += "<option value='" + i + "'>" + monthText + "</option>"; } monthSelect += "</select>"; var daySelect = "<select id='daySelect'>"; for (var i = 1; i <= 31; i++) { var dayText = i < 10 ? "0" + i : i; daySelect += "<option value='" + i + "'>" + dayText + "</option>"; } daySelect += "</select>"; datePickerDiv.innerHTML = yearSelect + monthSelect + daySelect; datePickerDiv.style.position = "absolute"; datePickerDiv.style.left = datepicker.offsetLeft + "px"; datePickerDiv.style.top = datepicker.offsetTop + datepicker.offsetHeight + "px"; datePickerDiv.style.backgroundColor = "#fff"; datePickerDiv.style.border = "1px solid #ccc"; datePickerDiv.style.padding = "5px"; document.body.appendChild(datePickerDiv); var yearSelect = document.getElementById("yearSelect"); var monthSelect = document.getElementById("monthSelect"); var daySelect = document.getElementById("daySelect"); yearSelect.value = currentYear; monthSelect.value = currentMonth; daySelect.value = currentDay; yearSelect.addEventListener("change", function() { setDays(); }); monthSelect.addEventListener("change", function() { setDays(); }); function setDays() { var year = yearSelect.value; var month = monthSelect.value; var day = daySelect.value; var daysInMonth = new Date(year, month, 0).getDate(); daySelect.innerHTML = ""; for (var i = 1; i <= daysInMonth; i++) { var dayText = i < 10 ? "0" + i : i; daySelect.innerHTML += "<option value='" + i + "'>" + dayText + "</option>"; } if (day > daysInMonth) { daySelect.value = daysInMonth; } else { daySelect.value = day; } } function hideDatePicker() { datePickerDiv.parentNode.removeChild(datePickerDiv); } yearSelect.focus(); yearSelect.select(); yearSelect.addEventListener("blur", function() { hideDatePicker(); }); monthSelect.addEventListener("blur", function() { hideDatePicker(); }); daySelect.addEventListener("blur", function() { hideDatePicker(); }); }); ``` 以上代码实现了一个简单的日期控件,包含年、月、日三个下拉框,用户选择日期后会自动填充到 input 标签中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值