Уменьшение 2 шагов до 1-го числа при нажатии на тип ввода = дата

Поэтому я использую input type="date" в мобильном приложении типа cordova. По какой-то причине placeholder не будет отображаться, если тип ввода - дата. Таким образом появляется пустая кнопка, например, при нажатии на календарь. Поэтому я пытаюсь выполнить взлом, в котором input type="text" имеет placeholder "Дальнейшее действие". И onfocus Я меняю тип на date. И onblur Я возвращаюсь к type="text" и снова делаю placeholder. Поэтому этот процесс частично решает проблему, которую я пытаюсь решить. Чтобы удалить эту белую кнопку. Но в моем текущем коде я должен выполнить два шага

Сначала нужно щелкнуть по заполнителю, после чего onfocus будет запущен и отобразит белую вещь.
Во-вторых, я должен щелкнуть по белому, чтобы отобразить календарь.

Я не хочу, чтобы этот второй шаг появился. Вот мой код

<ElementsBasket name='nextActionDate' 
    data={this.props.newLead.get('actions').get('nextActionDate')}>
        <div className="form-group">
         <input type="text" className="form-control" onFocus={this._onFocus} onBlur={this._onBlur} placeholder="Next Action Date"        
                       value={this.props.newLead.get('actions').get('nextActionDate')}
                       onChange={onFieldChanged.bind(this, 'actions.nextActionDate')}
                       />       
        </div>
</ElementsBasket>



_onFocus: function(e){
       e.currentTarget.type = "date";
    },


    _onBlur:function(e){
      e.currentTarget.type="text"
      e.currentTarget.placeholder = "Next Action Date";
    },

Также я попробовал onclick, который также сделал два шага. Я следил за этой ссылкой Не показывать заполнитель для типа ввода =" date " Поле

PS: Белая вещь - это кнопка без текста, при нажатии на нее будет отображаться календарь

Ответ 1

Вы можете попробовать активировать фокус или щелкнуть событие:

_onFocus: function() {
     e.currentTarget.type = "date";
     e.currentTarget.focus(); // or .click();
}

Ответ 2

Попробуйте наложить ввод даты на вкладку-заполнитель и установить дату, введенную в CSS opacity: 0. Поэтому, когда пользователь пытается щелкнуть вкладку "Заполнитель", они фактически нажимают на ввод даты.

Вот пример JSBin. http://jsbin.com/rozusihade/edit?css,js,output

Обратите внимание на обратные вызовы onDateInputFocus и onDateInputBlur, которые обновляют внешний вид даты.

Ответ 3

попробуйте onfocus = ""

<input placeholder="select date" type="text" onfocus="(this.type='date')">

http://codepen.io/anon/pen/zGaQax

В противном случае я создам место с ng-show вместо тега ввода изменений. Тег ввода всегда должен быть "дата", если вы хотите использовать собственный выбор даты. (что всегда нужно делать)