使用輸入類型=「文本」的jQuery UI日期選擇器

Question

我無法使用輸入type="text"使我的日期選取器工作。任何幫助都會很棒。

$(document).ready(function() { 
 
    $("#checkin").datepicker(); 
 
    $("#checkout").datepicker(); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<label for="checkin">Checkin</label> 
 
<input type="text" name="checkin" id="checkin" placeholder=" Check in"/> 
 

 
<label for="checkout">Checkout</label> 
 
<input type="text" name="checkout" id="checkout" placeholder=" Check out"/>

Answer 1

您可以在下面找到使用你的代碼工作樣例。我已經包含了jQuery，jQuery UI JS和CSS文件。

$(function() { 
 
    $("#checkin").datepicker(); 
 
    $("#checkout").datepicker(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<label for="checkin">Checkin</label> 
 
<input type="text" name="checkin" id="checkin" placeholder=" Check in" /> 
 

 
<label for="checkout">Checkout</label> 
 
<input type="text" name="checkout" id="checkout" placeholder=" Check out" />