Bootstrap的Datepicker外掛程式的使用

2021-10-01 15:56:06 字數 2027 閱讀 4351

記錄一下自己在實際專案中使用datepicker外掛程式方法

給出datepicker官方文件位址,想知道更多引數資訊,可以檢視官方文件

這只是乙個日期選擇框,如果還需要時間資訊的話;

使用datetimepicker外掛程式就可以了。

先上效果圖:

下面只展示主要部分的**:

html部分:

class

="form-group"

id="datepicker"

>

for=

"recipient-adduserbirthday"

class

="col-form-label"

>

生日:label

>

class

='input-group date'

>

type

='text'

class

="form-control"

id="recipient-adduserbirthday"

v-model

="adduserbirthday"

placeholder

="請選擇出生年月日"

readonly

="true"

/>

class

="input-group-addon"

>

class

="glyphicon glyphicon-calendar"

>

span

>

span

>

div>

div>

js部分:

var today =

newdate()

;var year = today.

getfullyear()

;var minyear = year -

100;

var month = today.

getmonth()

+1;var day = today.

getdate()

;var todaystr = year +

"-"+ month+

"-"+ day;

var start = minyear +

"-"+ month+

"-"+ day;使用了mounted()勾子:

test()
);}指定勾子:

mounted()

,

新增按鈕add觸發下面的js:
var adddatepicker =$(

'#datepicker .input-group.date').

datepicker

('getdate');

var adddate = adddatepicker.

getfullyear()

+"-"

+ adddatepicker.

getmonth()

+"-"

+ adddatepicker.

getdate()

;//下面這個賦值是上面input的v-model的值

vm.adduserbirthday = adddate;

//完成新增操作後,進行更新datepicker裡面的值。如果需要清空賦予空物件

//$('#datepicker .input-group.date').datepicker('update', '');$(

'#datepicker .input-group.date').

datepicker

('update'

, todaystr)

;

簡單好用的時間選擇外掛程式My97datepicker

我們經常會需要驗證字串的格式,比如密碼長度範圍 電子郵件格式 固定 號碼和手機號碼格式等,這個時候我們經常會需要用到正規表示式。但是正規表示式用起來效能會低一點,所以在需要驗證的時候能不使用正規表示式還是盡量不要使用正規表示式。下面貼出來我寫的乙個驗證類,裡面包含了一些常用的驗證。這些都是服務端的驗...

基於bootstrap的mvcpager簡單分頁

然後匯入命名空間 using webdiyer.webcontrols.mvc 前提是要引用dll檔案 下面是源 控制器 public actionresult basic string id else return view list 檢視頁面 切記要匯入命名空間 using boostrap.m...

bootstrap的柵格系統

bootstrap的理解 1.bootstrap的柵格系統 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕或視口 viewport 尺寸的增加,系統會自動分為最多12列。1.1柵格系統的簡介 柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局。2...