jquery - full - bootstrap datetimepicker download
jQuery ui datepicker con Angularjs (14)
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'' .
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();
}
});
}
};
});
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
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.
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)
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.
Finalmente pude ejecutar la directiva datepicker en js angulares, aquí están los indicadores
incluir siguiendo JS en orden
- jquery.js
- jquery-ui.js
- 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. :)
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/
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?
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
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>
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();
});
}
};
});
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();
}
});
}
};
});
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 />
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();
});