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();
});

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

您可以在此处引用jquery日历的api文档以获取其他日期选择器事件 - http://api.jqueryui.com/datepicker/

Answer 2

var a = [38, 34, 22, 19];
// create a variable to store the updated value
var tempNum = 0;
//use map which will return a new array
var m = a.map(function(b) {
  //update tempValue with new value
  tempNum = tempNum + b
  return tempNum; // return tempNum
});
console.log(m)

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

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

2 个答案: