JQuery Datepickers - Обязательный, Только чтение и Отображение ошибок - PullRequest
Новая
       7

JQuery Datepickers - Обязательный, Только чтение и Отображение ошибок

0 голосов
/ 22 декабря 2018

У меня есть онлайн-форма страховки, где у меня небольшая проблема с jQuery Datepickers

Во-первых, у меня есть четыре сборщика на одной из страниц формы: 

<input type="text" id="prim_dob" name="prim_dob" class="form-control" style="background:white;" placeholder="Birthdate is REQUIRED" data-error="Select Your Birthdate" required />
<div class="help-block with-errors"></div>

<input type="text" id="dep_date" name="dep_date" class="form-control" style="background:white;" placeholder="REQUIRED" data-error="Select Your Depart Date" required />
<div class="help-block with-errors"></div>

<input type="text" id="proceedure_date" name="proceedure_date"  class="form-control" style="background:white;" placeholder="REQUIRED" data-error="Select Your Proceedure Date" required />
<div class="help-block with-errors"></div>

<input type="text" id="ret_date" name="ret_date" class="form-control" style="background:white;" placeholder="REQUIRED" data-error="Select Your Return Date" required />
<div class="help-block with-errors"></div>

Прим-доб работает точно так, как должно.Отправка формы отключена, если в календаре не выбрана дата, а соответствующее сообщение об ошибке отображается в div «help-block».Другие 3, которые зависят друг от друга, не позволят отправлять форму, если не выбрана дата, но откажутся отображать сообщения об ошибках.Сценарий для всех четырех ниже:

Идеи ?? 

<script>
 // make them all basically read-only. They MUST use the picker...
  $( '#prim_dob' ).keydown( function ( event ) { event.preventDefault(); } )
  $( '#dep_date' ).keydown( function ( event ) { event.preventDefault(); } )
  $( '#proceedure_date' ).keydown( function ( event ) { event.preventDefault(); } )
  $( '#ret_date' ).keydown( function ( event ) { event.preventDefault(); } )


  $( "#prim_dob" ).datepicker( {
    yearRange: '-71:+0',
    changeMonth: true,
    changeYear: true,
    showMonthAfterYear: true,
    dateFormat: 'dd M yy',
    minDate: "-71Y",
    maxDate: "+0Y"
  } );
  <?php if($dob == ''): ?>
    $('#prim_dob').datepicker("setDate", null);
  <?php else: ?>
    $( "#prim_dob" ).datepicker( "setDate", new Date( <?php echo $dob; ?> ) );
  <? endif; ?>

 // dep_date can't be before the current date 
  $( "#dep_date" ).datepicker( {
    yearRange: "-0:+1",
    minDate: -1,
    changeMonth: true,
    changeYear: true,
    showMonthAfterYear: true,
    dateFormat: 'dd M yy',
    onSelect: function ( dateValue, inst ) {
      $( "#proceedure_date" ).datepicker( "option", "minDate", dateValue )
    }
  } );
    <?php if($dep == ''): ?>
    $('#prim_dob').datepicker("setDate", null);
  <?php else: ?>
  $( "#dep_date" ).datepicker( "setDate", new Date( <?php echo $fmdep; ?> ) );
 <? endif; ?>

  // procedure_date can be before dep_date
  $( "#proceedure_date" ).datepicker( {
    yearRange: "-0:+1",
    minDate: 0,
    changeMonth: true,
    changeYear: true,
    showMonthAfterYear: true,
    dateFormat: 'dd M yy',
    onSelect: function ( dateValue, inst ) {
      $( "#ret_date" ).datepicker( "option", "minDate", dateValue )
    }
  } );
    <?php if($prc == ''): ?>
    $('#prim_dob').datepicker("setDate", null);
  <?php else: ?>
  $( "#proceedure_date" ).datepicker( "setDate", new Date( <?php echo $fmprc; ?> ) );
 <? endif; ?>

 // ret_date has to be equal or later than procedure_date
  $( "#ret_date" ).datepicker( {
    yearRange: "-0:+1",
    minDate: 0,
    changeMonth: true,
    changeYear: true,
    showMonthAfterYear: true,
    dateFormat: 'dd M yy',
  } );
    <?php if($ret == ''): ?>
    $('#prim_dob').datepicker("setDate", null);
  <?php else: ?>
  $( "#ret_date" ).datepicker( "setDate", new Date( <?php echo $fmret; ?> ) );
   <? endif; ?>
</script>
...