先堆几个地址:
JQuery官方地址:http://jquery.com/
你可以在这里
下载
到JQuery的核心框架的最新版本,包括未压缩的和已压缩的,不压缩的话有98K,简装压缩版只有15K
Datepicker
的演示地址:http://ui.jquery.com/repository/latest/demos/functional/#ui.
datepicker
包括自定义格式,资源本地...
1、
下载
日期插件
datepicker
的moment.js、jquery-
datePicker
.min.js、index.css
2、编写日期插件样式
<div class="date_select_box_resouce" style="line-height: 80px;">
<div class="date_select_title_resouce">日期:</div>
<div class="date_select_value_r
1.DataPicker的简介
DataPicker是一款日期选择控件,当然github上已有开源;今天借花献佛,我就跟大家讲讲DataPicker。在项目中的个人中心一般都要设置出生年月,那么DataPicker将是最好的选择,莫激动,先看看效果图:
2.DataPicker的使用,
1.引用第三方库:
compile 'cn.aigestudio.datepi
swing
没有自带的日期控件,需要第三方的类——可以自行找资源
下载
导入IDEA
主要使用的是两个类——
DatePicker
和JX
DatePicker
DatePicker
:
datepicker
.
jar
包,有一个缺点,不能设置时间,只能在创建控件的时候传入指定日期。
import java.util.Date;//获取当前时间
import java.util.Locale;//当前时区(地点)
import com.eltima.components.ui.
DatePicker
;//导入
jar
包
示例代码段
JLabel dateJLabel = new JLabel("日期:");
final
DatePicker
datePicker
1 =
DatePicker
Util.get
DatePicker
();
JButton startDateBtn = new JButton("开始时间");
startDateBtn.addActi
function addRow() {var cell5 = row.insertCell(4);cell5.innerHTML = '<input type="date" id="reDate" onchange="replace
DatePicker
(this)">';unction replace
DatePicker
(
datePicker
) { var value =
datePicker
.value; var span = document.createElement('span'); span.innerHTML = value;
datePicker
.parentNode.insertBefore(span,
datePicker
);
datePicker
.style.display = 'none';
datePicker
.setAttribute('data-value', value); }function restoreDate(button) { // 获取所在行 var row = button.parentNode.parentNode; // 获取该行的日期选择器 var input = row.querySelector('input[type="date"]'); // 恢复日期选择器 input.style.display = 'inline-block'; input.value = input.getAttribute('data-value') // 移除提示信息 var span = input.parentNode.querySelector('span'); input.parentNode.removeChild(span); } 修改代码,点击确认按钮时执行replace
DatePicker
,点击修改时执行restoreDate
<td>3</td>
<td>4</td>
<td><input type="date" id="reDate" onchange="replace
DatePicker
(this)"></td>
<td><button onclick="restoreDate(this)">修改</button> <button onclick="confirmChange(this)">确认</button></td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td><input type="date" id="reDate" onchange="replace
DatePicker
(this)"></td>
<td><button onclick="restoreDate(this)">修改</button> <button onclick="confirmChange(this)">确认</button></td>
</table>
<script>
function replace
DatePicker
(
datePicker
) {
var value =
datePicker
.value;
var span = document.createElement('span');
span.innerHTML = value;
datePicker
.parentNode.insertBefore(span,
datePicker
);
datePicker
.style.display = 'none';
datePicker
.setAttribute('data-value', value);
function restoreDate(button) {
var row = button.parentNode.parentNode;
var input = row.querySelector('input[type="date"]');
input.style.display = 'inline-block';
input.value = input.getAttribute('data-value');
var span = input.parentNode.querySelector('span');
input.parentNode.removeChild(span);
function confirmChange(button) {
var row = button.parentNode.parentNode;
var input = row.querySelector('input[type="date"]');
var span = input.parentNode.querySelector('span');
var value = input.value;
span.innerHTML = value;
input.setAttribute('data-value', value);
input.style.display = 'none';
span.style.display = 'inline-block';
</script>
这段代码实现了一个包含表格、输入框和按钮的页面。在输入框中输入日期时,会调用 `replace
DatePicker
` 函数,将输入框替换成一个 `span` 元素,并将输入框中的日期显示在 `span` 中。点击修改按钮时,会调用 `restoreDate` 函数,将 `span` 元素替换回输入框。点击确认按钮时,会调用 `confirmChange` 函数,将输入框中的日期更新到 `span` 中,并将输入框隐藏起来。
炎黄子孙__:
Win10下LoadRunner12 下载安装
m0_68024156:
Nacos 启动后一直报Nacos is starting...
jiesen520: