当前位置:首页 > 日记 > 正文

对jQueryUIdatepicker时间控制使用(finalplate)

对jQueryUIdatepicker时间控制使用(finalplate)
在不久的将来,我们使用日期控件,感觉不错,写下来与大家分享,我限制开始时间和结束时间跨度不超过三天,并配置清晰的时间,重新选择时间等功能。

让我们先给你们看两张照片。
在示例中,我的控件的开始时间和结束时间为三天,即开始时间和结束时间的跨度不超过三天。

如何实现它,代码会有很详细的说明,请继续往下看:

第一步是介绍js控制,其中有两种,一是jquery.js,另jquery-ui-datepicker.js,和,当然,风格文件的介绍:

第二步:创建一个文本输入框,输入文本类型,我的演示还写下清晰的时间设置,即按钮响应事件。
开始时间:
要求*
结束时间:
要求*
价值不需要控制。我在项目中写了代码。值是为了在查询后刷新页面而编写的,时间框中的时间值仍然可以被选中。

下面的代码是调用日期控件,代码如下所示:
$(函数(){())
对象访问控制
日期= $(var#开始,#端);
期权;
设置目标时间,因为开始时间和结束时间例如有一个时间限制
无功targetdate;
Var optionEnd;
无功targetdateend;
Dates.datepicker({
showbuttonpanel:假,
当选择时间/触发此事件时
onselect:功能(SelectedDate){
如果(this.id = =开始){
如果选择是开始时间
选择=mindate ;
的 / / gettimebydatestr代码,将张贴在下面,就是处理时间的代码。
无功selectedtime = gettimebydatestr(SelectedDate);
var = selectedtime圣航;
targetdate =新的日期(圣航);
设置时间的结束
optionend =maxdate ;
targetdateend =新的日期(圣航+ 2 * 24 * 60 * 60 * 1000);
其他{ }
如果选择是时间的尽头
选择=maxdate ;
无功selectedtime = gettimebydatestr(SelectedDate);
VaR最大时限= selectedtime;
targetdate =新的日期(最大时限);
设置开始时间
optionend =mindate ;
targetdateend =新的日期(maxtime-2 * 24 * 60 * 60 * 1000);

}
时间 / /设置时间框架,根据最后期限的开始时间,例如不可选项,dates.not(这)是使用JS选择器,
/ / 选项 DatePicker(
Dates.not(本)。Datepicker(选项
Dates.not(本)。Datepicker(选项
}
});
});

下面的代码在上面的代码gettimebydatestr(XXX)方法附代码,大家可以看的方便,本代码是很简单的,我相信每个人都会明白的:
根据时间/日期字符串
功能gettimebydatestr(中){
VaR年= parseInt(datestr.substring(0,4));
VaR月= parseInt(datestr.substring(5,7),10 - 1);
var = parseInt(datestr.substring(8,10),10);
返回日期(年,月,日)GetTime();
}

现在你可以用代码实现的日期控件,和开始时间和结束时间限制在三天之内,例如,您选择的2014-03-27开始时间,所以最后的时间仅为27, 28, 29天和三天的休息日不可选,点击,如果你选择28年底的时间,所以现在只能选择28, 27, 26,等。

第三步:你看看空按钮,清除按钮是值的清除时间选择框,这个实现很简单:
空日历控件
功能cleaprevinput(对象){
清除输入框值,但仅为空值,选择时间限制控件。
$(obj)。Prev(),瓦迩();
如果开始时间和结束时间是空的,那么没有时间限制应该是您选择的框架,这意味着您可以选择日期。
如果(美元。Val)(#开始)(= =$(' #(结束)。瓦尔)= ={)
日期= $(var#开始,#端);
叫Datepicker / API的封装,开始时间和结束时间,只是集是空的,所以你可以选择任何日期。
Dates.datepicker(选项
Dates.datepicker(选项
}
}
现在你可以使用,如果控件的使用,不需要设置时间限制是非常简单的,上面的代码可以用于大多数的日期选择需要使用的,但如果有特殊情况,还需检查自己的API,我独自一人为了明确控制值的日期,这是代码:dates.datepicker(选项

以上是关于jQuery UI datepicker时间控制内容简介。我们临时画了一个句号。以后还会有相关文章。我会第一次和你分享。

相关文章

AdobeFireworksCS6软件不能及时的

AdobeFireworksCS6软件不能及时的

内部错误,电脑软件,Adobe Fireworks CS6软件无法摆脱内部错误的提示。最近,当打开烟花CS6,有问题。打开时,总是提示内部错误,无法关闭。我该怎么办下面分享解决方案,有需要的朋友可以参考下。 该软件已经打开,提示内部错误;并已关闭,在以后遇到这种…

允诺异步问题的详细解释

允诺异步问题的详细解释

解释,异步,详细,电脑软件,到目前为止,每个Javascript开发者和他们的祖母有过承诺。如果你没有,那么你会承诺的概念是由在承诺CommonJS组成员提出 /规范。承诺逐渐作为一种方法来管理异步运行回调,但他们的设计,他们远比这更有用。事实上,因为他们的许…

在Word2007域结果自动更新教程Word

在Word2007域结果自动更新教程Word

教程,自动更新,快速,电脑软件,总之,你可以做一些简单的数据计算。以Word2007为例,只要你切换到布局选项卡,单击扩大数据命令组公式按钮,并选择相应的功能命令。 使用此功能来提高工作效率,但如果你忘了带翅膀的老虎补充更新,但它也将拖累,这是因…

利用PowerPoint制作竞赛计时器PPT

利用PowerPoint制作竞赛计时器PPT

计时器,课程,电脑软件,PowerPoint,PPT,让我详细描述一下生产过程。 输入标题 打开PowerPoint 2003,选择空演示文稿;;格式为只有标题在标题文本框中输入英语口语比赛计时系统;字体设置为增厚因为我们玩滑梯,我们需要使用简单的宏命令,所以我们也…

Word2010界面介绍Word2010教程

Word2010界面介绍Word2010教程

教程,界面,电脑软件,Word2010界面介绍 下面是2010版Office Word接口介绍的讲解。 1。标题栏:正在编辑的文档的文件名和所使用软件的名称。 2、文件选项卡:基本命令(如新建、打开、关闭、保存为…Rdquo,打印在这里。 三.快速访问工具栏:常见命令…

布局设计中的四条原则

布局设计中的四条原则

布局,四条,原则,电脑软件,本教程是向朋友介绍布局和布局设计中的四个布局原则。本教程是比较基础的,对初学设计的朋友很有帮助。我建议像你这样的朋友可以和教程一起学习。 本文详细介绍了布局布局中的四种排列原则,这是实用的。 本教程…

UI设计者必须知道:在线图表和详细的

UI设计者必须知道:在线图表和详细的

图表,在线,设计者,详细,电脑软件,UI设计师往往画上美丽的框架、原型、视觉稿,超级棒的,惊人的。今天,设计师为你精心制作的接线图和设计问题的小编辑,可以来学习哦 背景:两年或三年前,我发现了很多信息技术的朋友(非设计师)设计使用上面列出的词。…

如何打开excel文档的excel库

如何打开excel文档的excel库

文档,电脑软件,excel,Excel经常使用Office中的软件,在启动Excel之后,它通常需要打开一个Excel文档。一般来说,您可以使用以下两种方式。 1、启动Excel,创建空白文档,打开文件选项卡,选择,,打开,选择中,选择打开,在列表中,计算机选项,点击鼠标,右侧的浏览…

在Word中使用技术、文字插入GIF动

在Word中使用技术、文字插入GIF动

动画,方法,文字,技术,电脑软件,相信大家都喜欢用文字来渲染画面,以增强视觉效果。然后问题就来了。如何插入GIF动画的字,你怎么教萧边晓边,希望萧边能对你有用。 1、首先百度AniGIF.ocx很容易找到这个小文件,下载文件。 2,将此文件复制到C: Win…

解释接收阵列形式通过Struts2中Aja

解释接收阵列形式通过Struts2中Aja

阵列,方法,解释,两种,形式,使用struts2的形式来传递值,非常灵活方便,通过一个或一个对象的所有属性。但我们应该做些什么如果我们需要传递一个数组并希望Struts正确收到了吗 下面我将从两种方式来解释它:普通表单和ajax。 student.java 学生…

如何处理Javascript多并发问题

如何处理Javascript多并发问题

并发,如何处理,电脑软件,Javascript,编写代码时,常常会遇到这样的场景:在初始化页面时显示加载页面,并启动多个Ajax并发请求来获取数据。当每个Ajax请求返回时,结束加载。 例如,一个订单页面,用于查询公共地址信息、商品信息、城市信息……这些请…

PS图象处理软件创造了一个美丽的秋

PS图象处理软件创造了一个美丽的秋

水景,图象,一个美丽,处理软件,秋天,今天,小编辑教你如何用PS来创造一个绚丽的秋天暖色效果。效果非常漂亮,你喜欢的朋友可以一起学习。 图像以绿色为主,直接以主色为秋天的橙色;然后黑暗暗淡而增加蓝色;给一些局部渲染高光的图片,可以增加感官层…