时间戳

首页 > 解决方案 > 如何多次使用日期选择器？

jquery - 如何多次使用日期选择器？

问题描述

这是我的表格：

<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'
    });



});

但是日期选择器只适用于第一个，即使我点击另一个它也只属于第一个。我使用了类，但没有用。有了这个描述，有人可以帮我解决这个问题吗？

标签： jqueryhtmldatepicker

解决方案

试试这个代码

$('#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'
});

小提琴链接

推荐阅读