admin管理员组

文章数量:1391951

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="pleted_date_1" class="pleted_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="pleted_date_2" class="pleted_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="pleted_date_3" class="pleted_date" type="text" data-mindate="22-6-2015" /></div>
    </div>
</div>

Script

$(document).ready(function() {
// SET jQuery UI calender for pletion date
    $('pleted_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;
    });
});

Some how i am unable to get the min-date for date-picker. Mindate is the scope start date which i have set as data-mindate in the plete date text box. any suggestions ?

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="pleted_date_1" class="pleted_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="pleted_date_2" class="pleted_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="pleted_date_3" class="pleted_date" type="text" data-mindate="22-6-2015" /></div>
    </div>
</div>

Script

$(document).ready(function() {
// SET jQuery UI calender for pletion date
    $('.pleted_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;
    });
});

Some how i am unable to get the min-date for date-picker. Mindate is the scope start date which i have set as data-mindate in the plete date text box. any suggestions ?

  • javascript
  • jquery
  • datepicker
Share Improve this question asked Feb 16, 2016 at 7:21 RamyzRamyz 4226 silver badges13 bronze badges 3
  • 1 'data-minDate' there is typo error.it's actually 'data-mindate' – shu Commented Feb 16, 2016 at 7:23
  • 1. should be 'data-mindate' not data-minDate' 2. use id for each date input type. – Banik Commented Feb 16, 2016 at 7:23
  • after correcting attr('data-minDate') to attr('data-mindate') also did not worked – Ramyz Commented Feb 16, 2016 at 8:22
Add a ment  | 

2 Answers 2

Reset to default 4

try this

<script>
$(document).ready(function(){
$.each($('.pleted_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="pleted_date_1" class="pleted_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="pleted_date_2" class="pleted_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="pleted_date_3" class="pleted_date" type="text" data-mindate="14 February 2016" /></div>
    </div>
</div>

Try minDate: new Date($(this).attr('data-mindate', 'your date'))

本文标签： javascriptjquery datepicker set minDate basedon dataattribute ((this)attr())Stack Overflow

版权声明：本文标题：javascript - jquery datepicker set minDate based-on data-attribute ($(this).attr()) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744756383a2623488.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。