写一个HTML和css的日期样式,将选中的结果console.log输出,并且默认显示实时日期,不要时间
时间: 2024-02-21 11:58:20 浏览: 22
好的,以下是一个简单的HTML和CSS的日期样式,可以实现选中日期后console.log输出,同时也会默认显示实时日期,不含时间。
HTML:
```html
<div class="date-picker">
<input type="date" id="date-input">
</div>
```
CSS:
```css
.date-picker {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
input[type="date"] {
padding: 10px;
font-size: 18px;
border-radius: 5px;
outline: none;
border: none;
background-color: #f5f5f5;
}
```
JavaScript:
```javascript
// 获取 input 元素
const dateInput = document.getElementById('date-input');
// 设置 input 的默认值为当前日期
const today = new Date();
const year = today.getFullYear();
let month = today.getMonth() + 1;
let day = today.getDate();
if (month < 10) {
month = `0${month}`;
}
if (day < 10) {
day = `0${day}`;
}
dateInput.value = `${year}-${month}-${day}`;
// 监听 input 的值变化
dateInput.addEventListener('input', (event) => {
const selectedDate = event.target.value;
console.log(selectedDate);
});
```
当用户选择一个日期时,会将选中的日期打印到控制台中。如果你需要将选中的日期用于其他用途,可以在监听函数中进行相应操作。