jquery 如何设置datetimepicker

ktecyv1j 于 11个月前发布在 jQuery

关注(0)|答案(3)|浏览(167)

我似乎无法设置此jquery datetimepicker。我相信我正确地按照说明操作。然而，只有输入框显示。检查后，我在日志中看到这些错误

的数据
这是我正在尝试使用的插件。
https://xdsoft.net/jqplugins/datetimepicker/
先前代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="/jquery.datetimepicker.min.css"/>

  <script type="text/javascript">
   jQuery('#datetimepicker').datetimepicker();

</script>
</head>
<body>
 

    
    <input id="datetimepicker" type="text" >
 
 
</body>
<script src="/jquery.js"></script>
<script src="/build/jquery.datetimepicker.full.min.js"></script>
</html>

字符串
所以我在这里找到了原始文件enter link description here
然后将我的代码改为

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>

  <script type="text/javascript">
   jQuery('#datetimepicker').datetimepicker();

</script>
</head>
<body>
 

    
    <input id="datetimepicker" type="text" >
 
 
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</html>

型
但现在我有一个新的错误。有什么想法，我错过了什么？

的

jquery

来源：https://stackoverflow.com/questions/73023436/how-to-set-up-datetimepicker

3条答案

按热度按时间

6ioyuze21#

注意脚本的顺序和依赖关系，并使用事件侦听器：
简单来说：首先加载CSS（DateTimePicker），然后加载JS（jQuery，DateTimePicker），使用$（）.ready（）初始化事件监听器。

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

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home</title>
  
  <!-- Load CSS first -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
  
  <!-- Load JS second -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
  <!-- Initialize JS, setup eventlistener(s) -->
  <script type="text/javascript">
   jQuery(document).ready($ => $('#datetimepicker').datetimepicker());
  </script>
  
</head>

<body>
    <input id="datetimepicker" type="text" >
</body>

</html>

字符串

赞(0）回复(0）举报 11个月前

huus2vyu2#

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>

 
</head>
<body>
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script> either this or the previous one not both-->
 <script type="text/javascript">
   jQuery('#datetimepicker').datetimepicker();

</script>
</body>
</html>

字符串
上面的代码将解决所有关于在哪里放置脚本和加载什么的问题（你在哪里加载扩展和缩小版本的库）
请参见以下代码片段：

jQuery('#datetimepicker').datetimepicker();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css" />

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng==" 
    crossorigin="anonymous" referrerpolicy="no-referrer"></script> either this or the previous one not both-->

的数据

赞(0）回复(0）举报 11个月前

szqfcxe23#

$(document).ready(function () {

 $('.newExpextedStartTime').click(function() {
    $(".ExpextedStartTime").focus();
  });
    $(".ExpextedStartTime").datetimepicker({ step: 20, format: "d/m/Y H:i", autoclose: true, buttonImage: "../../../Content/Images/ef_calendar_icon.png", showOnFocus: false, buttonImageOnly: true, startDate: new Date() })
    $("#ExpextedStartTime").val(moment().format("DD/MM/YYYY HH:mm"));
});

.xdsoft_datetimepicker {left: 0px !important;}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    background: grey !important;
    box-shadow: grey 0 1px 3px 0 inset !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
color: darkgrey!important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<div class="input-group date" style="width: 50%;">
    <input autocomplete="off" class="form-control ExpextedStartTime valid" id="ExpextedStartTime" isiteditable="True" name="ExpextedStartTime" placeholder="dd/MM/YYYY HH:mm" type="text" value="" aria-invalid="false">
    <span class="input-group-addon  ">
        <span class="glyphicon glyphicon-calendar newExpextedStartTime"></span>
    </span>
</div>

首先加载CSS（DateTimePicker），然后加载JS（jQuery，DateTimePicker），并使用$（）.ready（）设置事件侦听器以使其简单。

赞(0）回复(0）举报 11个月前

我来回答

jquery 如何设置datetimepicker

3条答案

相关问题

热门标签

最新问答