JSFiddle - React, Tailwind, and code Playground

by whitewolf

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<script src="http://files.cnblogs.com/whitewolf/green-angular-plugin.js"></script>
<div class="demo" ng-app="app" ng-controller="date">

<p>Date: <input id="datepicker" min-date="2012年08月10日"  ng-disabled="testd();"  date-format="yy年mm月dd日" ng-model="test" type="text" green-datepicker="111" ng-change="change();"></p>
{{test}}
</div>

JavaScript

var datepicker = function() {
    var linkFun = function($scope, element, attrs) {
        var $datepicker = jQuery(element);
        var option = jQuery.extend({
            onSelect: function() {
                if (attrs.ngModel) {
                    var express = attrs.ngModel + ' = "' + $datepicker.val() + '"';
                    $scope.$apply(express);
                }
                if (attrs.ngChange) {
                    $scope.$eval(attrs.ngChange);
                }
            }
        }, attrs);

        $datepicker.datepicker(option);
    };
    return linkFun;
};

appMoule.directive(prefixed + "Datepicker", datepicker);
//test controller
var date = function($scope) {
    $scope.test = "2012年08月12日";
    $scope.testd = function() {
        return $scope.test == "2012年08月13日";
    };
    $scope.change = function() {
        console.log("change", $scope.test);
    }
};
appMoule.controller("date", date);