ANGULARJS Study Notes 3_datepicker

1. Using Jquery-ui +angular

<script src= "Http://libs.useso.com/js/jquery/1.11.1/jquery.js" ></script>
<script src= "Http://libs.useso.com/js/jqueryui/1.10.0/jquery-ui.js" ></script>
<script type= ' text/javascript ' src= ' http://libs.useso.com/js/angular.js/1.2.9/angular.js ' ></script ><div class= "Row" >
<input type= "text" Datepicker1 ng-model= "MyObject1"/>
<input type= "text" Datepicker2 ng-model= "MyObject2"/>
</div>app.directive (' Datepicker1 ', function () {
return function (scope, element, Attrs) {
Element.datepicker ({
Inline:true,
dateformat: ' dd.mm.yy ',
onselect:function (datetext) {
var Modelpath = $ (this). attr (' Ng-model ');
//putobject (Modelpath, scope, datetext);
scope. $apply ();
                   }
               });
           }
        });
app.directive (' Datepicker2 ', function () {
return {
restrict: ' A ',
require: ' Ngmodel ',
link:function (scope, element, Attrs, Ngmodelctrl) {
$ (function () {
Element.datepicker ({
dateformat: ' Dd/mm/yy ',
onselect:function (date) {
scope. $apply (function () {
Ngmodelctrl. $setViewValue (date);
                                });
                            }
                        });
                    });
                }
            }
        });

2. Use Bootstrap + Angular

<script type= ' text/javascript ' src= ' http://libs.useso.com/js/angular.js/1.2.9/angular.js ' ></script >
<link rel= "stylesheet" href= "Http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" >
<script src= "Http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js" ></script> <div class= "Row" >
<section ng-controller= "Datedemo" class= "col-md-6" style= "float:none; margin:5px auto; background: #fff; pad ding:5px; " >
//{{}} Double curly braces are angular value expressions
<pre class= "" > Selected date is: <em>{{dt | date: ' fulldate '}}</em></pre>

<section style= "display:inline-block; min-height:240px;" >
<datepicker ng-model= "DT" min-date= "MinDate" show-weeks= "true" class= "Wellwell-sm" ></datepick Er>
</section>
<br>//ng-model Binding dt module, min-date minimum date show-weeks= ture display week

<div class= "Row" >
<div class= "col-md-6" >
<p class= "Input-group" >
<input type= "text" class= "Form-control" datepicker-popup= "{{format}}" ng-model= "DT" Is-open = "Opened" min-date= "MinDate"max-date= "' 2014-12-30 '" datepicker-options= "dateOptions" date-disabled = "Disabled (date,mode)" N G-required= "true" close-text= "close" >
<span class= "input-group-btn" >
<button type= "button" class= "btn Btn-default" ng-click= "open ($event)" >
<i class= "Glyphicon Glyphicon-calendar" ></i>
</button>
</span>
</p>
</div>
</div>
<br>ng-options loop Add option
<div class= "Row" >
<div class= "col-md-6" >
<label for= "" > Format:</label>
<select name= "" id= "" class= "Form-control" ng-model= "format" ng-options= "F for f in formats" ; <option value= "" ></option></select>
</div>
</div>

<div>
<button type= "button" class= "btn btn-info btn-sm" ng-click= "Today ()" > Todays </button>//A bunch of click events There's nothing to say.
<button type= "button" class= "btn btn-sm btn-default" ng-click= "dt = ' 2008-08-08 '" >2008-08-08< /button>
<button type= "button" class= "btn btn-sm Btn-danger" ng-click= "Clear ()" > Clear </button>
<button type= "button" class= "btn btn-sm btn-default" ng-click= "Togglemin ()" tooltip= "After Today" &G t; period </button>
</div>
</section>
</div> var app = Angular.module (' A8_8 ', [' ui.bootstrap ']);app.controller (' Datedemo ', function ($scope) {
$scope. Today = function () {//Create a method,
$scope. dt = new Date ();//define a property to receive today's date
            };
$scope. Today ();//Run the Today method
$scope. Clear = function () {//SET DT to NULL when clear is run
$scope. dt = null;
            }
$scope. Open = function ($event) {//Create Open method. The following default behavior and set opened to True
$event. Preventdefault ();
$event. stoppropagation ();
$scope. opened = true;
            }
$scope. Disabled = function (date, mode) {
return (mode = = = ' Day ' && (date.getday () = = = 0 | | date.getday () = = 6))
            }
$scope. togglemin = function () {
$scope. mindate = $scope. MinDate? null:new Date ();//3 Yuan expression, nothing to say .
            }
$scope. Togglemin ();
$scope. dateOptions = {
formatyear: ' yy ',
startingday:1
            }
$scope. Formats = [' dd-mmmm-yyyy ', ' yyy/mm/dd ', ' DD '. Mm.yyyy ', ' shortdate ']; Date display Format
$scope. Format = $scope. Formats[0]; Set the No. 0 item of formats as the default display format
        });

ANGULARJS Study Notes 3_datepicker