AngularJs中Bootstrap3 datetimepicker使用實(shí)例
關(guān)于datetimepicker的使用,參考:http://chabaoo.cn/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)文章
前端圖片懶加載(lazyload)的實(shí)現(xiàn)方法(提高用戶體驗(yàn))
圖片懶加載又稱圖片延時(shí)加載、惰性加載,即在用戶需要使用圖片的時(shí)候加載,這樣可以減少請(qǐng)求,節(jié)省帶寬,提高頁(yè)面加載速度,相對(duì)的,也能減少服務(wù)器壓力,下面通過本文給大家分享圖片懶加載lazyload的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2017-08-08深入理解JavaScript系列(12) 變量對(duì)象(Variable Object)
JavaScript編程的時(shí)候總避免不了聲明函數(shù)和變量,以成功構(gòu)建我們的系統(tǒng),但是解釋器是如何并且在什么地方去查找這些函數(shù)和變量呢2012-01-01JavaScript中你不知道的數(shù)學(xué)方法分享(非常實(shí)用)
JavaScript的Math對(duì)象包含了一些非常有用和強(qiáng)大的數(shù)學(xué)操作,可以在Web開發(fā)中使用,本文為大家整理了一些非常實(shí)用的數(shù)學(xué)方法,希望對(duì)大家有所幫助2023-07-07淺談javascript中l(wèi)odash與lodash-es的區(qū)別
本文主要介紹了javascript中l(wèi)odash與lodash-es的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10分享javascript計(jì)算時(shí)間差的示例代碼
這篇文章主要為大家介紹了javascript計(jì)算時(shí)間差的示例代碼,,一般來說都是計(jì)算當(dāng)前時(shí)間和一個(gè)指定時(shí)間點(diǎn)之間的差距,感興趣的小伙伴們可以參考一下2016-01-01BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù)
這篇文章主要介紹了BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù),需要的朋友可以參考下2015-02-02BootStrap select2 動(dòng)態(tài)改變值的方法
這篇文章主要介紹了BootStrap select2 動(dòng)態(tài)改變值的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02