百度新网站收录,大连网站外包,交互设计英文,wordpress 复杂表单vue-jlunar-datepicker#xff08;插件#xff09; vue实现农历日历插件——vue-jlunar-datepicker插件 这个插件本身是基于vue2.0和elementUi框架来实现的。 安装 vue-jlunar-datepicker 插件
npm install vue-jlunar-datepicker --save
// 如果安装过程中#xff0c;出现…vue-jlunar-datepicker插件 vue实现农历日历插件——vue-jlunar-datepicker插件 这个插件本身是基于vue2.0和elementUi框架来实现的。 安装 vue-jlunar-datepicker 插件
npm install vue-jlunar-datepicker --save
// 如果安装过程中出现报错一般在终端中会显示出来解决办法
// 我这边确实报错了提示的信息是elementUi版本不兼容的问题解决方法就是
npm install vue-jlunar-datepicker --save --force插件在main.js中引入并注册 或组件中引入
import Vue from vue
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import JDatePicker from vue-jlunar-datepicker;
Vue.config.productionTip false
Vue.use(ElementUI);
Vue.component(j-date-picker,JDatePicker);
new Vue({render: h h(App)
}).$mount(#app)或者
script
import JDatePicker from vue-jlunar-datepicker
export default {components: {JDatePicker}
}
/script使用
templatediv classcontentViewsj-date-picker v-modelform.birthdaydate stylewidth: 100% :placeholderplaceholder:picker-optionspickerOptions :rangeSeparatorrangeSeparator changeonDateChange:disableddisabled :showLunarClassshowLunarClass :showLunarControlshowLunarControl :typetype:showBackYearsshowBackYears :showLunarIconshowLunarIcon :formatformat/j-date-picker/div
/template
script
export default {data() {return {form: {birthdaydate: L2023-02-21,},type: DATERANGE, // DATE/DATERANGEshowLunarClass: MIX, // FULLLUNAR/LUNAR/NUMBER/MIX 农历日期的显示类型不区分大小写showBackYears: 2, // 现在之后的年份数基于当前年份showLunarIcon: true,showLunarControl: true, // 是否默认显示农历width1: 300,format: YYYY/MM/DD,placeholder: 请选择日期,rangeSeparator: -,disabled: false,editable: true,clearable: true,pickerOptions: {disabledDate(time) {console.log(time);return time.getTime() Date.now() - 8.64e7;//这行代码是限制当前日期之前不可选择如果注释掉则不做限制}}};},methods: {onDateChange(val) {this.form.birthdaydate val;this.$forceUpdate();}}
};
/script
style langless scoped
::v-deep.icon-richeng:before {content: ;
}/deep/.full-jcalendar__body {height: 240px !important;
}/deep/.full-jcalendar .input__inner:focus {border-color: #f90;
}.full-jcalendar .input__inner:hover {border-color: #ffcb7c;
}/deep/.full-jcalendar__body .data-list li:hover {background-color: #f90;
}/deep/.full-jcalendar-header {height: 30px;background: #ffeacb;
}/deep/.full-jcalendar__body {border: 1px solid #ebebeb;
}/deep/.full-jcalendar-header label {display: inline-block !important;
}/deep/.full-jcalendar .input__inner,
/deep/input::input-placeholder {font-size: 13px !important;color: #999 !important;
}/deep/.full-jcalendar__body .day-cell.select,
/deep/.full-jcalendar__body .data-list li.select-year {background-color: #f90;
}/deep/.day-cell.today.select .number.is-today.is-empty {color: #fff !important;
}/deep/.day-cell.today .number.is-today.is-empty {color: #f90 !important;
}/deep/.full-jcalendar__body .day-cell.today:before,
/deep/.full-jcalendar__body .data-list li.curr-year::before {border-top: 0.5em solid #f90 !important;
}/deep/.full-jcalendar-header .title-year:hover,
/deep/.full-jcalendar-header .title-month:hover {color: #f90 !important;
}/deep/.full-jcalendar__main {width: 100% !important;
}/deep/.iconfont.icon-richeng::before {content: !important;
}/deep/.icon.iconfont.icon-xiangyoujiantou::before {content: !important;
}/deep/.icon.iconfont.icon-xiangzuojiantou::before {content: !important;
}/deep/.day-number.lunar {font-size: 11px !important;
}/deep/.day-cell {line-height: 18px !important;
}
/style
