id="showMonth"
@click.stop="showMonth()"
:class="monthShow == true ? 'dateBox true' : 'dateBox'"
{
{ Firmonth + 1 }}月</label
<label style="width: 20px">至</label>
<label
v-show="arr.length == 0"
style="cursor: pointer; color: rgb(168, 168, 168)"
>结束月份</label
<label v-show="arr.length != 0" style="cursor: pointer"
>{
{ Sedmonth + 1 }}月</label
<!-- 月份选择器 -->
id="monthBox"
v-show="monthShow"
class="monthShow fadein"
<!-- 月份区间选择 -->
<div class="months">
class="out"
v-for="(m, index) of months"
:key="m.id"
:class="{
'start-data': index === Firmonth,
'end-data': index === Sedmonth,
'start-month': index === Startmonth,
'other-month': index !== Firmonth && index !== Sedmonth,
:style="
index > Math.min.apply(null, arr) &&
index < Math.max.apply(null, arr)
? outSelect
@click="getMonth(index)"
:class="index === Firmonth || index === Sedmonth ? 'active' : ''"
:style="
index > Math.min.apply(null, arr) &&
index < Math.max.apply(null, arr)
? select
{
{ m }}
</template>
以下是主要逻辑代码
<script>
export default {
data() {
return {
count: 0,
monthShow: false,//控制月份选择盒子显示隐藏
year: "",
Firmonth: "",
Sedmonth: "",
Startmonth: "",
month: "",
months: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
arr: [],
select: {
color: "black",
outSelect: {
color: "black",
backgroundColor: "#f2f6fc",
created(){
document.addEventListener("click",e =>{
let box = document.getElementById("monthBox");
if(box.contains(e.target)){
console.log(this);
console.log("内");
}else{
this.monthShow = false;
console.log("外");
methods: {
showMonth() {
this.monthShow = !this.monthShow;
getMonth(index) {
let _this = this;
// 通过数组push 检索inde 来判断 是否为第一个选择的月份
if (_this.arr.length < 2) {
_this.arr.push(index);
_this.Firmonth = Math.min.apply(null, _this.arr);
_this.Sedmonth = Math.max.apply(null, _this.arr);
} else {
_this.Firmonth = index;
_this.Sedmonth = index;
_this.arr = [];
_this.arr.push(index);
console.log(_this.arr);
// 获取当前日期
getInitTime() {
let date = new Date();
this.Startmonth = date.getMonth(); //获取本月
mounted() {
this.getInitTime();
</script>
实际项目中，在用户的个人中心，编辑用户资料时经常会遇到选择生日选项的问题。
因为我项目工程中没有使用如jQuery UI的插件性下拉列表，所以选择select + option的原生方式，实现选择器。
能够准确计算闰年的年月日，方便表单处理。
实际效果如下图，式样略粗糙
生日中的年月日以下拉方式，我们给每个select加个rel的属性，当已知用户生日时，直接通过rel属
element el-date-picker 还没有 type="months" 可以选择多个月份的功能。现在若想选则多个月份，可直接使用element。本文仅对之前写的月份组件做个记录。一、直接使用el-date-picker type="months"1、新建组件 SelectMonths.vue。2、使用组件 SelectMonths。
vue月份选择 选月 (vue-month-picker)
A lightweight month picker for Vue.js with no dependencies.
Vue.js的轻量级月份选择器，没有依赖项。
View demo
查看演示 View Github
查看Github
安装 (Install)
npm install --save vue-...
