javascript - 输入类型日期
问题描述
我想做这个:
用按钮控制输入类型日期打开日历选择日期,但输入字段不能显示。
并且选择日期的结果将显示在另一个 div 中(这部分已解决)。
$(document).ready(function() {
$('input[type="date"]').change(function() {
var outputDate = (this.value);
$("#target").text(outputDate);
});
});
input[type="date"]{opacity:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label for="test1" style="width:100px; height:100px; background:red;display:inline-block;">
<input id="test1" type="date" style="width:100px; height:100px;>
</label>
<p id="target"></p>
解决方案
$(document).ready(function() {
$('input[type="date"]').change(function() {
var outputDate = (this.value);
$("#target").text(outputDate);
});
});
input[type="date"]{
opacity:1;
position: relative;
color: transparent;
border: none;
background-color: red;
}
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
-webkit-appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
background-color: transparent;
}
input[type="date"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="date"]::-webkit-datetime-edit {
opacity: 0;
-webkit-appearance: none;
}
input[type="date"]::-webkit-clear-button {
background: none;
-webkit-appearance: none;
}
label {
position: relative;
overflow: hidden
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label for="test1" style="width:100px; height:100px; background:red;display:inline-block;">
<input id="test1" type="date" style="width:100px; height:100px;">
</label>
<p id="target"></p>
推荐阅读
- java - Project Reactor Kafka:在 Flux 结束时执行操作而不阻塞
- typescript - 如何在平面目录结构中发出打字稿输出文件
- google-app-maker - 如何将当前表单字段值传递给新的弹出窗口?
- google-chrome - 如何在浏览器(chrome)上打开atom html代码
- angular - Angular 应用程序编译但显示空白页
- java - Selenium's IE driver doesn't load page?
- php - AJAX Data Won't Load in Multi Select Box during Search
- jenkins - 詹金斯在我没有改变的一行上抱怨语法
- android - Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug Failed
- mysql - how to exclude rows that have duplicates? (Remove)