Question

我在React中使用jQuery datetimepicker addon创建日期时间选择器，如example

现在，我想在onBlur（）事件中实现验证，以检查开始日期＆gt;结束日期与否。

我已经实施了它。如果开始时间> 1，它将结束时间作为开始时间相同。时间结束。

但是，它只能通过键输入。如果我从jquery UI中选择日期，则不会触发onBlur（）事件。

有人可以告诉我这是什么问题吗？谢谢。

<div id={id}>
    <span className='from'>
        <input
            type='text' id={id+'-from'}
            ref='dateFrom'
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            value={value.from} />
    </span>
    <span className='to'>
        <input
            type='text' id={id+'-to'}
            ref='dateTo'
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            value={value.to} />
    </span>
</div>


getInitialState() {
    let prevFrom = ''
    let prevTo = ''

    prevFrom = '2016-12-12'
    prevTo = '2016-12-19'

    return {
        prevFrom,
        prevTo
    }
},
handleChange(evt) {
    let {onChange} = this.props

    let isValidFrom = this.isDateValid(this.dateFrom.value)
    let isValidTo = this.isDateValid(this.dateTo.value)

    if (!isValidFrom) {
        let errMsg = this.handleErrMsg()
        showError(errMsg);
    }

    if (!isValidTo) {
        let errMsg = this.handleErrMsg()
        showError(errMsg);
    }

    onChange({from:this.dateFrom.value, to:this.dateTo.value})
},
handleBlur() {
    let {onChange} = this.props
    let dateFrom = this.dateFrom.value
    let dateTo = this.dateTo.value

    let isValidFrom = this.isDateValid(dateFrom)
    let isValidTo = this.isDateValid(dateTo)
    let isAfter = false

    // Validate the date-time when leave the input
    // If not valid, reset to the previous valid value
    if (!isValidFrom) {
        dateFrom = this.state.prevFrom
        this.dateFrom.value = dateFrom
    }

    if (!isValidTo) {
        dateTo = this.state.prevTo
        this.dateTo.value = dateTo
    }

    // validating the start time > end time
    isAfter = Moment(dateFrom).isAfter(dateTo)

    // Determine the start time is after end time or not;
    // if so, change start time & end time the same
    if (isAfter && isValidFrom) {
        onChange({from:dateFrom, to:dateFrom})
        this.setState({
            prevFrom: dateFrom,
            prevTo: dateFrom
        })
    }
    else if (!isAfter && isValidFrom && isValidTo) {
        onChange({from:dateFrom, to:dateTo})
        this.setState({
            prevFrom: dateFrom,
            prevTo: dateTo
        })
    }
    else {
        onChange({from:this.state.prevFrom, to:this.state.prevTo})
    }
}

Answer 1

无法重现错误，因为此代码可以正常工作

    public static string MakeHashForFile(Stream fileStream)
    {
        //HashResult hashResult = hashImplementation.ComputeStream(fileStream);
        byte[] bytes = GetBytesFromStream(fileStream);

        HashResult hashResult = hashImplementation.ComputeBytes(bytes);

        return hashResult.ToString().Replace("-", String.Empty).ToLowerInvariant();
    }

    private static byte[] GetBytesFromStream(Stream stream)
    {
        byte[] result;
        using (MemoryStream reader = new MemoryStream())
        {
            stream.CopyTo(reader);
            result = reader.ToArray();
        }
        return result;
    }

Answer 2

在您提供的示例页面上测试日期时间选择器后，我注意到输入失去了焦点，一旦我用时间选择器更改了时间。这可能是onBlur事件未被解雇的原因。相反，您可以尝试向日期时间选择器提供onClose事件。

$('#my-datetimepicker').datetimepicker({
    onClose: function(dateText, inst) {
        console.log('validate here');
    }
});

选择日期时不会触发反应onBlur

2 个答案: