javascript - 基于下拉选择的日期选择器的两种不同文本输入

Question

    <div class="row">
      <div class="col-md-6">
        <div class="input-group date xdue_date datepicker1">
          <input type="text" id="ap_due_date" name="ap_due_date/">
        </div>
        <div class="input-group date xdue_date2 datepicker2" style="display:none;">
          <input type="text" id="ap_due_date2" name="ap_due_date"/>
        </div>
      </div>
    </div>

    <div class="form-group">
      <select id="ap_status" name="ap_status">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="2">3</option>
        <option value="2">4</option>
        <option value="2">5</option>
      </select>
    </div>

<script>

    $('#ap_status').change(function() {
        var ap_status = $(this).val();
        $('.xdue_date').hide();
        $('.xdue_date2').hide();

        if (ap_status == 1) {
            $('.xdue_date2').show();
            $('.xdue_date').hide();
        } else if (ap_status == 2) {
            $('.xdue_date').show();
            $('.xdue_date2').hide();
        } else if (ap_status == 3) {
            $('.xdue_date').show();
            $('.xdue_date2').hide();
        } else if (ap_status == 4) {
            $('.xdue_date2').show();
            $('.xdue_date').hide();
        } else if (ap_status == 5) {
            $('.xdue_date').show();
            $('.xdue_date2').hide();

        }
    });

    $(function(){
        $('.datepicker1').datepicker({
            format: 'mm-dd-yyyy',
            //startDate: '-0m'
        }).on('changeDate', function(ev){
            //$('#sDate1').text($('.datepicker1').data('date'));
            $('.datepicker1').datepicker('hide');
        });

        $('.datepicker2').datepicker({
            format: 'mm-dd-yyyy',
            startDate: '-0m'
        }).on('changeDate', function(ev){
            $('#sDate1').text($('.datepicker2').data('date'));
            $('.datepicker2').datepicker('hide');
        });

    });

</script>

我有一个文本输入和一个下拉菜单。如果我选择 = 2，则另一个文本输入可见，另一个则隐藏。我现在的问题是获得正确的日期。因为现在如果两个输入字段都有日期，那么我保存 ap_due_date 的值时将基于第一个输入字段。

Answer 1

您可以在选择选项上将属性“已禁用”添加到所需的输入字段。具有属性 disabled 的输入字段未提交。

Fiddle Link

JS

$(function(){
    $('#test').on('submit',function(e){
    e.preventDefault()
    alert($(this).serialize())
    })
    $('#ap_due_date').datepicker({
        dateFormat: 'dd-mm-yy',
        altField: '#thealtdate',
        altFormat: 'yy-mm-dd'
    });
    $('#ap_due_date2').datepicker({
        dateFormat: 'dd-mm-yy',
        altField: '#thealtdate',
        altFormat: 'yy-mm-dd'
    });

    $('select').on('change',function(){
            if($(this).val()==1){
            $("#xdue_date2").hide()
          $("#ap_due_date2").prop('disabled',true)
          $("#ap_due_date").prop("disabled", false);
          $("#xdue_date").show()
        }
        if($(this).val()==2){
            $("#xdue_date2").show()
          $("#ap_due_date2").prop("disabled", false);
          $("#ap_due_date").prop('disabled',true)
          $("#xdue_date").hide()
        }
    })

});

html

<form action="" id="test">
  <div class="row">
    <div class="col-md-6">
      <div class="input-group date xdue_date datepicker1" id="xdue_date">
        <input type="text" id="ap_due_date" name="ap_due_date" placeholder="first">
      </div>
      <div class="input-group date xdue_date2 datepicker2" id="xdue_date2" style="display:none;">
        <input type="text" id="ap_due_date2" name="ap_due_date" disabled placeholder="second" />
      </div>
    </div>
  </div>

  <div class="form-group">
    <select id="ap_status" name="ap_status">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button type="submit"> Submit</button>
  </div>
</form>