Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mayuri0606's avatar

Date picker validation in multi-row does not work

I inserted two date pickers to select "from" "to" dates inside multi rows. Now I want to validate the "from date" and "to date". So I added validations as follows.

    $request->validate([
            'from.*' => 'required',
            'to.*' => 'required',
        ],
        [
            'from.required' => 'Please select from date.',
            'to.required' => 'Please select to date.'
        ]
    );

But it doesn't show validations though I didn't select any date from the date picker, because the date picker gets default date as current date. (Default current date displays inside the text field)

Here is the blade.php and scripts

<td><input type="text" name="addmore[0][from]" placeholder="" class="form-control" value="" /></td>
<td><input type="text" name="addmore[0][to]" placeholder="" class="form-control" value="" /></td> 

<script type="text/javascript">
    var i = 0;
    $("#add").click(function(){
        ++i;
    
$("#dynamicTable").append('<tr><td><input type="text" name="addmore['+i+'][from]" placeholder="" class="form-control" value="{{ old('from') }}" /></td><td><input type="text" name="addmore['+i+'][to]" placeholder="" class="form-control" value="{{ old('to') }}" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');

$(function() {
  $('input[name="addmore['+i+'][from]"],[name="addmore['+i+'][to]"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1995,
    maxYear: parseInt(moment().format('YYYY'),10)
  }, function(start, end, label) {
    var years = moment().diff(start, 'years');
  });
  }); 

    });

    $(document).on('click', '.remove-tr', function(){  
         $(this).parents('tr').remove();
    });  

$(function() {
  $('input[name="addmore[0][from]"],[name="addmore[0][to]"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1995,
    maxYear: parseInt(moment().format('YYYY'),10)
  }, function(start, end, label) {
    var years = moment().diff(start, 'years');
  });
  });
</script>

Please help me to show validation if I didn't select a date from the date pickers. Thank you.

0 likes
5 replies
bobbybouwmann's avatar

So the datepicker already sets the current date. This means it's never empty, so you're required rule will never work.

The only thing you can do to make it work is clearing the value of the datepicker. You can set the value to nothing and it should work by default

<input type="text" name="addmore[0][from]" value="">

You can find examples here: https://www.daterangepicker.com/

mayuri0606's avatar

@bobbybouwmann

I tried with keeping value="" as empty as you said. But still current date displays on the text field and validations do not work.

Then, I tried with these inside the script.

autoUpdateInput: false, 

function(chosen_date) { $('input[name="addmore['+i+'][from]"],[name="addmore['+i+'][to]"]').val(chosen_date.format('YYYY-MM-DD')); }

In that case, though I selected a date from the date picker, the selected date doesn't display on the text field.

bobbybouwmann's avatar

That's because you disabled the update of the input using autoUpdateInput: false

mayuri0606's avatar

@bobbybouwmann Yeah, I tried it without autoUpdateInput: false also. But failed. Isn't there a way to validate date picker if the user didn't select a date? (I know that you have more & more experience than me. That's why I asked)

Please or to participate in this conversation.