AngularJs中Bootstrap3 datetimepicker使用实例


Posted in Javascript onDecember 13, 2016

关于datetimepicker的使用,参考:https://3water.com/article/99896.htm

在AngularJs中使用实例:

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标记--> 
 <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>结果:{{dateOne}}</p> 
 </div> 
 <div class='col-sm-6'> 
 <div class="form-group"> 
 <label>选择日期+时间:</label> 
 <!--指定 date标记--> 
 <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>结果:{{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(); 
 }); 
});

效果图:

AngularJs中Bootstrap3 datetimepicker使用实例

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
vue实力踩坑之push当前页无效
Apr 10 Vue.js
JS声明式函数与赋值式函数实例分析
Dec 13 #Javascript
jQuery内存泄露解决办法
Dec 13 #Javascript
Angular 常用指令实例总结整理
Dec 13 #Javascript
jQuery UI制作选项卡(tabs)
Dec 13 #Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 #Javascript
javascript动画系列之模拟滚动条
Dec 13 #Javascript
js闭包用法实例详解
Dec 13 #Javascript
You might like
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python图像处理之镜像实现方法
2015/05/30 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python安装requests库的实例代码
2019/06/25 Python
python实现列表的排序方法分享
2019/07/01 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
Python验证码截取识别代码实例
2020/05/16 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
护士辞职信范文
2014/01/19 职场文书
军训感想500字
2014/02/20 职场文书
高考标语大全
2014/06/05 职场文书
红与黑读书笔记
2015/06/29 职场文书
女性健康讲座主持词
2015/07/04 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技
服务器nginx权限被拒绝解决案例
2022/09/23 Servers