angular +bootstrap datetime picker

A-Pen-by-allenyang.markdown

A Pen by allenyang

A Pen by allenyang on CodePen.

License.

index.html

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/7963854/css/bootstrap-datetimepicker.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/7963854/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js"></script>
  
<div class="input-append date form_datetime">
    <input size="16" type="text" value="" readonly>
    <span class="add-on"><i class="icon-th"></i></span>
</div>

<div ng-app="app">
  <div ng-controller="Ctrl" ng-init="mydate='1234'">
    <div datetime-picker ng-model="mydate"></div>
    my date is {{mydate}}
  </div>
</div>

script.js

$(".form_datetime").datetimepicker({
    format: "dd MM yyyy - hh:ii",
    autoclose: true,
    todayBtn: true,
    pickerPosition: "bottom-left"
});
console.log("run");



var app=angular.module("app",[])
console.dir(app)
app.controller("Ctrl",function($scope){
  console.log("Ctrl run")
})

app.directive("datetimePicker",function(){
  
    var tpl='<div><div class="input-append date datetime">';
    tpl+='<input size="16" type="text" value="" readonly>';
    tpl+='<span class="add-on"><i class="icon-th"></i></span>';
    tpl+='</div></div>';
    
    return {
        restrict:"EA",
        scope:{
            ngModel:"="
        },
        replace:true,
        template:tpl,
        link:function(scope,element,attr){
            console.log($(".datetime",element).size())
            $(".datetime",element).datetimepicker({
                format: "yyyy-mm-dd hh:00:00",
                minuteStep :15,
                viewSelect :"day",
                autoclose: true,
                todayBtn: false,
                pickerPosition: "bottom-left"
            }).change(function(){
                alert($("input",this).val())
                scope.ngModel=$("input",this).val()
                $(this).datetimepicker('hide')
                scope.$apply();
            });
        }
    }
})