Question

我有一个在线保险表格，我在使用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>

prim-dob确实可以正常工作。除非从日历中选择日期，否则表单提交将被禁用，并且相应的错误消息将显示在“帮助块” div中。如果没有选择日期，则彼此依赖的其他三个将不允许提交表单，但拒绝显示错误消息。以下所有四个脚本：

想法？

<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>

jQuery Datepickers-必需，只读和错误显示

0 个答案: