Bootstrap的Datepicker選擇日期後調用方法

 

這裏是lvy博主寫的博客：http://10305101ivy.blog.163.com/blog/static/5847658920135434648580/

API調用網上一大把，我就不介紹了，大家自己百度。但是一定要注意他們的不同用法

這裏主要講的是區別：

一、Bootstrap的Datepicker：

2013年Bootstrap火了，之後推出了許多使用插件，其中包括bootstrap的datepicker

 

Github開源地址：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",          
        }).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.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>