1

I would simply like to prevent users from entering or disable the previous dates in input datetime-local , is there a way to do this?

Here is what I have done, unfortunately nothing happens on this code:

<input type="datetime-local" class="form-control col-md-6" name="book" required>
<script>
  var today = new Date().toISOString().split('T')[0];
  document.getElementsByName('book')[0].setAttribute('min', today);
</script>
RobG
  • 142,382
  • 31
  • 172
  • 209
Jigen Otsuki
  • 57
  • 1
  • 6
  • If you want the **local** date, don't use *toISOString* as that returns the UTC date, which will be ±1 day for users for the period of their local offset either side of midnight (which can be -10 to +14 hours). See [*Format JavaScript date as yyyy-mm-dd*](https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd). – RobG Nov 16 '21 at 05:35
  • The issue is that the value for [*DateTIme-local*](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) must be YYYY-MM-DDTHH:mm. The above trims the time (but it also uses the UTC date and time, not local so that needs to be fixed too). – RobG Nov 16 '21 at 05:47

2 Answers2

5

try this

var today = new Date().toISOString().slice(0, 16);

document.getElementsByName("book")[0].min = today;
<input type="datetime-local" class="form-control col-md-6" name="book" required>
Mohammad Ali Rony
  • 4,695
  • 3
  • 19
  • 33
0
        <div class="row">
            <div class="col-md-6">
              <label for="time_start">{{ __('adminstaticword.timestart') }}:<sup class="redstar">*</sup></label>
              <input type="datetime-local" class="form-control" name="time_start" id="time_start" placeholder="Enter time_start" required min="{{date('Y-m-d')}}"  value="{{ old('time_start') }}" >
              <script>
                var today = new Date().toISOString().slice(0, 16);
                document.getElementsByName("time_start")[0].min = today;
                </script>
            </div>
ramal
  • 1
  • 1