【问题标题】:Bootstrap-datepicker inline get Date on click in short formatBootstrap-datepicker 内联获取点击日期短格式
【发布时间】:2017-08-22 00:16:14
【问题描述】:

我是初学者,正在尝试Bootstrap-Datepicker。我在 this Demo 中使用它嵌入/内联。

它有效,但我希望在单击日期时将所选日期显示在标签/文本框等中。到目前为止,我在单击按钮后才得到日期,但更糟糕的是,它是一条大线 Thu Mar 30.2017 00:00:00 GMT +100 (Mitteleuropäische Zeit)。 我希望它像30.03.201730. Mar.2017 这样简单。

我该怎么办?

PS。前 2 个解决方案有效,但返回了长线。其他 2 人回馈undefined

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.3.min.js"></script>

    <!-- Bootstrap Date-Picker Plugin -->
    <script src="js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap-datepicker3.css"/>
  </head>
  <body>
    <div id="pickyDate"> </div>
    <div>
      <input  type="text" placeholder="Date shown here"  id="showDate"/
    </div>
    <!-- Testing here -->
    <div> 
      <button type="button" class="btn btn-danger" onClick="showTestDate()">Danger Button</button>
      <span class="label label-danger" id="DateTest">Danger Label</span>
      <span class="label label-info" id="lbl2">Info Label</span>
      <span class="label label-info" id="lbl3">Info Label</span>
    </div>

    <script>
      $(document).ready(function(){
        $('#pickyDate').datepicker({
          format: "dd/mm/yyyy",
          todayBtn: "linked",
          language: "de",
          daysOfWeekDisabled: "0,6",
          daysOfWeekHighlighted: "4",
          todayHighlight: true,
        }); 
      })
      /* Need it in Format dd mm yyyy */
      function showTestDate(){
        /** works but output is too long */
        var datelist = $('#pickyDate').datepicker('getDate');
        document.getElementById("DateTest").innerText = datelist;   

        var valueDate = $("#pickyDate").datepicker("getDate");
        document.getElementById("showDate").value = valueDate;

        /** works not 'undefined' */
        var ndate = $("#pickyDate").data("datepicker").date;
        document.getElementById("lbl2").innerText = ndate;

        var myDate=window.document.getElementById("pickyDate").value;
        document.getElementById("lbl3").innerText=myDate;
      }
    </script>
  </body>
</html>

【问题讨论】:

    标签: javascript jquery twitter-bootstrap datepicker bootstrap-datepicker


    【解决方案1】:

    您必须使用datepicker('getFormattedDate') 而不是datepicker('getDate')getDate 返回一个 JavaScript Date 对象,该对象将以长格式在问题中提及。

    format 选项更改为dd.mm.yyyy 以获取带有数字月份的日期或更改为dd-M-yyyy 以获取缩写的月份名称。

    当您选择日期时,changeDate 事件会被触发,因此您可以附加一个监听器来更新您的输入、标签等。

    这是一个工作示例:

    $('#pickyDate').datepicker({
      format: "dd.mm.yyyy",
      todayBtn: "linked",
      language: "de",
      daysOfWeekDisabled: "0,6",
      daysOfWeekHighlighted: "4",
      todayHighlight: true,
    }).on('changeDate', showTestDate);
    
    function showTestDate(){
      var value = $('#pickyDate').datepicker('getFormattedDate');
      $("#showDate").val(value);
      $("#DateTest").html(value);
      $("#lbl2").html(value);
      $("#lbl3").html(value);
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.de.min.js"></script>
    
    <div id="pickyDate"></div>
    <div>
      <input type="text" placeholder="Date shown here"  id="showDate"/>
    </div>
    <!-- Testing here -->
    <div> 
      <button type="button" class="btn btn-danger" onClick="showTestDate()">Get date</button>
      <span class="label label-danger" id="DateTest">Danger Label</span>
      <span class="label label-info" id="lbl2">Info Label</span>
      <span class="label label-info" id="lbl3">Info Label</span> 
    </div>

    【讨论】:

      【解决方案2】:

      改变

      format: "dd/mm/yyyy",

      在你的脚本中

      format: "dd-M-yyyy"

      这是工作的 jsFiddle Date Picker Format

      希望它能满足您的要求。

      【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-12-03
      • 1970-01-01
      • 2013-10-06
      • 2015-07-06
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多