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 和 jquery.form.js

摘要: 这两个控件又起来都比较简单，就一起介绍了。先说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 配套bootstrap样式使用小结（2） ajax篇

摘要: 距离上一篇有点时间了，周末做了伴郎参加了一个土豪同学的婚礼。上一篇是介绍一下基本的用法，基本的原理是取出所有的数据，然后调用$.datatables(option)方法格式化，这种方法显然不太科学，所以ajax方式是必须的。首先上个效果图。js和css引用方面依旧没有变化，详见上篇。Html页面:@...阅读全文

posted @ 2014-12-22 21:18 Sheldon_Lou 阅读(29) | 评论 (0) 编辑

 

Bootstrap-3-Typeahead

摘要: 是Bootstrap-3-Typeahead，不是Twitter open source的typeahead，两者用法有差异。外加如果配合原生的Bootstrap3 的话推荐还是用这个。（当然Twitter open source也有个bootstrap）。感觉这个简单功能够用了。现在公司的项目中后...阅读全文

posted @ 2014-12-15 22:49 Sheldon_Lou 阅读(840) | 评论 (3) 编辑

分类: 页面插件

标签: bootstrap 插件