如何设置日期时间选择器
问题描述 投票：0回答：3
我似乎无法设置这个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>
所以我在这里找到了原始文件在此处输入链接描述
然后将我的代码更改为以下
<!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>
但现在我有一个新错误。对我所缺少的有什么想法吗？
3个回答
0
投票
投票
注意脚本的顺序和依赖性并使用事件监听器：
为了简单起见： 首先加载 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
投票
投票
<!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
投票
投票
$(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()设置事件监听器，以使其简单。
最新问题
- 使用来自两个不同表的计数/求和数据进行分组
- 如果在目录中找到特定文件，则对特定文件执行多个命令
- 如何引导docker容器？
- 我的 Eclipse 中的 Java 程序正在终止
- HTMX Websockets 不会替换 DOM 中的内容
- 无法在 woocommerce 上显示替代属性标签
- 一个文件中多种语言
- 如何在 Excel VBA 中发送和返回范围/数组
- 针对大型数据集优化 Neo4j allShortestPaths
- TypeScript：如何使用表单复选框验证输入字段
- 在 Windows 10 上安装 Tesseract OCR 时，Tesseract 不在您的路径中
- 如何记录 Gmail API 的响应？
- 有没有办法从 C++ 正则表达式中提取搜索？ （不是关于正则表达式的问题，而是#include <regex>）
- Python FastAPI 删除 405 方法不允许错误
- Excel VBA：返回一系列数据的自定义函数
- Wordpress：终极会员表单中的自定义下拉字段
- 如何在使用 React Material ui 对话框时防止重新渲染
- 使用 selenium C# 在 <p> 标签中输入文本
- 尝试运行文件时启动错误的IDE
- 如何使用 Railway.app 在 CLI 中运行命令
© www.soinside.com 2019 - 2024. All rights reserved.