使用AngularJS和Bootstrap日期选择控件_最好用的日期控件
2014-12-20 16:54:27  By: dwtedx

简介

非常令人兴奋的的、当你开发的Web应用程序使用了AngularJS、我刚才在网上研究了很多文章、并尝试与引用最新版本V3.2.0来完成简单的日期选择器控件、可以非常容易使用和定制你想要的日期格式和类型、参考日期选择器、但是它使用非常复杂的控制。写有日期选择器的代码、日期控件效果图

js日期控件

背景

与标题一致,它是关于使用RequireJS和Bootstrap,绑定应用程序构建的基本思路、这是一个简单的日期控件组件、在AngularJS加载依赖、了解源代码、你应该了解对AngularJS、引入、HTML、CSS等基础知识

使用代码

源代码是一步一步来创建简单的页面、其中包含测试项目的代码、它包括函数库、AngularJS、引入、和我们的日期选择器控件、引导日期选择器libray的direcuve库

应用程序的基本流程:注射RequireJS index.html中加载main.js - > app.js.在main.js、我加载指令和指标控制、去之前深深的索里的代码、我说明基本约在指令孤立的范围

在创建指令,AngularJS允许你创建一个孤立的范围,一些自定义绑定到父范围、有3种类型的结合被定义为在scope属性前缀的选项、前缀后面是HTML元素的属性名称、这些类型如下


文本装订(前缀:@),变量

单向绑定(前缀:&),功能

双向绑定(前缀:=), 值


第一个是我创造的指令与属性的类型。


define([´app´, ´directive/datepickerCtrl´], function (app) {
    app.directive(´datepicker´, function () {
        return {
            restrict: ´A´,
            controller: ´datepickerCtrl´,
            controllerAs: ´dp´,
            templateUrl: ´app/directive/datepicker.html´,
            scope: {
                ´value´: ´=´
            },
            link: function (scope) {
               
            }
        };
    });
});


在该指令,我注入datepicketCtrl处理的范围。您可以处理在控制器或直接联系范围变量的变化值:函数。

define([´app´], function (app) {
    app.controller(´datepickerCtrl´, function ($scope) {
        var self = this;
        $(´.date´).datepicker({ autoclose: true, todayHighlight: true });
        $scope.$watch(´value´, function (oldVal, newVal) {
                        console.log("Value: "  $scope.value);
        });
    } );
});


在控制器,I初始化的日期选择器触发libary JavaScript的一些选项PARAMS

$(´.date´).datepicker({ autoclose: true, todayHighlight: true });


在该指令,我链接到日期选择器HTML模板。在模板我用NG-模型2路结合。我通过

从父控制器的变量命名为“价值”的指令。
<div class="input-group date" data-date-format="dd-mm-yyyy" >
    <input type="text" ng-class={inputError:dp.validDate==false} 
	class="form-control input-sm" ng-model="value" />
    <span class="input-group-addon">
	<span class="glyphicon glyphicon-th"></span></span>
</div>


我把输入级inputError检查输入日期自定义。您可以将其删除。

创建指令后,我用RequireJS在主文件加载
require(
    [
        ´app´,
        ´directive/datepicker´,
        ´indexCtrl´

    ],
    function (app) {
        app.config([
        .....
          
        }
    ]);
        angular.bootstrap(document, [´testApp´]);
    });


并把它放在index.html文件

<div ng-controller="indexCtrl">
	<div class="col-xs-2" datepicker value="birthday">
</div>

演示地址(评论之后或加入dwtedx之后选择生日): http://dwtedx.com/info.html

最后给大家献上源代码链接: http://dwtedx.com/download.html?bdkey=s/1i3ivDdF 密码: hnrh

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

DD记账
top
+