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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
JS定时关闭窗口的实例
May 22 Javascript
js获取和设置属性的方法
Feb 20 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Linux下Python获取IP地址的代码
2014/11/30 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
详解Python中where()函数的用法
2018/03/27 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
python集合是否可变总结
2019/06/20 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
《穷人》教学反思
2014/04/08 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
房产协议书范本2014
2014/09/30 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python