javascript vuejs-datepicker 从当前日期开始，添加样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50050861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vuejs-datepicker start with current date, add style
提问by Felipe
I am occupying the vue-datepicker component for an input that shows the date that I have in the form. I need to make the date start on the current day and not be able to choose previous days, also change the language, the component dont let me add style
我正在占用 vue-datepicker 组件的输入，该输入显示我在表单中的日期。我需要让日期从当天开始，不能选择前几天，还要更改语言，组件不让我添加样式
This is the component I am using https://github.com/charliekassel/vuejs-datepicker
这是我使用的组件https://github.com/charliekassel/vuejs-datepicker
I leave part of the summary code:
我留下部分摘要代码：
<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>
Any ideas? I occupy Vuejs 2 and vuejs-datepicker
有任何想法吗？我占用了 Vuejs 2 和 vuejs-datepicker
回答by Sphinx
There is one syntax error in your codes, you need to move method: {}out of data(), and it is methods, not method.
您的代码中有一个语法错误，您需要method: {}移出data()，并且是methods，而不是method。
After fixed it, just follow the tutorial to customize your calendar (check Available Propsin the tutorial).
固定它后，只要按照教程来定制您的日历（查看可用的道具在本教程）。
And remember to open your browser console to check any errors.
并记得打开浏览器控制台检查任何错误。
Below is one demo which allow you customize background, open date, bootstrap stylingin the <datepick>.
下面是一个演示，让你自定义background，open date，bootstrap styling在<datepick>。
PS:based on the tutorial, if directly using CDN, have to use <vuejs-datepicker>instead <datepicker>
PS：根据教程，如果直接使用CDN，必须<vuejs-datepicker>改用<datepicker>
PS:probably the props provided by datepickercan't meet your requirements, then you have to look into the dom tree for that calendar, then add your css selector to customize it, like what I did for changing background.
PS：可能是datepicker你提供的props不能满足你的要求，那你要查看那个日历的dom树，然后添加你的css选择器来自定义它，就像我改变背景所做的那样。
Update:clone out one new Date object when every time change open Date, otherwise it will not trigger the reactivity.
更新：每次更改打开日期时克隆出一个新的日期对象，否则不会触发反应性。
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/[email protected]/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>