datepicker jquery не работает

Question

Я использую следующий код. Для этого кода datepicker не отображается. Но когда я нажимаю div datepicker с помощью InspectElement, появится датапикер. В чем причина? ..

<input type="text" id="datePicker" placeholder="Select Date"style="height: 34px;width: 171px;position: relative;left:-21px;border-radius: 5px;"onclick="showDatePicker()"> 

Это мое текстовое поле.

И код JS является

function showDatePicker() 
{ 
    $("#datePicker").datepicker(); 
} 

Answer 1

Вам не нужно это, onclick="showDatePicker().

Мы инициализировать его, как показано ниже:

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

$(function() { 
 
    $("#datePicker").datepicker(); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
<input type="text" id="datePicker" placeholder="Select Date"style="height: 34px;width: 171px;position: relative; border-radius: 5px;">

Как вы заметили из выше фрагмента кода вы должны также ссылаться на JQuery-UI до тех пор, как Jquery-интерфейса. CSS. Кроме того, вы должны создать стиль datepicker.

Answer 2

Удалить действие OnClick, DatePicker обрабатывает это:

<input type="text" id="datePicker" placeholder="Select Date" style="height: 34px;width: 171px;position: relative;left:-21px;border-radius: 5px;"> 
<script>$(function() { $("#datePicker").datepicker(); });</script>