bootstrap-datepicker的简单使用
2015-05-18 17:26
204 查看
先说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.jsgithub项目地址: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>
相关文章推荐
- bootstrap-datepicker的简单使用
- bootstrap-datepicker的简单使用
- 基于Bootstrap使用jQuery实现简单可编辑表格
- bootstrap_fileinput 上传组件的简单使用
- select2 bootstrap 简单使用
- 使用Bootstrap编写一个简单的网页轮播图效果
- bootstrap-fileinput简单使用
- Bootstrap模态对话框的简单使用
- 使用mui和bootstrap实现简单的进度条
- 使用angularjs和bootstrap写一个简单的购物车
- 关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
- bootstrap-treeview简单使用
- bootstrap select2 使用简单介绍
- Android使用bootstrap简单介绍
- Bootstrap多选框数据保存,前后端json简单使用
- bootstrap datepicker 与modal使用 datepicker属性 方法 事件
- bootstrap 的自适应页面简单使用
- bootstrap-datepicker的基本使用
- 使用bootstrap简单制作Tab切换页
- 使用Bootstrap+metisMenu完成简单的后台管理界面