bootstrap的datepicker在选择⽇期后调⽤某个⽅法
2016-11-08 15:14 1311⼈阅读 (0)
⾸先感谢⽹易LOFTER博主Ivy的博客，我才顿悟了问题所在，希望给后⾯⽤这⼏款插件的童鞋⼀个提醒，别犯和我同样的错误！
这⾥是lvy博主写的博客：
API调⽤⽹上⼀⼤把，我就不介绍了，⼤家⾃⼰百度。但是⼀定要注意他们的不同⽤法
这⾥主要讲的是区别：
⼀、bootstrap的datepicker：
2013年bootstrap⽕了，之后推出了许多使⽤插件，其中包括bootstrap的datepicker
Github开源地址：
在线⽂档：
⼆、datetimepicker：
此项⽬是的⼀个分⽀，原项⽬不⽀持 Time 选择。
其它部分也进⾏了改进、增强，例如load 过程增加了对 ISO-8601 ⽇期格式的⽀持。
具体的⼤家可以看看这⼉
三、的datepicker：
UI很强⼤，其中的⽇期选择插件Datepicker是⼀个配置灵活的插件，我们可以⾃定义其展⽰⽅式，包括⽇期格式、语⾔、限制选择⽇期范围、添加相关按钮以及其它导航等。
官⽅地址：，官⽅⽰例：。
⼀个不错的地址，⽤来DIY jQuery UI界⾯效果的站点
我之前⽤到了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=" + FullYear().toString() + "-"+ (Month()+1).toString()+ "-"+ Date().toString();
}
得不到我要的选择⽇期，页⾯跳转的效果。以为是版本的问题，更换最新版本后还是不⾏。后来才发现有两款datepicker插件。
以下是bootstrap的datepicker的api调⽤⽅法。
$('#job-calendar').datepicker({
dateFormat: "yyyy-mm-dd",
language: "zh-CN",
onSelect: gotoDate
}).on('changeDate',gotoDate);
主要是想让⼤家注意的是，看清楚⾃⼰⽤的是哪个插件，去对应的api，⼀些细微的差别真够折腾好久的！
下⾯介绍
先说datepicker。 github上的地址是：。
在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"//⽇期格式，详见 /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" type="text" value="">
<span class="input-group-addon">到</span>
<input name="dtEnd" class="form-control" type="text" value="">
</div>
两个input放在⼀个div中，格式相关的可以在div中设置，不需要后⾯每个重新设置。
执⾏如下js：
$(".date-picker").datepicker({
language: "zh-CN",
autoclose: true
bootstrap项目});
效果如下：
当客户选择了开始时间⽐结束时间要⼤，结束时间⾃动变成开始时间。
datepicker介绍完毕。
下⾯介绍jquery.form.js
github项⽬地址：
园中能搜到很多⽂章，外加现在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>
上述使⽤转⾃：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。