Question

首先，我想为我糟糕的英语道歉。我的问题：我正在为一家酒店编制预订网站，我想做一个文本字段，您可以选择下拉日历的一个日期作为开始日期和一个文本字段，您可以选择当前结束日期。

我该如何做到这一点下载日历，这会给我一个日期作为文本？

AirBnB示例：

Answer 1

您可以使用 Pikaday 这是一个纯JavaScript组件。结果如下：

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    firstDay: 1,
    minDate: new Date(),
    maxDate: new Date(2017, 11, 31),
    yearRange: [1950,2017]
});

.example{
    margin-top: 250px;
}

<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css">
<div class="example">
    <label for="datepicker">Date:</label>   
    <input type="text" id="datepicker">
</div>
<script src="https://dbushell.com/Pikaday/pikaday.js"></script>

您可以通过查看完整文档Here来自定义它。

Answer 2

可以使用jquery，

＆＃13;

var startDate="";
var endDate="";
$(".datepicker").datepicker({
    minDate: 0,
    numberOfMonths: 2,
    beforeShowDay: function(date) {
         var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, startDate);
         var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, endDate);
         var isHightlight =
            date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2));
        if(isHightlight && date1.getTime()==date.getTime()){
               return [true, "start-range"]
        }
        else if(isHightlight && date2.getTime()==date.getTime()){
               return [true, "end-range"]
        }
        return [true, isHightlight ? "dp-highlight" : ""];
    },
    onSelect: function(dateText, inst) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, startDate);
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, endDate);
        var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

        if (!date1 || date2) {
            startDate=dateText;
            endDate="";
            FillTextBoxes();
        } else if (selectedDate < date1) {
           endDate=startDate;
           startDate=dateText;
 						FillTextBoxes();
        } else {
             endDate=dateText;
              $("#input2").val(endDate);
        }

        $(this).datepicker();
    }
});
function FillTextBoxes(){
            $("#input1").val(startDate);
            $("#input2").val(endDate);
}

＆＃13;

       .start-range .ui-state-default {
          background: #16F2A5;
            color: #FFFFFF;
        }
       .dp-highlight .ui-state-default {
            background: #484;
            color: #FFF;
        }

        .end-range .ui-state-default{
         background: #F21663;
         color: #FFF;
        }

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<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>

<p>
  Dates:
  <label><b>To:</b></label>
  <input type="text" id="input1">
  <label><b>From:</b></label>
  <input type="text" id="input2">
</p>
<div class="datepicker"></div>

＆＃13;

Answer 3

请参阅daterangepicker http://www.daterangepicker.com，也许可以帮助您

打开Datepicker日历

3 个答案: