bootstrap datepicker的簡單使用

先說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格式化：

如此，基本的功能就實現了，比較容易。

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();

效果如下：

當客戶選擇了開始時間比結束時間要大，結束時間自動變成開始時間。

datepicker介紹完畢。

下面介紹jquery.form.js

園中能搜到很多文章，外加現在mvc中的ajax.beginform() 也都實現相關的非同步表單的功能。但是非同步檔案上傳這功能還是挺不錯的，外加進度條顯示，在前段時間公司專案中感覺挺實用的。

<
form 
method
="post"
action
="@url.action("
receivefile", new )" enctype
="multipart/form-data"
>
<
input 
type
="file"
name
="file1"
/>
form
>

定義form標籤的時候要注意enctype="mutipart/form-data"。

UICollectionView的簡單使用

所屬controller要遵循三個協議 uicollectionviewdatasource,uicollectionviewdelegate,uicollectionviewdelegateflowlayout uicollectionviewflowlayout flowlayout uicol...

BGAQRCode Android的簡單使用

compile com.google.zxing core 3.2.1 xmlns android 這句是使用選擇器框架時用到的 xmlns tools package com.huaqiang.zxingdemo 選擇框架用到 android name android.permission.cam...

Android VideoView的簡單使用

mvideoview.setvideouri uri.parse android.resource getpackagename r.raw play 設定乙個控制器控制器預設在父布局的地步可以自己實現控制器布局 mvideoview.setmediacontroller new mediac...

bootstrap datepicker的簡單使用

UICollectionView的簡單使用

BGAQRCode Android的簡單使用

Android VideoView的簡單使用

相關推薦