vue中datepicker的使用教程实例代码详解

写这个文章主要是记录下用法，官网已经说的很详细了

npm install vue-datepicker --save

html代码

js代码

设置前一天和后一天的时间，我的实现是通过watch来监听startTime的值，发现变化后，对当前日期和选择的日期进行对比，超过未来时间就不进行变更，而计算后一天或前一天，只需让当前时间进行加或减一天的时间即可

参考代码：

 .menu-container{
  background:#fff;
 }
 .box{
  width:100%;
  margin-top:45px;
  background:#fff;
 }
 .timeselectbox{
  height:60px;
  background:#edeeef;
 }
 .timeselectbox li{
  list-style: none;
  float:left;
  height:35px;
  line-height:35px;
  margin-top:10px;
  color:black;
 }
 .daybefore{
  width:28%;
  padding-left:10px;
  font-size:13.5px;
 }
 .dateselect{
  border-radius: 3px;
  background:#fff;
  width:44%;
  text-align:center;
 }
 .nextday{
  text-align: right;
  width:28%;
  padding-right:10px;
  font-size:13.5px;
 }
 .databox{
  height:115px;
  background:#ff5534;
 }
 .databox div{
  float:left;
  height:80px;
  margin-top:17.5px;
  text-align:center;
 }
 .allsale{
  width:50%;

 }
 .databox p{
  color:white;
 }
 .p-top{
  color:#eaebec;
  margin-top:15px;
 }
 .p-bott{
  font-size:18px;
  margin-top:5px;
  font-weight: bold;
 }
 .eff{
  width:49.7%;
  border-left:1px solid #cccccc96;
 }
 .paydetail{
  height:52px;
  background:white;
  width:100%;
 }

 .paydetail li{
  display: inline-block;
  float:left;
  width:33.3%;
  font-size:12px;
  text-align:center;
  height:100%;
  line-height: 50px;
  overflow: hidden;
 }
 .line{
  display: block;
   margin-left: 32px;
   width: 25%;
   border: 1px solid #40AAEB;
 }

 .active{
  color:#ff5534;
  border-bottom:1px solid #ff5534;
 }
 .allsale_price{
  height:40px;
  background:#f4f4f4;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
 }
 .table{
  width:100%;

 }
 .table_data{
  width:100%;
 }
 .table_data th{
  height:30px;
  font-size:15px;
 }
 .describe{
  border-bottom:1px solid #f4f4f4;
 }
 .describe th:nth-child(1){
  width:5%;
  
 }
 .describe th:nth-child(2){
  text-align: left;
 }
 .table_data tr{
  width:100%;

 }
 .table_data tr td{
  text-align:center;
  height:30px;
  line-height: 30px;
  font-size:13px;
  position:relative;
 }
 .table_data tr td:nth-child(1){
  width:3%;
 }
 .table_data tr td:nth-child(2){
  text-align: left;
 }
 .status{
  color:red;
 }
 .status-active{
  color:green;
 }
 .right_j{
  
  background-size:9px !important;
  display: inline-block;
  position:absolute;
  width:15px;
  height:15px;
  line-height: 30px;
  font-size:18px;
  right:5px;
  top:5px;
 }

总结

以上所述是小编给大家介绍的vue中datepicker的使用教程实例代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！