http://www.lovelucy.info/angularjs-best-practices.html

http://damoqiongqiu.iteye.com/blog/1917971

http://www.itnose.net/detail/6144038.html

https://github.com/shyamseshadri/angularjs-book

2015-10-23

研究几日后,找到答案:

<!DOCTYPE html>
<html lang="en" ng-app="ProductList">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Angularjs与bootstrap.datetimepicker结合实现日期选择器</title>
<link rel="stylesheet" href="../../assets/css/bootstrap.css" />
<link rel="stylesheet" href="../../assets/css/bootstrap-timepicker.css" type="text/css"></link>
</head> <body ng-controller="productListController">
<div class="widget-box" ng-repeat="edu in edus | filter:q as results"> <div class="form-group">
<input class="input-medium date-picker" datepicker readonly
id="id-date-picker-1" type="text" data-date-format="yyyy-mm-dd"
placeholder="" ng-model="edu.begindate" />
</div>
<button ng-click="saveEducation(edu);" >保存
</button>
<hr/>
</div>
<script src="../../assets/js/jquery.js"><!--basic样式-->
<script src="../../assets/js/bootstrap.js"></script><!--basic样式-->
<script src="../../assets/js/date-time/bootstrap-datepicker.js"></script><!-- 日期选择器必须 -->
<script src="../../frameworks/angular.min.js"></script>
<script>
var productListApp = angular.module('ProductList', []);
/*自定义指令datepicker,用于员工背景——教育经历、工作经历、家庭关系中日期数据修改时的双向绑定*/
productListApp.directive('datepicker', function() {
return {
restrict: 'A',
require: '?ngModel',
// This method needs to be defined and passed in from the
// passed in to the directive from the view controller
scope: {
select: '&' // Bind the select function we refer to the right scope
},
link: function(scope, element, attrs, ngModel) {
if (!ngModel) return;
var optionsObj = {};
console.log("directive~~~~~"+JSON.stringify( ngModel));
var updateModel = function(dateTxt) {
scope.$apply(function () {
// Call the internal AngularJS helper to
// update the two way binding
ngModel.$setViewValue(dateTxt);
});
console.log("after ngModel~~~~~"+JSON.stringify( ngModel));
}; optionsObj.onSelect = function(dateTxt, picker) {
updateModel(dateTxt);
if (scope.select) {
scope.$apply(function() {
scope.select({date: dateTxt});
});
}
}; ngModel.$render = function() {
// Use the AngularJS internal 'binding-specific' variable
element.datepicker('setDate', ngModel.$viewValue || '');
};
element.datepicker(optionsObj);
}
};
}); productListApp.controller('productListController', function($scope, $http) {
var id= 928;
//查看员工背景资料
/*$http({
method : 'POST',
url : '/omss/viewEmpBackgroudById?id='+id
}).success(function(data, status, headers, config) {
$scope.status = status;
if (data.length != 0) {
$scope.employeeBg = (data[0]);
console.log("员工背景data:"+JSON.stringify(data))
//循环多个工作经历
$scope.edus=(data[0]).eduList;
}
}).error(function(data, status, headers, config) {
$scope.data = data || "Request failed";
$scope.status = status;
$scope.tips = '对不起,您的网络情况不太稳定。';
});*/
$scope.edus=[
{
"badge": "",
"begindate": "2015-10-02",
"edutype": "3",
"enddate": "2015-10-15",
"id": "9023",
"major": "电子商务",
"schoolname": "广大",
"sid": "22F92C8D81144CDFE050007F01006C3D",
"studytype": ""
},
{
"badge": "",
"begindate": "2015-10-01",
"edutype": "3",
"enddate": "2015-10-10",
"id": "9023",
"major": "机械自动化",
"schoolname": "北大",
"sid": "23267E58D5F902D7E050007F01002EF9",
"studytype": ""
}
]; $scope.saveEducation = function(edu) {
console.log("edu.begindate........."+edu.begindate);
}
});
</script>
</body>
</html>

Angularjs与bootstrap.datetimepicker结合实现日期选择器的更多相关文章

  1. 基于bootstrap模态框的日期选择器

    近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...

  2. bootstrap datetimepicker 日期插件超详细使用方法

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  3. 日期选择器(Query+bootstrap和js两种方式)

    日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表 ...

  4. 模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  5. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  6. bootstrap datetimepicker 在 angular 项目中的运用

    datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker  ...

  7. bootstrap datetimepicker的参数解释

    使用bootstrap datetimepicker(日期时间选择器)的过程中,发现中文参数说明和英文参数说明严重不符,所以结合自己使用的情况和英文参数说明,做了如下翻译. $(".form ...

  8. Android自己定义DataTimePicker(日期选择器)

    Android自己定义DataTimePicker(日期选择器)  笔者有一段时间没有发表关于Android的文章了,关于Android自己定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中.本篇 ...

  9. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

随机推荐

  1. Lua 之数据结构

    Lua 之数据结构 数组 通过整数下标访问的table中的元素,即是数组,下标默认从1开始. 一个创建二维数组的例子: mt = {} , do mt[i] = {} , do mt[i][j] = ...

  2. linux lsof 用法简介

    1.简介: lsof(list open files)是一个列出当前系统打开文件的工具. 只需输入 lsof 就可以生成大量的信息,因为 lsof 需要访问核心内存和各种文件,所以必须以 root 用 ...

  3. JS原型链理解

    1. 每个对象都有原型属性(__proto__)2. 对象的原型(__proto__)指向其构造函数(Class)的prototype属性3. 构造函数(Class)的prototype属性本身也是一 ...

  4. reactjs 注意点

    render的return return前要留一空行 return的括号要分别各占一行,不能与html同行 return中的html必须要有顶层容器包裹 return中的循环不能用for,改用map方 ...

  5. Orchard源码分析(7):ASP.NET MVC相关

    概述 Orchard归根结底是一个ASP.NET MVC(以后都简称为MVC)应用,但在前面的分析中,与MVC相关内容的涉及得很少.MVC提供了非常多的扩展点,本文主要关注Orchard所做的扩展.主 ...

  6. Flex入门笔记

    Test_01.mxml <?xml version="1.0" encoding="utf-8"?> <viewer:BaseWidget  ...

  7. aop实现日志(转)

    文章来至于http://www.thinksaas.cn/group/topic/341436/ 第一:>>在spring的配置文件里增加以下配置 <!-- 支持 @AspectJ ...

  8. Bootstrap学习------Tabel

    Bootstrap的表格和Html表格大同小异,只是封装了一些css供我们使用 <table>标签必须引用class="table"基类样式,我们可以根据需求赛选需要的 ...

  9. \r,\n,\r\n的区别

    http://www.studyofnet.com/news/285.html \n是换行,英文是New line,表示使光标到行首\r是回车,英文是Carriage return,表示使光标下移一格 ...

  10. POJ 1265 Area

    有一种定理,叫毕克定理....                             Area Time Limit: 1000MS   Memory Limit: 10000K Total Sub ...