javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template.

but have no idea how start building it...

how include date data directive?

i appreciate guide or give me advice work on more precisely.

it might you! follow below steps

html code sample:

    <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/>  <hr/>  <pre>birthdate = {{birthdate}}</pre>  <script type="text/ng-template" id="custom-datepicker.html">     <div class="enhanced-datepicker">         <div class="proxied-field-wrap">             <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/>         </div>         <label>             <button class="btn" type="button"><i class="icon-calendar"></i></button>             <span class="datepicker-date">{{ngmodel | date:'d mmm yyyy'}}</span>         </label>     </div> </script> 

js code sample:

    angular     .module('app',['ui.date'])     .directive('customdatepicker',function($compile){         return {             replace:true,             templateurl:'custom-datepicker.html',             scope: {                 ngmodel: '=',                 dateoptions: '='             },             link: function($scope, $element, $attrs, $controller){                 var $button = $element.find('button');                 var $input = $element.find('input');                 $button.on('click',function(){                     if($input.is(':focus')){                         $input.trigger('blur');                     } else {                         $input.trigger('focus');                     }                 });             }             };     })     .controller('mycontroller',function($scope){         $scope.birthdate = '2013-07-23';         $scope.dateoptions = {             mindate: -20,             maxdate: "+1m +10d"         };     });  /*global angular */ /*  jquery ui datepicker plugin wrapper   @note if ≤ ie8 make sure have polyfill date.toisostring()  @param [ui-date] {object} options pass $.fn.datepicker() merged onto uidateconfig  */  angular.module('ui.date', [])  .constant('uidateconfig', {})  .directive('uidate', ['uidateconfig', '$timeout', function (uidateconfig, $timeout) {   'use strict';   var options;   options = {};   angular.extend(options, uidateconfig);   return {     require:'?ngmodel',     link:function (scope, element, attrs, controller) {       var getoptions = function () {         return angular.extend({}, uidateconfig, scope.$eval(attrs.uidate));       };       var initdatewidget = function () {         var showing = false;         var opts = getoptions();          // if have controller (i.e. ngmodelcontroller) wire         if (controller) {            // set view value in $apply block when users selects           // (calling directive user's function if provided)           var _onselect = opts.onselect || angular.noop;           opts.onselect = function (value, picker) {             scope.$apply(function() {               showing = true;               controller.$setviewvalue(element.datepicker("getdate"));               _onselect(value, picker);               element.blur();             });           };           opts.beforeshow = function() {             showing = true;           };           opts.onclose = function(value, picker) {             showing = false;           };           element.on('blur', function() {             if ( !showing ) {               scope.$apply(function() {                 element.datepicker("setdate", element.datepicker("getdate"));                 controller.$setviewvalue(element.datepicker("getdate"));               });             }           });            // update date picker when model changes           controller.$render = function () {             var date = controller.$viewvalue;             if ( angular.isdefined(date) && date !== null && !angular.isdate(date) ) {               throw new error('ng-model value must date object - ' + typeof date + ' - use ui-date-format convert string');             }             element.datepicker("setdate", date);           };         }         // if don't destroy old 1 doesn't update when config changes         element.datepicker('destroy');         // create new datepicker widget         element.datepicker(opts);         if ( controller ) {           // force render override whatever in input text box           controller.$render();         }       };       // watch changes directives options       scope.$watch(getoptions, initdatewidget, true);     }   }; } ])  .constant('uidateformatconfig', '')  .directive('uidateformat', ['uidateformatconfig', function(uidateformatconfig) {   var directive = {     require:'ngmodel',     link: function(scope, element, attrs, modelctrl) {       var dateformat = attrs.uidateformat || uidateformatconfig;       if ( dateformat ) {         // use datepicker attribute value dateformat string convert , string         modelctrl.$formatters.push(function(value) {           if (angular.isstring(value) ) {             return jquery.datepicker.parsedate(dateformat, value);           }           return null;         });         modelctrl.$parsers.push(function(value){           if (value) {             return jquery.datepicker.formatdate(dateformat, value);           }           return null;         });       } else {         // default iso formatting         modelctrl.$formatters.push(function(value) {           if (angular.isstring(value) ) {             return new date(value);           }           return null;         });         modelctrl.$parsers.push(function(value){           if (value) {             return value.toisostring();           }           return null;         });       }     }   };   return directive; }]); 

here working fiddle http://jsfiddle.net/fvfsl/.