首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jquery datepicker -将datepicker放在文本字段下

jquery datepicker -将datepicker放在文本字段下
EN

Stack Overflow用户
提问于 2015-12-15 06:09:12
回答 2查看 948关注 0票数 1

我有一个考试日期字段,如下图所示:

我的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js">    </script>
<script type="text/javascript">
$(function(){
    $("#datepicker1").datepicker({dateFormat: 'dd-mm-yy'});
});
</script>
<style>
.ui-datepicker{
    font-size: 9.5pt;
}

.ui-widget-header{
    font-size: 12px;
    color: #102132;
    background: #D7E5F2;
}

#ui-datepicker-div .ui-state-highlight{
    background: yellow;
    color: red;
    font-weight: bold;
}

.ui-datepicker-current-day .ui-state-active{
    background: white;
    color: blue;
    font-weight: bold;
}
</style>
</head>

<body>
<input type="text" name="examdate" id="datepicker1" /> 
</body>
</html>

现在我的问题是,当我单击文本字段时,我希望日期选择器位于文本字段下。该怎么修改呢?

EN

回答 2

Stack Overflow用户

发布于 2015-12-15 06:56:04

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function(){
   	$("#datepicker1").datepicker({
	dateFormat: 'mm/dd/yy',
	beforeShow: function (input, inst) {
		var rect = input.getBoundingClientRect();
		setTimeout(function () {
			inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
		}, 0);
	}
});

});
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
.ui-datepicker{
    font-size: 9.5pt;
}

.ui-widget-header{
    font-size: 12px;
    color: #102132;
    background: #D7E5F2;
}

#ui-datepicker-div .ui-state-highlight{
    background: yellow;
    color: red;
    font-weight: bold;
}

.ui-datepicker-current-day .ui-state-active{
    background: white;
    color: blue;
    font-weight: bold;
}
</style>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script>

<input type="text" name="examdate" id="datepicker1" />

票数 2
EN

Stack Overflow用户

发布于 2015-12-15 07:10:11

JQuery datepicker自动调整UI Ca lender,我们不需要管理它。如果文本框上方有适当间距,则会显示默认设置。

如果它没有适当的空间,那么它将自动显示在文本字段下。如你所愿。

只需向下滚动并单击文本字段即可。它会在你想看的地方显示出来。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34282206

复制
相关文章
jQuery Datepicker 日期插件
Datepicker日期选择插件是一个配置灵活的插件,可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
阳光岛主
2019/02/19
3.1K0
jQuery Datepicker 日期插件
jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件。jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要。本文就主要讨论jQuery UI Datepicker的使用,和中文本地化配置。 1.jQuery UI介绍 jQuery UI是一套基于jQuery控件和动画效果Javascript类库。可以用来构建交互式的互联网应用程序。最新版本1.10.4.基于jQuery 1.6+ jQuery UI官方网站 2.jQuery
八哥
2018/01/18
1.9K0
jQuery UI Datepicker使用介绍
jQuery ui datepicker 日历转中文
做个笔记,以后详解 jQuery(function($){ $.datepicker.regional['zh-CN'] = { closeText: '关闭', prevText: '<上月', nextText: '下月>', currentText: '今天', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九
deepcc
2018/05/16
1.1K0
bootstrap datepicker日期插件汉化
bootstrap datepicker是一款不错的日期插件,而且在国际化方面也有不错的支持,当然也支持简体中文了,我们只需要引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下:
johnhuster的分享
2022/03/29
1.1K0
Datepicker日期选择器插件
这个插件还是比较简单的,而且样式也比较漂亮,可以自定义选择年月日、年月日时分、年月、时间段选择等等。
从入门到进错门
2018/08/21
3.9K0
Datepicker日期选择器插件
5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记
  最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下。希望读者不要在遇到和我一样的问题。
_淡定_
2018/08/24
9030
利用jquery ui的datepicker开发一个课程日历
    这两天在开发某商学院的网站,里面有涉及到课程的模块,客户希望在网站的首页显示一个日历,在有课程的日期加上显眼的标识,使网站用户一眼看到日历后就能知道哪天商学院有课程以便他们安排时间报名修读。
风柏杨4711
2021/03/15
2K0
datepicker设置插件显示位置
我们可以通过datepicker的option选项来控制该插件的一些属性,比如本文要说的显示位置:
johnhuster的分享
2022/03/28
1.7K0
datepicker设置插件显示位置
bootstrap-datepicker日期范围
实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制,
DencyCheng
2018/11/05
2.3K0
时间选择(DatePicker和TimePicker)使用
Android中日期选择控件-DatePicker的使用 android 开发 时间选择器TimePicker的使用
李小白是一只喵
2020/04/24
2.6K0
Angular 循环内使用 material datepicker
material datepicker 需要用到模板变量,如果需要在循环出来datepicker可以这么干
mafeifan
2019/02/25
1.8K0
datepicker小插件(日期时间 & 日期 & 月份)
一个简单的日期时间选择小插件,引用 jquery.js  & bootstrap.css (需要图标文件) 如果路过的 朋友只是为了 找一个 可以直接引入 项目的时间控件,那么我推荐 Date Range Picker A JavaScript component for choosing date ranges.  Designed to work with the Bootstrap CSS framework. 官方网址 : http://www.daterangepicker.com/ 在这里你可
lonelydawn
2018/02/09
8.3K0
datepicker小插件(日期时间 & 日期 & 月份)
Jquery(进阶一) 日期控件My97DatePicker的基本用法
My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 
Java架构师必看
2021/05/31
1.9K0
bootstrap-datepicker限定可选时间范围
实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制,
全栈程序员站长
2022/09/10
1.8K0
bootstrap-datepicker限定可选时间范围
自学鸿蒙应用开发(8)- DatePicker组件
如下面代码中21行和50行所示,在获取DatePicker组件后,一方面在button的动作响应中计算所选日期和当前日期的差值之后用小窗口表示出来;另一方面在用户操作DatePicker时将选择结果表示在TextFile组件上。
面向对象思考
2021/01/04
8940
自学鸿蒙应用开发(8)- DatePicker组件
datepicker 日期连续选择(需要改源码)
先上效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
deepcc
2018/05/16
1.6K0
My97DatePicker中的bug[_ is null] fixed
在使用My97DatePicker中发现一个bug:_ is null,把他的源代码美化一下(在线美化地址在我的“在线手册速查”中),发现作者里面有一个问题没有考虑到。
the5fire
2019/02/28
1.4K0
点击加载更多

相似问题

jquery UI datepicker将按钮放在字段之前

22

将jQuery DatePicker拆分为隐藏字段

11

jquery根据datepicker填充输入文本字段

19

如何将文本视图放在datepicker的顶部

10

jQuery DatePicker - DatePicker不是函数

24
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文