bootstrap3-datepicker and jquery.form.js
bootstrap3-datepicker 和 jquery.form.js
这两个控件又起来都比较简单,就一起介绍了。
先说datepicker。 github上的地址是:https://github.com/eternicode/bootstrap-datepicker。
效果如下:
在bundle里面引用添加js 和 css的引用。
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/datepicker3.css"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/bootstrap-datepicker.js", "~/Scripts/bootstrap-datepicker.zh-CN.js"/*中文语言包*/ ));
然后是html页面代码,很简单,一个标签即可:
<input type="text" class="datepicker" placeholder="请选择日期" />
然后是写js格式化:
<script type="text/javascript">
$(function () {
$(".datepicker").datepicker({
language: "zh-CN",
autoclose: true,//选中之后自动隐藏日期选择框
clearBtn: true,//清除按钮
todayBtn: true,//今日按钮
format: "yyyy-mm-dd"//日期格式,详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
});
});
</script>
如此,基本的功能就实现了,比较容易。
datepicker有一系列的方法,比如获取/设置日期,基本的格式是:
$('.datepicker').datepicker('method', arg1, arg2);
比如获取当前日期:
$(".datepicker").datepicker("getDate").toLocaleString();//获取
$(".datepicker").datepicker("setDate", '2014-01-25');//设置
这个datepicker有个比较实用的功能,很多情况下我们给客户选择的是一个时间段,所有要求开始时间必须小于结束时间,这个功能datepicker已经帮我们实现了。
添加如下html标签:
<div class="input-group input-medium date-picker input-daterange" data-date-format="yyyy-mm-dd">
<input name="dtBegin" class="form-control" style="font-size: 13px;" type="text" value="">
<span class="input-group-addon">到</span>
<input name="dtEnd" class="form-control" style="font-size: 13px;" type="text" value="">
</div>
两个input放在一个div中,格式相关的可以在div中设置,不需要后面每个重新设置。
执行如下js:
$(".date-picker").datepicker({
language: "zh-CN",
autoclose: true
});
效果如下:
当客户选择了开始时间比结束时间要大,结束时间自动变成开始时间。
datepicker介绍完毕。
下面介绍jquery.form.js
github项目地址:http://jquery.malsup.com/form/
园中能搜到很多文章,外加现在mvc中的Ajax.BeginForm() 也都实现相关的异步表单的功能。但是异步文件上传这功能还是挺不错的,外加进度条显示,在前段时间公司项目中感觉挺实用的。
<form method="post" action="@Url.Action("ReceiveFile", new {controller = "Home" })" enctype="multipart/form-data">
<input type="file" name="file1" />
</form>
定义form标签的时候要注意enctype="mutipart/form-data"。
<script type="text/javascript">
$(function () {
$("[name=file1]").change(function () {//文件改变的时候触发异步提交表单事件。
$(this).parents("form").ajaxSubmit({
uploadProgress: function (event,position,total,percent) {
//percent就是百分比了
console.log(percent);
}
});
});
});
</script>
随笔分类 - 页面插件
bootstrap3-datepicker and jquery.form.js的更多相关文章
- jquery.form.js实现异步上传
前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...
- jquery.form.js不能解决连接超时(timeout)的解决方法
最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限 ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问
利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...
- jquery.form.js表单插件的使用
jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...
- 异步上传图片,光用jquery不行,得用jquery.form.js插件
异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...
- jQuery.form.js jQuery ajax异步提交form
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...
- jQuery.form.js使用
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址 百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yu ...
- jquery.form.js详细讲解
现在大家在在表单提交的时候都不流行中间页面做跳转(比如发布成功的提示页面),或者说这样做会降低用户体验.所以一般都是采用ajax来提交,能看到这个页面的朋友,想必对ajax提交表单已经是很熟悉了. 如 ...
随机推荐
- 4.4、Libgdx用法查询执行环境相关性
(原版的:http://www.libgdx.cn/topic/46/4-4-libgdx%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%9F%A5%E8%AF%A2% ...
- 彩色图像--色彩空间 YIQ 、YUV 、YCbCr 、YC1C2 和I1I2I3
学习DIP文章64天 转载请注明文章出处:http://blog.csdn.net/tonyshengtan .出于尊重文章作者的劳动,转载请标明出处.文章代码已托管,欢迎共同开发:https://g ...
- leetcode 名单 Insertion Sort List
Insertion Sort List Total Accepted: 24444 Total Submissions: 96639My Submissions Sort a linked list ...
- iOS6和iOS7适应代码(6) —— NSLocalizedString
我们的应用程序都需要国际化,字符串的重要组成部分.一般来说.我们是通过一个string资源文件来达到这个目的,我们需要支持多国语言,有多少次把这个文档本地化.需要使用的代码NSLocalizedStr ...
- 在Jenkins中配置运行远程shell命令
用过Jenkins的都知道,在Build配置那里有一个Add buld step, 有这样两个选项: 1. Execute Windows batch command 2. Execute shell ...
- Android Intent机制与常见的用法
Activity Android于.Activity所有的程序都是必不可少,程都执行在Activity之中.Activity具有自己的生命周期(见http://www.cnblogs.com/feis ...
- CSDN Androidclient开展(两):基于如何详细解释Java使用Jsoup爬行动物HTML数据
文章引用鸿扬大大的链接具体介绍怎样使用Jsoup包抓取HTML数据,是一个纯javaproject,并将其打包成jar包.希望了解怎样用java语言爬虫网页的能够看下. 杂家前文就又介绍用HTTP訪问 ...
- WebApi统一输出接口
public class WebApi { /// <summary> /// 成功后的输出 /// </summary> /// <param name="d ...
- CSharp设计模式读书笔记(10):装饰模式(学习难度:★★★☆☆,使用频率:★★★☆☆)
装饰模式(Decorator Pattern): 动态地给一个对象增加一些额外的职责,就增加对象功能来说,装饰模式比生成子类实现更为灵活. 模式角色与结构: 示例代码: using System; u ...
- swift 注意事项 (十六) —— 可选链
可选链(Optional Chaining) 我们都知道"可选型"是什么.那么可选链又是什么,举个样例解释一下: struct MyName{ var name } st ...