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,超强推荐base.js
Dec 23 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
PHP学习之整理字符串
2011/04/17 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python 文件处理注意事项总结
2017/04/10 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
利用Python计算KS的实例详解
2020/03/03 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
《最佳路径》教学反思
2014/04/13 职场文书
项目经理任命书内容
2014/06/06 职场文书
师范生求职自荐信
2014/06/14 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
安全检查汇报材料
2014/12/26 职场文书
毕业生自荐信范文
2015/03/05 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery