antd 日期选择框DatePicker 具体日期之前不可选/onOk参数格式转化/去掉showTime的时间选择/用icon代替默认输入框

具体日期之前不可选

https://www.jianshu.com/p/fd78f735cd9f

onOk参数格式转化

https://blog.csdn.net/u010856177/article/details/89388219

去掉showTime的时间选择

需求:按下确定后日期修改才会生效

问题:显示组件中的确定按钮需要打开showTime,但它自带时间选择,这是不需要的_(:з」∠)_

解决:

①找到库的全局样式修改位置:./theme

②给需要修改的页面的DatePicker组件增加一个dropdownClassName,比如

dropdownClassName='none-show-time'

③在页面上找到“选择时间”的组名

 在antd_theme.css中修改

.none-show-time .ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn{
  display: none!important;
}

④好叻!ο(=•ω<=)ρ⌒☆

用icon代替默认输入框

给输入框增加样式:

float: right;
position: relative;
opacity: 0;
left: -18px;    //藏进icon下方

  .ant-calendar-picker-icon{
    display: none;
  }
  .ant-calendar-picker-clear{
    display: none;
  }    //将两个框内自带的删除按钮去掉
  .ant-calendar-picker-input.ant-input{
    cursor: pointer;
  }    //鼠标移上变指针效果

 更改日期后刷新显示

因为是个组件,所以在父组件找到刷新的方法通过props传给它,在onOk里把它用上就ok辣_(:з」∠)_

posted @ 2019-11-06 10:22  su0tiuqibu  阅读(166)  评论(0)    收藏  举报