jQuery UI的datepicker()与变更格式

继续MVC应用程序的练习,刚刚练习了jQuery的UI中的datepicker()的方法,它是为了让用户能在文本框中快捷输入日期。

代码简洁与简单。

打开以前练习的一个视图Views\Home\Index.cxhtml:
添加一个input html tag,它的type为text:

然后在视图的head节点内,引用jQuery的UI,怎样引用,可以参考:《MVC程序实现Autocomplete功能http://www.cnblogs.com/insus/p/3546255.html 文中有介绍到在MVC应用程序中安装jQuery的UI库与样式的。

在你的视图相对应位置,引用与编写上面3个部位代码,即完成。
最后来看看运行的效果:

效果看到了,它的显示格式为默认格式为“月/日/年”,我们是否可以改变其显示格式呢?如果你想改变其格式,肯定是没有问题。为了更好演示,你可能得先参考一下这篇《MVC应用程序,动态创建单选列表(RadioButtonList)http://www.cnblogs.com/insus/p/3551348.html 。
但我们还得写一些jQuery代码,也就是说,用户点击Radio Button List选项时,它能改变文本框的日期显示格式。两个过程,一是为radio单选列表添加change事件,二是为datepicker()方法添加option:

实时操作演示:

jQuery UI的datepicker()与变更格式

时间: 2024-10-19 10:07:06

jQuery UI的datepicker()与变更格式的相关文章

5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记

最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下.希望读者不要在遇到和我一样的问题. 1 datepicker.不知道怎么自己下载的bootcss里面没找到datepicker,于是就选了Jquery UI的datepicker.使用的时候要注意两个问题. 如果页面上多个input ,并且id都是input1,那么在页面载入完成的时候调用$('#input1').datepicker(option),得到的结果是只有第一个成功格式化成datep

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表.代码示例如下: <script src="js/jquery-1.7.1.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" type=&qu

浅析jquery ui的datepicker组件

今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个简易日历:其有详细的说明文档和参考资料:可扩展性强,而且支持定制化界面. 首先是依赖文件的引入.可以使用在线资源,也可以通过bower下载到本地.我是下载到了一个public文件夹下,所以在代码开始时候,添加标签: <link rel="stylesheet" href="

Jquery UI的datepicker插件使用

原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有的优势. 近期对UI中的datepicker插件学习了一下,这款日期选择/日历显示插件非常好用.废话不多说,先来张图.看看效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/

Jquery UI的datepicker插件使用方法

原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的优势.最近对UI中的datepicker插件学习了一下,这款日期选择/日历显示插件很好用.废话不多说,先来张图,看看效果: <span style="font-size:18px;"><!DOCTYPE> <html> <head> <

Adding a Timepicker to jQuery UI Datepicker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

jquery UI datepicker汉化

由于近期工作需要,jquery ui的datepicker需要汉化,特此把代码贴在这$(function() { $.datepicker.regional["zh-CN"] = { closeText: "关闭", prevText: "<上月", nextText: "下月>", currentText: "今天", monthNames: ["一月", "二月

[转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4

本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4 This tutorial will teach you the basics of how

jQuery UI部件

(一)按钮 button()方法回修改单个按钮来增强外观,而buttonset()方法对一组按钮起作用. button(options)   button('enable')   button('disable')   button('destroy')   button('option', optionName, value) buttonset同上 $('').button({}); icons 指定一个或来那个在按钮显示的图标,主要图标由对象的primary属性标识,次要图标由second