vuejs-从当前日期开始，添加样式
我正在占用vue-datepicker组件的输入，它显示了我在表单中的日期。我需要把日期从今天开始，不能选择前几天，也要改变语言，组件不让我添加样式。
这是我使用的https://github.com/charliekassel/vuejs-datepicker组件
我留下了部分摘要代码：
<template>
<form>
<datepicker :bootstrap-styling="true"
class="form-control"
</datepicker>
</form>
</template>
<sctipt>
import Datepicker from 'vuejs-datepicker';
export default {
components: {
Datepicker,
},
data () {
return {
selectedDate: ''
},
method: {
}
}
</script>有什么想法吗？我占用Vuejs 2和vuejs-datepicker
回答 2
Stack Overflow用户
发布于 2018-04-26 20:40:22
代码中有一个语法错误，您需要将method: {}移出data()，这是方法，而不是method。
修复后，只需按照教程定制您的日历(检查可用的道具 in 本教程)。
记得打开浏览器控制台来检查任何错误。
下面是一个演示，它允许您自定义background、open date、<datepick>中的bootstrap styling。
PS:基于本教程的，如果直接使用CDN，则必须使用<vuejs-datepicker>而不是<datepicker>。
PS:可能datepicker提供的道具不能满足您的要求，然后您必须查看该日历的dom树，然后添加您的css选择器来自定义它，就像我更改背景时所做的那样。
更新:每次更改打开日期时，都会克隆出一个新的日期对象，否则不会触发反应性。
app = new Vue({
el: "#app",
components: {
vuejsDatepicker
},
data() {
return {
selectedDate: '',
bootstrapStyling: true,
openDate: new Date()
}
},
methods: {
changeBootstrapStyling: function () {
this.bootstrapStyling = !this.bootstrapStyling
},
changeLanguage: function () {
this.openDate = new Date(this.openDate.setDate(this.openDate.getDate() + 90))
}
}
}).bg-red > div > div {
background-color:red
}
.bg-white > div > div {
background-color:white
}<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<div id="app">
<button @click="changeBootstrapStyling()">Change Bootstrap Styling</button>
<button @click="changeLanguage()">Change Open Date</button>
<form>
<vuejs-datepicker :bootstrap-styling="true" :open-date="openDate"
class="form-control" :class="{'bg-red':bootstrapStyling, 'bg-white':!bootstrapStyling}"></vuejs-datepicker>
</form>
</div>
Stack Overflow用户
发布于 2022-03-20 13:13:17
您的问题可分为三个部分:1.如何在vue.js日期选择器上应用样式设置2.如何使日期从当前日期开始(禁用以前的日期)3.如何更改语言
注意:您的代码有一个语法错误，即您在数据方法中使用了“方法”属性，请首先解决此问题。
1.在您的日期选择器上应用样式--我以前在这个链接上回答过它--一定要通过它https://stackoverflow.com/a/71546906/18083887 2。如何使您的日期选择器日历从当前日期开始:答案:在vue日期选择器包中有一些可用的支持，允许您这样做，它是:disabledDates道具--参见下面的示例
<datepicker
v-model="startDate"
placeholder="Ends On"
:open-date="new Date()"
:disabledDates="disabledDates">
</datepicker> 在数据属性中执行以下操作
data (){
return{
disabledDates:{
to: new Date(Date.now() - 8640000)
}
}
}然后，您将在日历中看到以前的日期已被禁用。
https://stackoverflow.com/questions/50050861
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号