Я пытаюсь сделать так, чтобы мой указатель даты появлялся при нажатии этой кнопки. Я не вижу, что не так с моим кодом, для меня, он должен работать .. но это не так. Может ли кто-нибудь взглянуть? (извините, новичок в jQuery и код в целом).
$( function() { $( "#datepicker" ).datepicker(); } );
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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> <button id="datepicker" class="btn btn-light">Jump to a specific date</button>
Datepicker привязан к стандартному полю ввода формы.
Вы можете отобразить указатель даты на кнопке с кодом ниже.
$( function() { $("#dateButton").datepicker({ showOn: 'button', buttonText: 'Jump to a specific date', dateFormat: 'dd/mm/yy', constrainInput: true }); } );
#dateButton { display: none; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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> <input id="dateButton" class="btn btn-light" />
Попробуйте это. вы забыли поставить cdn для выбора даты и времени css и js.
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script> </head> <body> <button id="datepicker" class="btn btn-light">Jump to a specific date</button> </body> </html> <script type="text/javascript"> $(function() { $("#datepicker" ).datepicker(); }); </script>
Во-первых, указатель даты должен быть создан на элементе input, чтобы выбранное значение было где-то сохранено (т. Е. В значении этого ввода).
input
Затем вы можете использовать опцию show DatePicker, чтобы отобразить его при нажатии кнопки, например:
show
$(function() { $("#datepicker").datepicker(); $('button').click(function() { $('#datepicker').datepicker('show') }); });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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> <input type="hidden" id="datepicker" name="date" /> <button class="btn btn-light">Jump to a specific date</button>