AngularJs中Bootstrap3 datetimepicker使用實(shí)例
關(guān)于datetimepicker的使用,參考:http://www.dhdzp.com/article/99896.htm
在AngularJs中使用實(shí)例:
HTML代碼:
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label>選擇日期:</label>
<!--指定 date標(biāo)記-->
<div class='input-group date' datetimepicker id='datetimepicker1'>
<input type='text' class="form-control" ng-model="dateOne"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<p>結(jié)果:{{dateOne}}</p>
</div>
<div class='col-sm-6'>
<div class="form-group">
<label>選擇日期+時(shí)間:</label>
<!--指定 date標(biāo)記-->
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" ng-model="dateTwo" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<p>結(jié)果:{{dateTwo}}</p>
</div>
</div>
</div>
JS代碼:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
//在Controller中綁定選擇控件
var datepicker1 = $('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
}).on('dp.change', function (e) {
var result = new moment(e.date).format('YYYY-MM-DD');
$scope.dateOne = result;
$scope.$apply();
});
$('#datetimepicker2').datetimepicker({
format: 'YYYY年MM月DD日 hh:mm',
locale: moment.locale('zh-cn')
}).on('dp.change', function (e) {
var result = new moment(e.date).format('YYYY年MM月DD日 hh:mm');
$scope.dateTwo= result;
$scope.$apply();
});
});
效果圖:

如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript列表框listbox全選和反選的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript列表框listbox全選和反選的實(shí)現(xiàn)方法,涉及javascript操作列表框listbox的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
uni-app h5端在jenkins構(gòu)建報(bào)錯(cuò)解決
這篇文章主要為大家介紹了uni-app h5端在jenkins構(gòu)建報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
微信小程序?qū)崿F(xiàn)手機(jī)號(hào)碼驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)號(hào)碼驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
js實(shí)現(xiàn)樹形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例
這篇文章主要介紹了js實(shí)現(xiàn)樹形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JavaScript實(shí)現(xiàn)滑塊驗(yàn)證解鎖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑塊驗(yàn)證解鎖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
JavaScript常見事件對(duì)象與操作實(shí)例總結(jié)
這篇文章主要介紹了JavaScript常見事件對(duì)象與操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)DOM、IE及跨瀏覽器事件對(duì)象的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
微信小程序頁(yè)面跳轉(zhuǎn)功能之從列表的item項(xiàng)跳轉(zhuǎn)到下一個(gè)頁(yè)面的方法
這篇文章主要介紹了微信小程序頁(yè)面跳轉(zhuǎn)功能之從列表的item項(xiàng)跳轉(zhuǎn)到下一個(gè)頁(yè)面的方法,結(jié)合具體實(shí)例形式總結(jié)分析了微信小程序頁(yè)面跳轉(zhuǎn)及列表item項(xiàng)跳轉(zhuǎn)頁(yè)面的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11

