内联日期选择器无法使用 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 Here

Answer 1

您没有正确初始化日期选择器。我删除了一些额外的代码并添加了 jquery-ui.min.css 以正确设置日历样式

HTML-

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

脚本-

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

已更新 fiddle - https://jsfiddle.net/q1fwaevL/2/

您可以在此处参考 api 日历的 jquery 文档以了解其他日期选择器事件 - 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>

内联日期选择器无法使用 jquery/html

Inline date picker not working using jquery/html

html

javascript

jquery

datepicker

jquery-ui-datepicker