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>