将float标签放在kendoReact DatePicker中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将float标签放在kendoReact DatePicker中相关的知识,希望对你有一定的参考价值。
如何将浮动标签放在KendoReact DatePicker中?
像https://www.telerik.com/kendo-react-ui/components/dropdowns/floating-labels/
答案
我建议使用custom place holder和conditional rendering。 Kendo使用类来获得浮动标签的样式,嵌套的跨度将实现这一点。我添加了我尝试过的代码片段,但由于我不熟悉React,因此无法使条件渲染生效。
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { dataProducts, dataCategories, dataOrders } from './data';
import { DateInput, Calendar, DatePicker, TimePicker, MultiViewCalendar, DateRangePicker } from '@progress/kendo-react-dateinputs';
class App extends React.Component {
render() {
const isFocused = false;
return (
<div>
<div>
<p>DatePicker</p>
{isFocused
? <span class="k-textbox-container k-state-focused k-state-empty"><span class="k-label">Select Order Date</span></span>
: null}
<div onFocus = {this.onFocusDatePickerInput} onBlur = {this.onBlurDatePickerInput} >
<DatePicker format="MM dd yyyy" formatPlaceholder={{ year: 'Date', month: 'Select', day: 'Order' }}
onChange={this.changeDate} />
</div>
</div>
</div>
);
}
changeDate = (event) => {
console.log(event.value)
if(event.value){
this.format= "MM/dd/yyyy";
this.setState({ value: event.value });
}
}
onFocusDatePickerInput = () =>
{
this.isFocused = true;
console.log(this.isFocused)
}
onBlurDatePickerInput = () =>
{
this.isFocused = false;
console.log(this.isFocused)
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
以上是关于将float标签放在kendoReact DatePicker中的主要内容,如果未能解决你的问题,请参考以下文章