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 相关文章推荐
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
js取模(求余数)隔行变色
May 15 Javascript
javascript基本类型详解
Nov 28 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
浅析javascript函数表达式
Feb 10 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP 简单日历实现代码
2009/10/28 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python 提取文件的小程序
2009/07/29 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python数据挖掘需要学的内容
2019/06/23 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
什么是python类属性
2020/06/10 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
车间统计员岗位职责
2014/01/05 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android