內聯日期選擇器無法使用jquery / html

Question

我正在使用jquery創建內聯日期選擇器，但僅顯示整個date picker 。 它甚至不會改變幾個月。 我希望它顯示單擊日歷天的日期。

單擊日期選擇器時應顯示日期，但在input字段中未顯示任何更改。 我在stackover上搜索了相同的內容，但沒有運氣。

    <link href="https://fonts.googleapis.com/css?family=Lobster" 
  rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
   awesome.min.css" rel="stylesheet">
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
  <script 
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-
  ui.min.js"></script>
   <a href="blog/2015/08/jquery-bootstrap-icons.download.html" data-icon="download-alt"></a>

              <div>
                <div class="ids" id="1" style="float:left; clear:both">
                  <b style="color: #444444">Date</b>
                  <input id="enterdate" class="duedatetextbox" data-inline = "true" type="text" placeholder="Enter date" tabindex="101" disabled>
                  <div id= "setdate" style = "margin-left:0px;">
                    </div>
                </div>
                <div class="ids" id="2" style="float:left;">
                  <b style="color: #444444">Time</b>
                  <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102">
                </div>
              </div>

jQuery：

   <script type ="text/javascript">
    //date picker
  $('#setdate').datepicker({
    inline: true,
    altField: '#d'
   });

$('#enterdate').change(function(){
$('#setdate').datepicker('setDate', $(this).val());
  });
function adddescription()
 {   
$(`.description`).show();
$('.cardgutterrow').hide();
  }
</script>

的CSS

div.ids {
    width: 50%;
 }

div.ids b {
    display: block;
}

div.ids input {
    display: block;
    padding: 10px;
    background: whitesmoke;
    border: solid 1px grey;
    border-radius: 3px;
}

JSFiddle在這里

Answer 1

您尚未正確初始化日期選擇器。 我刪除了一些額外的代碼，並添加了jquery-ui.min.css來正確設置日歷的樣式

HTML-

<input type="text" id="datepicker">

腳本-

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

更新的小提琴-https: //jsfiddle.net/q1fwaevL/2/

您可以在此處參考jquery日歷的api文檔以了解其他datepicker事件-http : //api.jqueryui.com/datepicker/

Answer 2

 $('#setdate').datepicker({ inline: true, altField: '#d', onSelect: onDateChange }); function onDateChange(dateText, inst) { $("#enterdate").val(dateText); } 

 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <div> <div class="ids" id="1" style="float:left; clear:both"> <b style="color: #444444">Date</b> <input id="enterdate" class="duedatetextbox" data-inline = "true" type="text" placeholder="Enter date" tabindex="101" disabled> <div id= "setdate" style = "margin-left:0px;"> </div> </div> <div class="ids" id="2" style="float:left;"> <b style="color: #444444">Time</b> <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102"> </div> </div>