如何使用JS和Vue2实现自定义开始时间选择器？

Question

如何使用JS和Vue2实现自定义开始时间选择器？

年轻有为的板凳

43218

发布于
11 月 6 日广西南宁市

更新于
11 月 6 日

如何使用js+vue2实现，同上传图片所示的开始时间选择器

使用过element ui的el-date-picker进行日期时间选择，但甲方要求要改成同上传图片所示效果。或者是否有类似的前端控件。

javascript vue.js html

阅读 806

AI BotBETA

要在Vue 2中使用JavaScript实现自定义的开始时间选择器，你可以结合Vue的组件系统和一些基本的HTML/CSS/JS来完成。由于Element UI的`el-date-picker`不满足你的需求，你可以考虑以下步骤来实现自定义的时间选择器：

1. **创建Vue组件**：
   创建一个新的Vue组件，用于封装时间选择器。

2. **使用HTML和CSS**：
   使用HTML来构建时间选择器的结构，使用CSS来美化它。你可以参考上传的图片来设计UI。

3. **添加JavaScript逻辑**：
   使用JavaScript来处理时间选择逻辑，包括时间的增加、减少、选择等。

4. **集成到Vue应用中**：
   将你的自定义时间选择器组件集成到你的Vue应用中，并绑定到相应的数据模型。

以下是一个简单的示例，展示了如何开始实现这个功能：

<div class="time-display">{{ formattedTime }}</div>
<div class="controls">
  <button @click="decreaseHour">-H</button>
  <button @click="decreaseMinute">-M</button>
  <button @click="increaseMinute">+M</button>
  <button @click="increaseHour">+H</button>
</div>

</div>
</template>

return {
  selectedTime: new Date()
};

},
computed: {

formattedTime() {
  const hours = String(this.selectedTime.getHours()).padStart(2, '0');
  const minutes = String(this.selectedTime.getMinutes()).padStart(2, '0');
  return `${hours}:${minutes}`;
}

},
methods: {

increaseHour() {
  this.selectedTime.setHours(this.selectedTime.getHours() + 1);
},
decreaseHour() {
  this.selectedTime.setHours(this.selectedTime.getHours() - 1);
},
increaseMinute() {
  this.selectedTime.setMinutes(this.selectedTime.getMinutes() + 1);
},
decreaseMinute() {
  this.selectedTime.setMinutes(this.selectedTime.getMinutes() - 1);
}

}
};
</script>

.time-display {
font-size: 2em;
margin-bottom: 1em;
}

.controls {
display: flex;
gap: 1em;
}

button {
padding: 0.5em 1em;
font-size: 1em;
}
</style>


这个示例展示了一个非常基础的时间选择器，你可以根据需求进一步扩展，比如添加时间的输入验证、时间的范围限制、更复杂的UI设计等。

如果你需要更高级的功能，比如时间滚动选择、时间范围选择等，你可能需要查找或开发更复杂的Vue组件库，或者考虑使用其他前端框架/库（如React的`react-datepicker`，虽然它不是Vue的，但你可以找到类似的Vue组件）。

1 个回答

得票最新

陟上晴明

21.1k124691

发布于
11 月 7 日浙江

有点像 AntD 的 DatePicker，但是需要魔改。
图片.png