如何不止一次使用日期选择器?

时间:2018-05-23 07:47:42

标签: jquery html datepicker

这是我的表格:

<div class="educationalInfo__wrapper">
  <div class="row educationalInfo">
    <div class="col-md-2">
    <form>            
        <div class="col-md-2">
            <div class="form-group">
                <label><code>* </code>تاریخ شروع</label>
                <input type="text" class="clear startdate" name="education[startdate][]" id="startdate" tabindex="14">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label><code>* </code>تاریخ پایان</label>
                <input type="text" class="enddate clear" name="education[enddate][]"" id="enddate"  tabindex="14">
            </div>
        </div>
        <div class="col-md-1 col-sm-1 col-xs-2">
            <div class="form-group plus-mg">
                <label></label>
                <a href="javascript:void(0)" id="educationalInfo__add" tabindex="42">
                    <span class="glyphicon glyphicon-plus"></span>
                </a>
            </div>
        </div>

    </form>
     </div>
  </div>
</div>

我正在使用克隆复制表格:

$('#educationalInfo__add').click(function () {
    var clone_r = $('.educationalInfo').eq(0).clone(true);
    clone_r.find('.clear').val('');
    $('.educationalInfo__wrapper').append(clone_r);



    $(".gpa").mask("99/99", {placeholder: "../.."});
    $(".enddate").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '-50:-15',
        dateFormat: 'yy/mm/dd'
    });
    $(".startdate").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '-50:-15',
        dateFormat: 'yy/mm/dd'
    });



});

但日期选择器仅适用于第一个,即使我点击另一个,它也只属于第一个。 我使用了类,但它没有用。有了这个描述,有人可以帮我修复这个问题吗?

1 个答案:

答案 0 :(得分:1)

试试此代码

$('#educationalInfo__add').click(function() {
    var clone_r = $('.educationalInfo').eq(0).clone(false);
    clone_r.find('.clear').val('');
    $('.educationalInfo__wrapper').append(clone_r);
    //$(".gpa").mask("99/99", {placeholder: "../.."});
    clone_r.find('.startdate').each(function() {
        $(this).removeAttr('id').removeClass('hasDatepicker'); // 
        $('.startdate').datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '-50:-15',
            dateFormat: 'yy/mm/dd'
        });
    });
    clone_r.find('.enddate').each(function() {
        $(this).removeAttr('id').removeClass('hasDatepicker'); // 
        $('.enddate').datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '-50:-15',
            dateFormat: 'yy/mm/dd'
        });
    });
});


$(".enddate").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '-50:-15',
    dateFormat: 'yy/mm/dd'
});
$(".startdate").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '-50:-15',
    dateFormat: 'yy/mm/dd'
});

fiddle link