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. boostrap-非常好用但是容易让人忽略的地方------input-group-btn

    1.正常的使用 <div class="form-group"> <div class="input-group"> <input ...

  2. cocos2d-x使用CCClippingNode实现跑马灯

    直接在代码,这是一个很好的包layer,可以直接调用  //原来白白 bool TestLayer::init() { CCSize size = CCDirector::sharedDirector ...

  3. cocos2dX 音乐和声音效果

    今天, 我们学习cocos2dX里面音乐和音效, 为什么学他呢, 难道你喜欢看无声电影( 旁白: 我就喜欢关着声音玩), 我们不要管旁白了, 她是个疯子 老规矩, 资源准备好: 一首<故宫神思& ...

  4. 大话设计模式C++实现-文章7章-代理模式

    一个.UML画画 二.概念 代理模式:为其它对象提供一种代理以控制对这个对象的訪问. 三.应用场景 (1)远程代理.也就是为一个对象在不同的地址空间提供局部代表.这样能够隐藏一个对象存在于不同地址空间 ...

  5. POJ 2777 Count Color(段树)

    职务地址:id=2777">POJ 2777 我去.. 延迟标记写错了.标记到了叶子节点上.. . . 这根本就没延迟嘛.. .怪不得一直TLE... 这题就是利用二进制来标记颜色的种 ...

  6. 汉高澳大利亚sinox2014电影播放flash最好的办法是安装游戏windows文本firefox

    事实上,韩澳sinox本身是没有原生flashplayer,无论怎么捣鼓,它们是从adobe弄linux要么windows版本号flashplayer,它不停地拨弄linux版本号flashplaye ...

  7. Unity3D流行的游戏开发人员构建高速检查站系统

    好友,大家好,欢迎关注我的博客.我是秦培,我的博客地址blog.csdn.net/qinyuanpei. 今天,我想分享的是,现在在移动平台上的检查点系统更受欢迎,机游戏如<愤慨的小鸟>. ...

  8. C++ Regsvr32订购具体解释

    一.Regsvr32命令 Regsvr 32命令是Windows在控制文件(如延长DLL.OCX.CPL文件)注册和反注册工具. 命令格公式:Regsvr32 [/s] [/n] [/i[:cmdli ...

  9. HDU-4862-Jump

    比今年第二个问题,第一个田间学校更多.在游戏中可以做不做,卡在K一旦有.阅读解决一个问题后,才做.内置图所示k这的确是很聪明倍. 代码: #include<cstdio> #include ...

  10. ABP入门教程

    ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...