允许天数的Jquery datepicker取决于select

时间:2017-09-21 15:12:04

标签: javascript jquery html datepicker

嗨我有Jquery datepicker允许选择即将到来的6天,但需要让它依赖于select选项,例如: 如果选择一些选择选项,我想要datepicker让我选择10天而不是允许6天和e.t.c

有谁知道怎么做?

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">  -->
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script>
$(document).ready(function(){
    $("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 6d"} ).val();
    var date=Number($("#date").val());
    $("#date").change(function(){
        var date=Number($("#date").val());
        $("#datepicker").datepicker("destroy");
        if(date===0)
            $("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 6d"} ).val();
        else
            $("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 15d"} ).val();
        $("#datepicker" ).datepicker("refresh");
        console.log(date);
    });
    $(function() {
        $("#datepicker").datepicker().val();
    });
});
</script>

</head>
<body>
    <select name="da" id="date">
        <option value="0">no</option>
        <option value="1">yes</option>
    </select>
    <button id="button">button</button>
    <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

在你的maxdate函数中定义了6d。也许把它改成10d?

   $("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 10d"} ).val();

会工作吗?也可以通过在radiobuttons中添加onClick并在函数中设置它来调用javascript函数,而不是创建.change。之后重新加载日期选择器,因为它仍在使用旧配置。

例如

<option onClick('changeto5();') value="0">no</option>
    <option onClick('changeto10();') value="1">yes</option>