bootstrap的datepicker在选择日期后调用某个方法

首先感谢网易LOFTER博主Ivy的博客，我才顿悟了问题所在，希望给后面用这几款插件的童鞋一个提醒，别犯和我同样的错误！这里是lvy博主写的博客：http://10305101ivy.blog.163.com/blog/static/5847658920135434648580/API调用网上一大把，我就不介绍了，大家自己百度。但是一定要注意他们的不同用法这里主要讲的是区别：一、bootstrap的datepicker：2013年bootstrap火了，之后推出了许多使用插件，其中包括bootstrap的datepickerGithub开源地址：https://github.com/eternicode/bootstrap-datepicker在线文档：http://bootstrap-datepicker.readthedocs.org/en/latest/二、datetimepicker：此项目是bootstrap-datetimepicker 项目 的一个分支，原项目不支持 Time 选择。其它部分也进行了改进、增强，例如load 过程增加了对ISO-8601 日期格式的支持。具体的大家可以看看这儿http://www.bootcss.com/p/bootstrap-datetimepicker/三、jQuery的datepicker：jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。官方地址：http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos/datepicker/。一个不错的地址，用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/我之前用到了bootstrap的datepicker然后我使用了jquery的datepicker的调用方法，把两者混淆了。$('#job-calendar').datepicker({            dateFormat: "yyyy-mm-dd",            language: "zh-CN",            onSelect: gotoDate        });function gotoDate(ev){            window.location.href = "XXXX.html" + "?Date=" + ev.date.getFullYear().toString() + "-"+ (ev.date.getMonth()+1).toString()+ "-"+ ev.date.getDate().toString();        }得不到我要的选择日期，页面跳转的效果。以为是版本的问题，更换最新版本后还是不行。后来才发现有两款datepicker插件。以下是bootstrap的datepicker的api调用方法。$('#job-calendar').datepicker({            dateFormat: "yyyy-mm-dd",            language: "zh-CN",            onSelect: gotoDate        }).on('changeDate',gotoDate);主要是想让大家注意的是，看清楚自己用的是哪个插件，去找对应的api，一些细微的差别真够折腾好久的！下面介绍

bootstrap-datepicker的简单使用

先说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>

 上述使用转自：http://www.cnblogs.com/mymint/p/4512463.html