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>

随笔分类 - 页面插件

试验各种项目中用过的插件
摘要: 这两个控件又起来都比较简单,就一起介绍了。先说datepicker。 github上的地址是:https://github.com/eternicode/bootstrap-datepicker。效果如下:在bundle里面引用添加js 和 css的引用。bundles.Add(new StyleB...阅读全文
posted @ 2014-12-23 17:17 Sheldon_Lou 阅读(291) | 评论 (1) 编辑
 
摘要: 距离上一篇有点时间了,周末做了伴郎参加了一个土豪同学的婚礼。上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学,所以ajax方式是必须的。首先上个效果图。js和css引用方面依旧没有变化,详见上篇。Html页面:@...阅读全文
posted @ 2014-12-22 21:18 Sheldon_Lou 阅读(29) | 评论 (0) 编辑
 
摘要: 是Bootstrap-3-Typeahead,不是Twitter open source的typeahead,两者用法有差异。外加如果配合原生的Bootstrap3 的话推荐还是用这个。(当然Twitter open source也有个bootstrap)。感觉这个简单功能够用了。现在公司的项目中后...阅读全文
posted @ 2014-12-15 22:49 Sheldon_Lou 阅读(840) | 评论 (3) 编辑
分类: 页面插件

bootstrap3-datepicker and jquery.form.js的更多相关文章

  1. jquery.form.js实现异步上传

    前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...

  2. jquery.form.js不能解决连接超时(timeout)的解决方法

    最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限 ...

  3. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  4. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  5. jquery.form.js表单插件的使用

    jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...

  6. 异步上传图片,光用jquery不行,得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  7. jQuery.form.js jQuery ajax异步提交form

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...

  8. jQuery.form.js使用

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址 百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yu ...

  9. jquery.form.js详细讲解

    现在大家在在表单提交的时候都不流行中间页面做跳转(比如发布成功的提示页面),或者说这样做会降低用户体验.所以一般都是采用ajax来提交,能看到这个页面的朋友,想必对ajax提交表单已经是很熟悉了. 如 ...

随机推荐

  1. 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% ...

  2. 彩色图像--色彩空间 YIQ 、YUV 、YCbCr 、YC1C2 和I1I2I3

    学习DIP文章64天 转载请注明文章出处:http://blog.csdn.net/tonyshengtan .出于尊重文章作者的劳动,转载请标明出处.文章代码已托管,欢迎共同开发:https://g ...

  3. leetcode 名单 Insertion Sort List

    Insertion Sort List Total Accepted: 24444 Total Submissions: 96639My Submissions Sort a linked list ...

  4. iOS6和iOS7适应代码(6) —— NSLocalizedString

    我们的应用程序都需要国际化,字符串的重要组成部分.一般来说.我们是通过一个string资源文件来达到这个目的,我们需要支持多国语言,有多少次把这个文档本地化.需要使用的代码NSLocalizedStr ...

  5. 在Jenkins中配置运行远程shell命令

    用过Jenkins的都知道,在Build配置那里有一个Add buld step, 有这样两个选项: 1. Execute Windows batch command 2. Execute shell ...

  6. Android Intent机制与常见的用法

    Activity Android于.Activity所有的程序都是必不可少,程都执行在Activity之中.Activity具有自己的生命周期(见http://www.cnblogs.com/feis ...

  7. CSDN Androidclient开展(两):基于如何详细解释Java使用Jsoup爬行动物HTML数据

    文章引用鸿扬大大的链接具体介绍怎样使用Jsoup包抓取HTML数据,是一个纯javaproject,并将其打包成jar包.希望了解怎样用java语言爬虫网页的能够看下. 杂家前文就又介绍用HTTP訪问 ...

  8. WebApi统一输出接口

    public class WebApi { /// <summary> /// 成功后的输出 /// </summary> /// <param name="d ...

  9. CSharp设计模式读书笔记(10):装饰模式(学习难度:★★★☆☆,使用频率:★★★☆☆)

    装饰模式(Decorator Pattern): 动态地给一个对象增加一些额外的职责,就增加对象功能来说,装饰模式比生成子类实现更为灵活. 模式角色与结构: 示例代码: using System; u ...

  10. swift 注意事项 (十六) —— 可选链

    可选链(Optional Chaining) 我们都知道"可选型"是什么.那么可选链又是什么,举个样例解释一下: struct MyName{      var name } st ...