博客分类：
在开始编码之前，我们必须想好组件的外观和运行方式。例如，我们想在HTML中像下面这样定义datepicker：
&input datepicker ng-model="currentDate" select="updateMyText(date)"&&/input&
也就是说，我们需要修改Input输入标签，新增一个datepicker属性，然后 给它扩展更多功能（例如使用模型进行数据绑定，以及当选中了日期之后能够获得通知）。那么，我们应该如何实现呢？
我们将会复用现有的控件，也就是jQuery UI提供的datepicker，而不是重新构建一个datepicker。我们只需要把它挂接到AngularJS上，然后启动它所提供的接口。
DatePickerDirective.js
angular.module('myApp.directives',[])
.directive('datepicker', function() {
//强制AngularJS把指令限定为只支持属性
restrict: 'A',
//总是和ng-model配合使用
require:'?ngModel',
//此方法需要与预先定义好，然后传递给视图控制器中的指令
select: '&' //把我们所引用的select函数绑定到右边的作用域中
link: function(scope, element, attrs, ngModel) {
if(!ngModel)
var optionsObj = {};
optionsObj.dataFormat = 'mm/dd/yy';
var updateModel = function(dateTxt) {
scope.$apply(function() {
//调用AngularJS内部的工具更新双向绑定关系
ngModel.$setViewValue(dateTxt);
optionsObj.onSelect = function(dateTxt, picker) {
updateModel(dateTxt);
if(scope.select) {
scope.$apply(function() {
scope.select({date: dateTxt});
ngModel.$render = function() {
//使用AngularJS内部的'binding-specific'变量
element.datepicker('setDate', ngModel.$viewValue || '');
element.datepicker(optionsObj);
我们还来看一看其中一些比较重要的东西。
1.ng-model
我们把一个ng-model属性传递给了指令所关联的函数。通过ng-model（它会托管指令的执行，因为所需要的属性都处于指令定义内部）可以定义，在指令的上下文中，连接到ng-model上的属性和对象应该具有何种行为。这里有两件事性需要注意：
a.ngModel.$setViewValue(dateTxt)
当AngularJS外部发生了某件事情的时候（在这个例子中是指jQuery UI datepicker的onSelect事件），需要调用此函数。这样就可以让AngularJS知道，它应该更新模型了。一般来说，当DOM事件发生的时候会调用它。
b.ngModel.$render
这是ng-model的另一个组成部分。它会告诉Angular，当模型发生变化的时候应该如何刷新视图。在这个例子中，我们只会把jQuery UI的datepicker变化之后的值传递过去。
2.绑定select
我们不会使用属性值进行编写、再根据作用域把它当做字符串来执行（在这种情况下，嵌套的函数和对象不可访问）的方式；而是会使用函数绑定技术（也就是“&”作用域绑定）。这样做在作用域上创建了一个新的函数，叫做select，它有一个参数——一个对象。这个对象中的每一个key都必须与HTML中所指定的参数一致（HTML就是使用指令的地方），key所对应的值将会被传递给函数对应的参数。这样带来的另一个优点是：控制器被解耦合了，它不再需要知道任何与DOM或者指令相关的内容。回调函数只需要执行它的动作，然后给出一些参数，而没有必要知道与数据绑定或刷新相关的内容。
3.调用select
注意，我们把一个optionOjb传递给了datepicker，同时也传递了一个onSelect函数。jQuery UI负责调用onSelect函数，它一般在AngularJS外部的执行上下文中进行调用。当然，在类似onSelect的函数被调用时，AngularJS是毫不知情的，所以我们有责任让AngularJS知道它需要进行何种操作。怎么才能做到这一点呢？使用scope.$apply即可。
现在，我们可以在scope.$apply的外部简单地执行$setViewValue并调用scope.select，然后再调用scope.$apply()。但是，这样一来，在这两个步骤中任何一个里面所发生的异常都会被默默地忽略掉。如果异常发生在scope.$apply函数内部，则它们可以被AngularJS捕获到。
DatePickerController.js
var app = angular.module('myApp', ['myApp.directives']);
app.controller('MainCtrl', function($scope) {
$scope.myText = 'Not Selected';
$scope.currentDate = '';
$scope.updateMyText = function(date) {
$scope.myText = 'Selected';
以上代码声明了一个控制器，设置了一些作用域变量，然后创建了一个作用域方法（updateMyText）,在后面我们会把这个方法绑定到datepicker的on-select事件上。
DatePickerHtml.html
&!DOCTYPE html&
&html ng-app="myApp"&
&head lang="en"&
&meta charset="utf-8"&&/meta&
&title&AngularJS Datepicker&/title&
&script src="jquery/jquery-1.8.3.js"&&/script&
&script src="jquery-ui/js/jquery-ui-1.9.2.js"&&/script&
&script src="angular/angular.js"&&/script&
&link rel="stylesheet" href="jquery-ui/css/custom-theme/jquery-ui-1.9.2.css"&&/link&
&script src="directive/DatePickerDirective.js"&&/script&
&script src="controller/DatePickerController.js"&&/script&
&script src="jquery-ui/js/jquery.ui.datepicker-zh-CN.js" type="text/javascript" charset="gb2312"&&/script&
&body ng-controller="MainCtrl"&
&input id="dateField" datepicker ng-model="$parent.currentDate" select="updateMyText(date)"&&/input&
{{myText}} - {{currentDate}}
注意这里是如何指定select属性的。作用域中并没有"date"值，但是由于我们在指令中设置了函数绑定的方式，所以AngularJS知道这个函数将会接受一个名为"date"的参数，它就是当datepicker上的onSelect被调用时我们所指定的对象。
注意一个细节：我们把ng-model设置成了$parent.currentDate，而不是currentDate。这是为什么呢？因为我们的指令将会创建一个独立的作用域，这样就可以用它来绑定select函数了。这就导致了currentDate不再被连接到ng-model上，即使我们专门进行了设置。因此，我们需要明确地告诉AngularJS，它需要引用的currentDate并不在这个独立的作用域中，而是在父作用域中。
通过这种方式，当你把应用加载到浏览器之后，将会看到一个文本框，点击它就会打开一个jQuery UI的datepicker。选择日期之后，屏幕上的文本就会从"Not Selected"更新成"Selected"，并加上你所选择的日期。同时，输入框中的日期也会被刷新。如下所示：
资料来源：《用AngularJS开发下一代Web应用》
下载次数: 27
bijian1013
浏览: 1355117 次
来自: 深圳
看这里 这里这篇文章更详细 还有完整的实例演示：js跳出循环： ...
公钥能改成cer格式么
你的这个是没有服务端吗？
大牛 。膜拜
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'1、按顺序引入库文件
&script type="text/javascript" src="dist/jquery.min.js"&&/script&
&script type="text/javascript" src="dist/jquery-ui.min.js"&&/script&
&script type="text/javascript" src="dist/angular.min.js"&&/script&
2、html代码
&div ng-app="ui.date"&
&input type="text" ng-model="start_time" ui-date /&
&/div& 1) ng-app : 声明所有被其包含的内容都属于angularJS应用
2) ng-model : 通过设置input标签里的ng-model属性, AngularJS会自动对数据进行双向绑定
3) ui-date: 定义的扩展的指令(uiDate)
3、定义指令
引入date.js:
&script type="text/javascript" src="https://github.com/angular-ui/ui-date/blob/master/src/date.js"&&/script&
汉化配置：$.extend($.datepicker.regional, {
'zh-CN' : {
closeText: '关闭',
prevText: '&上月',
nextText: '下月&',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一','二','三','四','五','六','七','八','九','十','十一','十二'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
效果图如下：
下载地址：
AngularJS 日期格式化 实例大全
本地化日期格式化：
({{time|date:'medium' }})Apr 14, :08 PM({{time | date:'short' }})4/14/16 4:40 PM...
ngx-bootstrap中的datepicker实现本地化，国际化
在用Angular4框架开发中引入了ngx-bootstrap，使用了时间控件DATEPICKER，但是遇到的问题是它们显示的是英文字母，但我们想要的是中文字体
如开发文档中显示的图如下：
要实现本...
angular2时间控件datepicker的使用
github下载地址：https://www.npmjs.com/package/angular2-simple-datepicker
使用代码：
setInputDate($event)&/&
日历在网页中的应用有很多，比如说后台的搜索功能，备忘录功能等等。要实现日历功能，有很多插件可以实现， 利用angular实现相关的日历功能的插件也就只有几个，比如说ui-jquery,angul...
1.引入插件包和css文件
&link rel=&stylesheet& type=&text/css& href=&lib/date...
第一种：indrimuska/angular-moment-picker
地址：https://github.com/indrimuska/angular-moment-picker点击...
大家好，我是IT修真院武汉分院第12期学员，一枚正直善良的web程序员。今天给大家分享一下，修真院官网JS-8任务中angular如何使用日历插件？1.背景介绍
日历在网页中的应用有很多，...
没有更多推荐了，I am using the AngularUI datepicker.
I have two datepickers that influence each other.
One is for example a "start date" and the other is an "end date".
Instead of creating validation for both datepickers, I want to eliminate the option of having invalid dates (i.e. end date earlier than the start date and vice versa).
Is there a way to re-trigger the date-disabled attribute on select of a date? (re-trigger the date-disabled of the OTHER datepicker)
My plunkr:
I have a start and end date, as you can see when you open each date picker, you cannot pick a start date higher than the end date and vice versa.
However if I change my start date to 11/21, I want the end date's datepicker to update so that the 11/20 is no longer clickable.
Is there any way to do this?
解决方案 It is possible to do this using min and max attributes in combination with watching pickers' values.
本文地址： &
我使用的是AngularUI日期选择器。我有相互影响另外两个datepickers。一个例如是“开始日期”，另一个是“结束日期”。相反，这两个datepickers创建的验证，我想消除其（早于开始日期，反之亦然，即最后一天）无效日期的选择。 有没有办法重新触发选择日期之日起禁用属性？ （重触发日期禁用其他日期选择器的）我plunkr：我有一个开始和结束日期，因为你可以看到，当你打开每个日期选择器，你不能选择的开始日期在结束日期越高，反之亦然。但是，如果我改变我的开始日期为11/21，我想结束日期的日期选择器来更新，使得11/20不再点击。有没有办法做到这一点？
解决方案 这是可能做到这一点使用最小值和最大值结合看采摘“属性值。看http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=$p$pview
本文地址： &
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ，选择关注
与百万开发者在一起
(window.slotbydup = window.slotbydup || []).push({
id: '5828425',
container: s,
size: '300,250',
display: 'inlay-fix'使用AngularJS和Bootstrap日期选择控件_最好用的日期控件_DD博客
js日期控件
收款微信号 dwtedx
支付宝帐户
比特币帐户
深度剖解各个领域业务流程、全面展示自己的所长及个人发展新思路
微信公众号 : （推荐）
备案信息 :
DD博客上的所有软件和源码Demo及相关资料均为软件商和个人工作总结或网友推荐及网络收集整理而来、仅供学习和研究使用、切勿用做商业用途、如有侵犯版权者、请来信到邮箱 ： 指出、DD博客将立即修正、净化网络版权环境、同时DD博客也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害
& Copyright 2017. All rights reserved.Server error
Server error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.