Question

图片：

我正在考虑使用bootstrap

关于如何做的任何想法？感谢。

Answer 1

您可以使用此代码。

$('.datepicker').datepicker({ multidate: true, });

Answer 2

<html>
	<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Datepicker</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            var dates = new Array();

            function addDates(date) {
                if (dates.length > 0) {
                    dates = [];
                }
                if (jQuery.inArray(date, dates) < 0){
                    var i;
                    for (i=1;i<14;i++){
                        var month = date.getMonth()+1;
                        var day = date.getDate() + i;
                        var year = date.getFullYear();

                        var value = month + '/' + day + '/' + year;
                        dates.push(value);
                    }
                    console.log(dates);
                }
            }
            jQuery(function () {
                jQuery("#datepicker").datepicker({
                    autoclose: false,
                    onSelect: function (dateText, inst) {
                        var date = new Date($(this).datepicker('getDate'));
                        addDates(date);
                    },
                    beforeShowDay: function (date) {
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();
                        var dateString = month + "/" + day + "/" + year;

                        var gotDate = jQuery.inArray(dateString, dates);
                        if (gotDate >= 0) {
                            // Enable date so it can be deselected. Set style to be highlighted
                            return [true, "ui-state-highlight"];
                        }
                        // Dates not in the array are left enabled, but with no extra style
                        return [true, ""];
                    }
                });
            });
        </script>
    </head>
<body>
 
    <p>Date: <input type="text" id="datepicker"></p>

到目前为止一切顺利

自动显示接下来14天的日期选择器

2 个答案: