Browse Source

修改预创建时间输入框,实现点击整个输入框弹出日期时间选择器,并默认朝上显示

Boss
Default User 4 weeks ago
parent
commit
28a9b47fcf
  1. 158
      supply.html

158
supply.html

@ -601,6 +601,86 @@
caret-color: #333; caret-color: #333;
} }
/* 日历图标样式 */
.calendar-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
cursor: pointer;
color: #999;
}
/* 日期时间选择器容器 */
.datetime-picker {
position: absolute;
background-color: white;
border: 1px solid #d9d9d9;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 16px;
z-index: 1000;
width: 300px;
}
/* 日期时间选择器头部 */
.datetime-picker-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
/* 日期时间选择器按钮 */
.datetime-picker-btn {
padding: 4px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
background-color: white;
cursor: pointer;
font-size: 14px;
}
.datetime-picker-btn:hover {
border-color: #1677ff;
color: #1677ff;
}
/* 日期时间选择器内容 */
.datetime-picker-content {
display: flex;
flex-direction: column;
gap: 12px;
}
/* 日期时间选择器输入组 */
.datetime-picker-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.datetime-picker-group label {
font-size: 12px;
color: #666;
}
.datetime-picker-group input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
}
/* 日期时间选择器底部 */
.datetime-picker-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
/* 图片上传 */ /* 图片上传 */
.upload-area { .upload-area {
border: 2px dashed #d9d9d9; border: 2px dashed #d9d9d9;
@ -1709,7 +1789,10 @@
<!-- 预创建时间 --> <!-- 预创建时间 -->
<div class="form-group"> <div class="form-group">
<label class="form-label">预创建时间</label> <label class="form-label">预创建时间</label>
<input type="datetime-local" class="form-input" id="preCreateTime" placeholder="选择预计创建时间"> <div style="position: relative;">
<input type="text" class="form-input" id="preCreateTime" placeholder="选择预计创建时间" onclick="showDateTimePicker('preCreateTime')" readonly>
<span class="calendar-icon" onclick="showDateTimePicker('preCreateTime')">📅</span>
</div>
<div style="font-size: 12px; color: #999; margin-top: 5px;">设置预创建时间后,系统将在指定时间自动创建货源</div> <div style="font-size: 12px; color: #999; margin-top: 5px;">设置预创建时间后,系统将在指定时间自动创建货源</div>
</div> </div>
</form> </form>
@ -2331,6 +2414,79 @@
</div> </div>
<script> <script>
// 日期时间选择器函数
function showDateTimePicker(inputId) {
// 移除已存在的选择器
const existingPicker = document.getElementById('datetimePicker');
if (existingPicker) {
existingPicker.remove();
}
// 创建选择器容器
const picker = document.createElement('div');
picker.id = 'datetimePicker';
picker.className = 'datetime-picker';
// 获取输入框位置
const input = document.getElementById(inputId);
const rect = input.getBoundingClientRect();
const container = input.parentElement;
// 设置选择器位置(默认朝上)
picker.style.position = 'absolute';
picker.style.bottom = '100%';
picker.style.left = '0';
picker.style.marginBottom = '8px';
// 创建选择器内容
picker.innerHTML = `
<div class="datetime-picker-header">
<h3 style="margin: 0; font-size: 14px; font-weight: 500;">选择日期时间</h3>
<button class="datetime-picker-btn" onclick="document.getElementById('datetimePicker').remove()">×</button>
</div>
<div class="datetime-picker-content">
<div class="datetime-picker-group">
<label>日期</label>
<input type="date" id="pickerDate">
</div>
<div class="datetime-picker-group">
<label>时间</label>
<input type="time" id="pickerTime">
</div>
</div>
<div class="datetime-picker-footer">
<button class="datetime-picker-btn" onclick="document.getElementById('datetimePicker').remove()">取消</button>
<button class="datetime-picker-btn" style="background-color: #1677ff; color: white; border-color: #1677ff;" onclick="confirmDateTime('${inputId}')">确定</button>
</div>
`;
// 添加到容器中
container.appendChild(picker);
// 点击其他地方关闭选择器
document.addEventListener('click', function closePicker(e) {
if (!picker.contains(e.target) && e.target !== input && e.target !== input.nextElementSibling) {
picker.remove();
document.removeEventListener('click', closePicker);
}
});
}
// 确认日期时间选择
function confirmDateTime(inputId) {
const dateInput = document.getElementById('pickerDate');
const timeInput = document.getElementById('pickerTime');
const input = document.getElementById(inputId);
if (dateInput.value && timeInput.value) {
const datetime = dateInput.value + ' ' + timeInput.value;
input.value = datetime;
}
// 关闭选择器
document.getElementById('datetimePicker').remove();
}
// 全局变量 // 全局变量
let supplyData = { let supplyData = {
supplies: [], supplies: [],

Loading…
Cancel
Save