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

您可以添加属性＆＃39;已禁用＆＃39;选择所需输入字段的选项。

}未提交属性为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>

Answer 2

我认为您的代码中的问题是您为两个文本框指定了相同的名称属性。

因此，当您在文本框之间切换时，只会保存第一个日期选择器日期。

解决方案：当您保存表单以检查下拉值时，如果值为1，则使用第一个datepicker name属性保存，如果第二个选中，则使用不同的名称作为值。

<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_date2"/>
        </div>
      </div>
    </div>

当使用ap_due_date名称下拉值为1保存日期时，如果您的表单中使用ap_due_date2属性，则下拉值为2保存日期。

因为表单必须具有每个元素的唯一属性名称。 修改所以在你的表单提交方法中使用if条件

if(ap_status == 1) //save ap_due_date value in ap_due_date else if() apc_status == 2 // save ap_due_date2 value in ap_due_date

两个不同的文本输入与datepicker基于下拉选择

2 个答案: