Поместите метку с плавающей точкой в ​​kendoReact DatePicker - PullRequest
Новая
       21

Поместите метку с плавающей точкой в ​​kendoReact DatePicker

0 голосов
/ 02 апреля 2019

Как поместить метку с плавающей точкой в ​​KendoReact DatePicker?

как https://www.telerik.com/kendo-react-ui/components/dropdowns/floating-labels/

1 Ответ

1 голос
/ 03 апреля 2019

Я предлагаю использовать пользовательский заполнитель и условный рендеринг . 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')
);
...