0

Tengo un problema que no se muy bien como integrar un datepicker exclusivo de angular para mi aplicación he estado intentando hacerlo pero no se donde tengo el error exactamente os enseño mis archivos de controlador app etc..

controller.js:

myApp.controller('empController', function($route,$scope,$http,$routeParams){
    $scope.getCitas = function(){
        $http.get('../api/select.php').then(function(response){
            $scope.citas = response.data;
        });
    };
    $scope.addCita = function(info){
        $http.post('../api/insert.php', info).then(function(response){
            window.location.href = 'http://localhost/webCitas/crud_APM3/client/home.php#/';
        });
    };
    $scope.showCita = function(){
        var idCita = $routeParams.idCita;
        $http.post('../api/selectone.php',{'idCita':idCita}).then(function(response){
            var emp  = response.data;
            $scope.cita = emp[0];
        });
    };
    $scope.updateCita = function(info){
        $http.post('../api/update.php', info).then(function(response){
            window.location.href = 'http://localhost/webCitas/crud_APM3/client/home.php#/';
        });
    };
    $scope.deleteCita = function(idCita){
        var idCita = idCita;
        $http.post('../api/delete.php',{'idCita':idCita}).then(function(response){
            $route.reload();
        });
    };
    $scope.getHoras = function (fechaInicio) {
         // En la llamada pasas fecha de inicio como argumento para el php.
         $http.get('../api/horas.php?='+fechaInicio).then(function (response) {
             $scope.citas = response.data;
         });
     };
    $scope.getCitasPublico = function(){
        $http.get('../api/selectPublico.php').then(function(response){
            $scope.citas = response.data;
        });
    };
});
angular
  .module('Demo', ['moment-picker', 'ngMaterial'])
  .controller('DemoController', ['$scope', function () {
    var ctrl = this;

    // noop.
  }]);

create.html:

<div class="form-group">
                <label for="fechaInicio">Fecha de la cita:</label>
                <div class="input-group date fecha">
                    <div ng-cloak style="padding:20px;"
                ng-controller="DemoController as ctrl"
                layout="column"
                layout-padding>

            <md-content class="md-no-momentum">
              <md-input-container class="md-icon-float md-block">
                <label>Select a date...</label>
                <md-icon md-font-library="material-icons">today</md-icon>
                <input moment-picker="ctrl.stringDate"
                       locale="en"
                       format="YYYY-MM-DD"
                       ng-model="ctrl.momentDate"
                       ng-model-options="{ updateOn: 'blur' }">
              </md-input-container>
            </md-content>
</div>
</div>
</div>

solo os pongo la parte del "datepicker".

3
  • según veo tienes la etiqueta moment-picker y la relaciono con una directiva externa de Angular llamada Angular Moment Picker. La estás incluyendo correctamente en el proyecto? indrimuska.github.io/angular-moment-picker Commented el 21 dic. 2017 a las 15:57
  • El problema es que he probado integrar 100 y ya no se ni lo que estoy intentando, porque no me pilla la funcionalidad. Osea yo le doy a la pestaña pero no se despliega el calendario por eso quería que alguien mas entendido me propusiera alguna solución para ver como lo ha integrado, porque los ejemplos que me ponen en la documentación me lían mas.
    – Peter
    Commented el 21 dic. 2017 a las 15:59
  • Te genera algún error en la consola del navegador? Commented el 21 dic. 2017 a las 16:00

1 respuesta 1

1

Yo uso angular-datepicker sin ningún problema:

1. instala vía npm

npm install angularjs-datepicker --save

2. añadelo en tu index.html:

<!DOCTYPE HTML>
<html>
<head>
    <link href="src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />
</head>

<body ng-app="app">
<script src="src/js/angular-datepicker.js"></script>
</body>
</html>

3. Y ahora añadelo en el componente que quieras:

<datepicker>
<input ng-model="date" type="text"/>
</datepicker>

3
  • Por favor procura que los fragmentos de código generen el resultado esperado. Commented el 22 dic. 2017 a las 15:54
  • pero a ti tampoco te sale el datepicker cuando pinchas
    – Peter
    Commented el 22 dic. 2017 a las 17:33
  • Hola Crisman, me funciona en local pero no he sido capaz de embeberlo en SO funcionando o sin el botón de ejecutar.
    – aleix
    Commented el 2 ene. 2018 a las 14:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.