在一个输入中显示两个正文日历

Question

有没有办法像下图中的示例那样创建日历输入？

我用过<input type="date">但它只显示一个日历的内容，如果要两个它必须有两个<input type="date">，但我这里想要一个< input>可以显示两个日历主体可以select日历主体上的日期，有什么办法吗？

<form action="/check_calendar.php">
  <label>Calendar :</label>
  <input type="date" name="calendar">
  <input type="submit" value="SEND">
</form>

示例：

Answer 1

使用日期范围选择器。你会很轻松的实现它。

Answer 2

你可以试试这个:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    </head>
    <body>
        <input type="text" name="daterange" value="01/01/2021 - 01/15/2021" />
    </body>

    <script>
        $(function() {
            $('input[name="daterange"]').daterangepicker(
                {
                    ssingleDatePicker: 'true',
                    showShortcuts: 'false',
                    showTopbar: 'false'
                }
            );
        });
    </script>

</html>

在一个输入中显示两个正文日历

Show two body Calendars In one Input

html

calendar