0

I am trying to complete this (easy) task but I can't figure it out. It's easy in my head.

This is the div with icon, input and label:

<div id="datefromto" class="field text-field @if(isset($value)){{ 'active' }}@endif @if(isset($readonly)){{ 'readonly' }}@endif">
        <label>{{ $label }} From:</label>
        <i class="material-icons calendar-icon">access_time</i>
        <input  name="{{ $name }}" type="text" class="datetime" @if(isset($value))value="{{ $value }}"@endif>
    </div>

I tryied this but it's no good:

   $('#datefromto input[type=text]')(function(){
    if ($(this).val()){
        $('.calendar-icon').css("display", "none");
    }
});
Joshep95
  • 117
  • 1
  • 1
  • 8
  • You can check if the input is focused. See https://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus – Alator Jun 03 '19 at 07:41

2 Answers2

2

I would advice you to use input event, instead of change. (based on this answer

 $(".datetime").on('input', function() {
        $('.calendar-icon').toggle(!$(this).val());
    });
dganenco
  • 1,596
  • 1
  • 5
  • 16
1

Almost there. Add a change handler to your input element where the date is set and hide the icon

    $(".datetime").on('change', function() {
        if(this.val()) {
            $('.calendar-icon').css("display", "none");
        }
    });
sachin kalekar
  • 526
  • 2
  • 9