日期选择器给出未定义的值

Question

我试图在单击提交按钮时获取日期。在控制台中，正在发送其他 2 个数据字段值，但不发送日期。正在显示日历，日期出现在文本框中。

因此它正在显示 data:Failure

我在 datepicker.js 文件中将格式更改为 "yyyy-mm-dd"

HTML代码：

<!doctype html>
<html lang="en">

<head>
  <title></title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="css/datepicker.css"> 
  <script src="js/datepicker.js"></script> 


</head>

<body>

  <div style="overflow-x: auto;">  
      <div class="card-body">
        <div class="col-md-12" style="display:inline-flex" >
          <div class="col-md-4" style="padding-left: 0px;"> 
            Report: <select class="select2able" id="repkpi">
            </select>          
          </div>
          <div class="col-md-3"> 
            Sheet: <select class="select2able" id="sheetxl">

            </select>          
          </div>
          <div class="col-md-3" style="display: flex;">
           <label for="datepicker" class="astrick" id=datepicker>Date:</label> 
           <input type="text" class="form-control datepicker" data-toggle="datepicker">

          </div> 

          <div class = "col-md-2">
           <button type="button" class="btn btn-primary submitrepbtn" id="btn_submitrep">Submit</button>

          </div>
        </div>

        <table class="table table-striped table-bordered table-hover table-responsive" id="TbodyRuleRepo"
          style="width:100%; font-size: 12px;"></table>
      </div>  
    </div>
  </div>

日期选择器

    <script>
      $(function() {
        $('[data-toggle="datepicker"]').datepicker({
          autoHide: true,
          zIndex: 2048,
        });
      });
    </script>

AJAX 通话

$(document).on('click','.submitrepbtn', function(){
    debugger;
    let date = $('#datepicker').val();
    let Sheet = $("#sheetxl  option:selected").text();
    let repsheet= $("#repkpi option:selected").text();

    let repObj = new Object(); 

    repObj.date = date;
    repObj.sheet= Sheet;
    repObj.kpi=repsheet;

    let sendDate = new Object();
    sendDate = repObj;

    $.ajax({
        type: 'POST',
        url: 'apicall',
        contentType: 'application/json',
        data: JSON.stringify(sendDate),
        success: function (data) {
            debugger;

               var a=JSON.stringify(data);
                pwIsf.alert({msg:'Data:'+a, type:'info'}); 


        },
          error: function (xhr, status, statusText) {     
            var err=JSON.stringify(data);
            pwIsf.alert({msg:'Error!'+err, type:'error'});       
        }

    })

 }
 );

Answer 1

努力改变

 <label for="datepicker" class="astrick" id=datepicker>Date:</label> 
 <input type="text" class="form-control datepicker" data-toggle="datepicker">

进入

 <label for="datepicker" class="astrick">Date:</label> 
 <input type="text" class="form-control datepicker" id="datepicker" data-toggle="datepicker">

您试图获取与 id datepicker 匹配的元素的值，但在您的代码中该元素是输入的标签，而不是输入本身。

日期选择器给出未定义的值

Date picker giving undefined value

ajax

jquery

user-interface

jquery-ui

datepicker