时间戳

首页 > 解决方案 > 如何创建显示开始日期和结束日期的日期选择器？

jquery-ui - 如何创建显示开始日期和结束日期的日期选择器？

问题描述

我想从 start 到 endDate 创建 jquery UI datepicker。不幸的是，此代码的一部分不起作用。但是我对其进行了故障排除，没有发现错误。有没有办法改进我的代码来完成这项工作？Jfiddle.net 已用于此代码，但我没有收到任何错误。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">



 <div class="d-flex justify-content-start">
 <div class="input-daterange input-group" id="datepicker">
   <input type="text" class="input-sm form-control" name="from" placeholder="startdate"/>
   <span class="input-group-addon">To</span>
   <input type="text" class= "input-sm form-control" placeholder="enddate"/>
     </div>
  </div><br>
<br>
  <br/>
  <br/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script>
<script type="text/javascript">

   // date functionality
  $(document).ready(function(){
  $('.input-daterange').datepicker({
   dateFormat: "dd-mm-yy"

    });
  });

标签： jquery-uibootstrap-4

解决方案

使用 jquery ui 日期选择器：

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 

  <div >
     <input type="text" id="datepicker" name="from" placeholder="startdate"/>
  </div>
  

<!-- <p>Date: <input type="text" id="datepicker"></p> -->
 
 
</body>
</html>

推荐阅读