jquery.datetimepicker控件不弹出的问题

作者 : admin 本文共1199个字,预计阅读时间需要3分钟 发布时间: 2024-06-10 共2人阅读

项目场景:

jquery.datetimepicker控件不弹出的问题插图CRM项目,在项目中涉及日期类输入框,打算采用平常见到的点击选择日期的方式。在浏览了网页后,目前比较好的解决方案是jquery.datetimepicker和flatpicker两种,flatpicker的缺点是官网是英文版的,而jquery.datetimepicker有官方中文文档,所以果断选择jquery.datetimepicker来做功能实现。


问题描述

根据官方文档,该控件的使用是非常的简单的,在引入了相关的css和js文件后,只需要一句js语句就可以实现功能,首先,根据文件的位置引入css和js。

<link href="/crm-core/css/jquery_datetimepicker/jquery.datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
<script type="text/javascript" src="/crm-core/js/jquery_datetimepicker/jquery.datetimepicker.full.min.js"></script>

根据官方文档,只需要在中间写一句代码即可实现功能。

官方实例:

<input id="datetimepicker" type="text" >
<script>
	$('#datetimepicker').datetimepicker();//初始化
	$.datetimepicker.setLocale('zh');//使用中文
</script>

但是在我的项目中并没有产生预期效果,点击输入框并没有弹出日期选择框,也没有任何报错。


原因分析:

  1. 首先,确保引入的文件路径填写无误,拼写准确;
  2. 确保input标签的id属性与选择器中的一致;
  3. 标签中不可以直接写JavaScript语句,需要一个入口函数才能是语句正确执行,所以需要把那一句JavaScript语句放在入口函数中。

解决方案:

将datetimepicker相关语句放在入口函数中,即可解决问题。

<script type="text/javascript">
		// datetimepicker控件设置
	$(function(){
		//使用中文模式
		$.datetimepicker.setLocale('zh');
	    $(".date-picker").datetimepicker({
	    	timepicker:false,
	    	format:'Y-m-d',
	    	// 设置日期只能在今日之后
	    	minDate:0,
	    });
	});
</script>
<input id="query_startTime" type="text" class="date-picker" />
本站无任何商业行为
个人在线分享 » jquery.datetimepicker控件不弹出的问题
E-->