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

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

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

阅读 266
avatarAI 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应用中,并绑定到相应的数据模型。

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

<template>
<div class="time-picker">

<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>

<script>
export default {
data() {

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>

<style scoped>
.time-picker {
display: flex;
flex-direction: column;
align-items: center;
}

.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 个回答

有点像 AntDDatePicker,但是需要魔改。
图片.png

甲方给你目标样式了,就直接看对应项目的UI库就好了。
如果不会看可以用 wappalyzer 这个浏览器插件分析。

如果是甲方给你的截图,可以问一下他从哪里看到的这个日期时间选择器。是原系统还是其他竞品项目中的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏