jquery - full - bootstrap datetimepicker download

jQuery ui datepicker con Angularjs

Question

Quiero usar jQuery UI datepicker con AngularJS.

Tengo una muestra, pero mi código no funciona.

Muestra:

http://www.abequar.net/jquery-ui-datepicker-with-angularjs/

Mi código:

<input id="sDate" name="programStartDate" type="text" datepicker required/>



angular.module(''elnApp'')
 .directive(''datepicker'', function () {
  return {
    restrict: ''A'',
    require : ''ngModel'',
    link : function (scope, element, attrs, ngModelCtrl) {
        $(function(){
            element.datepicker({
                dateFormat:''yy-mm-dd'',
                onSelect:function (date) {
                    ngModelCtrl.$setViewValue(date);
                    scope.$apply();

                }
            });
        });
    }
} });

Muestra un error TypeError: Object [object Object] has no method ''datepicker'' .

Answer 1

Aquí está mi código-

var datePicker = angular.module(''appointmentApp'', []);

datePicker.directive(''datepicker'', function () {
    return {
        restrict: ''A'',
        require: ''ngModel'',
         link: function (scope, element, attrs, ngModelCtrl) {
            $(element).datepicker({
                dateFormat: ''dd-mm-yy'',
                onSelect: function (date) {
                    scope.appoitmentScheduleDate = date;
                    scope.$apply();
                }
            });
        }
    };
});

Answer 2

Como buena práctica, especialmente si tiene múltiples selectores de fecha, no debe codificar el nombre de la variable de ámbito del elemento.

En su lugar, debe obtener el ng-model la entrada onSelect y actualizar su variable de ámbito correspondiente dentro del método onSelect .

app.directive(''jqdatepicker'', function() {
    return {
        restrict: ''A'',
        require: ''ngModel'',
        link: function(scope, element, attrs, ngModelCtrl) {
            $(element).datepicker({
                dateFormat: ''yy-mm-dd'',

                onSelect: function(date) {
                    var ngModelName = this.attributes[''ng-model''].value;

                    // if value for the specified ngModel is a property of 
                    // another object on the scope
                    if (ngModelName.indexOf(".") != -1) {
                        var objAttributes = ngModelName.split(".");
                        var lastAttribute = objAttributes.pop();
                        var partialObjString = objAttributes.join(".");
                        var partialObj = eval("scope." + partialObjString);

                        partialObj[lastAttribute] = date;
                    }
                    // if value for the specified ngModel is directly on the scope
                    else {
                        scope[ngModelName] = date;
                    }
                    scope.$apply();
                }

            });
        }
    };
});

EDITAR

Para abordar el problema que @Romain levantó (Elementos anidados), he modificado mi respuesta

Answer 3

Creo que te estás perdiendo la dependencia Angular ui bootstrap en tu declaración de módulo, así:

angular.module(''elnApp'', [''ui.bootstrap''])

Vea el doc para Angular-ui-bootstrap.

Answer 4

Desafortunadamente, la respuesta de Vicont no funcionó para mí, por lo que busqué otra solución que sea tan elegante y que funcione también para los atributos anidados en el modelo ng. Utiliza $ parse y accede al ng-model a través de los attrs en la función de vinculación en lugar de requerirlo:

myApp.directive(''myDatepicker'', function ($parse) {
    return function (scope, element, attrs, controller) {
      var ngModel = $parse(attrs.ngModel);
      $(function(){
        element.datepicker({
            ...
            onSelect:function (dateText, inst) {
                scope.$apply(function(scope){
                    // Change binded variable
                    ngModel.assign(scope, dateText);
                });
            }
        });
     });
    } 
});

Fuente: ANGULAR.JS VINCULANTE A JQUERY UI (EJEMPLO DATEPICKER)

Answer 5

El mejor artículo que he encontrado es el siguiente: http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs

Me llevó 20 minutos integrarlo con mi página.

Answer 6

Finalmente pude ejecutar la directiva datepicker en js angulares, aquí están los indicadores

incluir siguiendo JS en orden

1. jquery.js
2. jquery-ui.js
3. angular-min.js

Agregué el siguiente

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>      

en código html

<body ng-app="myApp" ng-controller="myController">
// some other html code 
<input type="text" ng-model="date" mydatepicker />
<br/>
 {{ date }}
 //some other html code
 </body>

en el js, asegúrese de codificar primero la directiva y luego agregar el código para el controlador, de lo contrario causará problemas.

directiva de selector de fecha:

var app = angular.module(''myApp'',[]);
app.directive(''mydatepicker'', function () {
return {
    restrict: ''A'',
    require: ''ngModel'',
     link: function (scope, element, attrs, ngModelCtrl) {
        element.datepicker({
            dateFormat: ''DD, d  MM, yy'',
            onSelect: function (date) {
                scope.date = date;
                scope.$apply();
            }
        });
    }
  };
});

código directivo referido de las respuestas anteriores.

Después de esta directiva, escriba el controlador

app.controller(''myController'',function($scope){
//controller code
};

PRUEBE ESTO EN LUGAR en js angulares

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>  

junto con jquery.js y jquery-ui.js

podemos implementar angular js datepicker como

<input type="date" ng-model="date" name="DOB">

Esto le da al datepicker incorporado y la fecha se establece en ng-model y se puede usar para un procesamiento y validación posterior.

Encontré esto después de mucho éxito con el headbanging con enfoque anterior. :)

Answer 7

Modifiqué el código y envolví la actualización de la vista dentro de $ apply ().

link: function (scope, elem, attrs, ngModelCtrl){   
var updateModel = function(dateText){
    // call $apply to update the model
    scope.$apply(function(){
        ngModelCtrl.$setViewValue(dateText);
    });
};
var options = {
    dateFormat: "dd/mm/yy",
     // handle jquery date change
    onSelect: function(dateText){
        updateModel(dateText);
    }
};
 // jqueryfy the element
elem.datepicker(options);

}

fiddle de trabajo - http://jsfiddle.net/hsfid/SrDV2/1/embedded/result/

Answer 8

Su archivo Index.html principal para Angular puede usar la etiqueta body como ng-view. Entonces, todo lo que tiene que hacer es incluir una etiqueta de script en la parte inferior de la página que Indexable traiga a Index.html de la siguiente manera:

<script type="text/javascript">
$( function() {
    $( "#mydatepickerid" ).datepicker({changeMonth: true, changeYear: true, 
        yearRange: ''1930:''+new Date().getFullYear(), dateFormat: "yy-mm-dd"});
});
</script>

¿Por qué complicar las cosas?

Answer 9

Tengo casi exactamente el mismo código que tú y el mío.

¿Tienes jQueryUI.js incluido en la página?

Hay un violín here

<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}


var datePicker = angular.module(''app'', []);

datePicker.directive(''jqdatepicker'', function () {
    return {
        restrict: ''A'',
        require: ''ngModel'',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: ''DD, d  MM, yy'',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

También necesitará la ng-app = "aplicación" en algún lugar de su HTML

Answer 10

Tuve el mismo problema y se resolvió poniendo las referencias e incluye en ese orden:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

var datePicker = angular.module(''app'', []);

datePicker.directive(''jqdatepicker'', function () {
    return {
        restrict: ''A'',
        require: ''ngModel'',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: ''dd/mm/yy'',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<body ng-app="app">
<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}
</body>

Answer 11

onSelect no funciona bien en ng-repeat, así que hice otra versión usando el evento bind

html

<tr ng-repeat="product in products">
<td>
    <input type="text" ng-model="product.startDate" class="form-control date-picker" data-date-format="yyyy-mm-dd" datepicker/>
</td>
</tr>

guión

angular.module(''app'', []).directive(''datepicker'', function () {
    return {
        restrict: ''A'',
        require: ''ngModel'',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker();
            element.bind(''blur keyup change'', function(){
                var model = attrs.ngModel;
                if (model.indexOf(".") > -1) scope[model.replace(//.[^.]*/, "")][model.replace(/[^.]*/./, "")] = element.val();
                else scope[model] = element.val();
            });
        }
    };
});

Answer 12

angular.module(''elnApp'')
.directive(''jqdatepicker'', function() {
    return {
        restrict: ''A'',
        require: ''ngModel'',
        link: function(scope, element, attrs, ctrl) {
            $(element).datepicker({
                dateFormat: ''dd.mm.yy'',
                onSelect: function(date) {
                    ctrl.$setViewValue(date);
                    ctrl.$render();
                    scope.$apply();
                }
            });
        }
    };
});

Answer 13

myModule.directive(''jqdatepicker'', function () {
    return {
        restrict: ''A'',
        require: ''ngModel'',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: ''dd/mm/yy'',
                onSelect: function (date) {   
                    var ar=date.split("/");
                    date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
                    ngModelCtrl.$setViewValue(date.getTime());
                //    scope.course.launchDate = date;
                    scope.$apply();
                }
            });

        }
    };
});

Código HTML :

<input type="text" jqdatepicker  ng-model="course.launchDate" required readonly />

Answer 14

var selectDate = element.datepicker({
    dateFormat:''dd/mm/yy'',
    onSelect:function (date) {
        ngModelCtrl.$setViewValue(date);
        scope.$apply();
    }
}).on(''changeDate'', function(ev) {
    selectDate.hide();
    ngModelCtrl.$setViewValue(element.val());
    scope.$apply();
});