Question

Page Body

<div>Project Name</div>
<div>Project Scopes Details</div>
<div id="scopeFrame">
    <div id="scope01">
        <div>Scope1 Name</div>
        <div>Start Date: 1 June 2015</div>
        <div>Completed Date: <input id="completed_date_1" class="completed_date" type="text" data-mindate="1-6-2015" /></div>
    </div>

    <div id="scope02">
        <div>Scope1 Name</div>
        <div>Start Date: 15 June 2015</div>
        <div>Completed Date: <input id="completed_date_2" class="completed_date" type="text" data-mindate="15-6-2015" /></div>
    </div>

    <div id="scope03">
        <div>Scope1 Name</div>
        <div>Start Date: 22 June 2015</div>
        <div>Completed Date: <input id="completed_date_3" class="completed_date" type="text" data-mindate="22-6-2015" /></div>
    </div>
</div>

脚本

$(document).ready(function() {
// SET jQuery UI calender for completion date
    $('.completed_date').datepicker({
        dateFormat: "dd MM yy",
        minDate: new Date($(this).attr('data-minDate')), // min date is scope start date
        maxDate: new Date(), // max date is ToDay, current date;
    });
});

我可能无法获得日期选择器的最小日期。 Mindate是我在完整日期文本框中设置为 data-mindate 的范围开始日期。有什么建议吗？

Answer 1

试试这个

<script>
$(document).ready(function(){
$.each($('.completed_date'), function() {
    var mindate = $(this).attr('data-minDate');
   $(this).datepicker({
        dateFormat: "dd MM yy",
        minDate: new Date(mindate),
        maxDate: new Date(), // max date is ToDay, current date;
    });
});

});

</script>
</head>
<body>
<div>Project Name</div>
<div>Project Scopes Details</div>
<div id="scopeFrame">
    <div id="scope01">
        <div>Scope1 Name</div>
        <div>Start Date: 1 June 2015</div>
        <div>Completed Date: <input id="completed_date_1" class="completed_date" type="text" data-mindate="02 February 2016" /></div>
    </div>

    <div id="scope02">
        <div>Scope1 Name</div>
        <div>Start Date: 15 June 2015</div>
        <div>Completed Date: <input id="completed_date_2" class="completed_date" type="text" data-mindate="12 February 2016" /></div>
    </div>

    <div id="scope03">
        <div>Scope1 Name</div>
        <div>Start Date: 22 June 2015</div>
        <div>Completed Date: <input id="completed_date_3" class="completed_date" type="text" data-mindate="14 February 2016" /></div>
    </div>
</div>

Answer 2

   $(document).ready(function() {
    $('.completed_date').datepicker({
        dateFormat: "dd MM yy",
       minDate: new Date($(this).data('mindate')),
        maxDate: new Date()
    });
});

此处的日期格式也列为dd MM yy，但在代码中，数据属性列为data-mindate =“22-6-2015”。我不太清楚datepicker是否足以知道这是否是一个问题，日期格式可能是dd-MM-YYYY，值之间是连字符，月份中的前导0和4个Y字符？（例如：22-06-2016作为数据attibute和dd-MM-YYYY作为日期格式）？

另外 - 因为我不知道日期选择器我不知道这是否会引起问题，但是你有三个输入类型为completed_date - 但每个输入都有不同的值。日期选择器可以应付这个吗？或者是否需要绑定到单个输入元素。或者它只是将思想价值的最小值作为思想。不知道，但我想 - 值得一提的是代码的$（this）部分可能是问题。也许每个输入都需要使用.each（）进行迭代...允许$（this）.data（'mindate'）值为每个输入的值。抱歉胡扯 - 我现在闭嘴了。：）

Answer 3

尝试使用minDate：新日期（$（this）.attr（＆＃39; data-mindate＆＃39;，＆＃39;您的日期＆＃39;）

jquery datepicker set minDate based-on data-attribute（$（this）.attr（））

3 个答案: