Search code examples
angular-schema-form

angular schema form datepicker

I'm brand new to using Angular JS so forgive me if this is a basic question. I'm having problems using the date picker add on with Angular Schema Form (http://schemaform.io) I've followed the instructions on the datepicker github page, but I simply can't get a datepicker to display on my page. Here is a snippet of the code I've been using. Can anyone help or suggest any mistakes I've made?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Unilever Data Centre Site Survey</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script type="text/javascript" src="bower_components/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/jscript" src="bower_components/jquery-2.1.4.min.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.date.js"></script>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.css"> </link>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.date.css"> </link>
</head>


 <body ng-app="test" ng-controller="TestCtrl">
   
 <nav class="navbar navbar-default"> </nav>
  <div style="width:950px;" class="container-fluid">
   
    <div ng-controller="TestCtrl">
    <form name="test" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(test,modelData)">
	</form>
	
	 <h3>Model</h3>
     <div>{{prettyModel}}</div>



<script>
angular.module('test',['schemaForm']).controller('TestCtrl', function($scope,$http){
  
  
  
   $scope.schema = {
  "type": "object",
  "properties": {
  
  
  "birthDate": {
      "title": "Bday",
      "type": "string",
      "format": "date"
    },
    
    
    
   $scope.form = [ 
   
{
    "key": "birthDate",
    "minDate": "1995-09-01",
    "maxDate": new Date(),
    "format": "yyyy-mm-dd"
  },​
     
     
     $scope.model = {};
  
   $scope.$watch('model', function(value){
            if (value) {
              $scope.prettyModel = JSON.stringify(value, undefined, 2);
            }
          }, true);


  
  
})
    </script>
	
	
	
	</div>

  </body>

Solution

  • It's don't work because Textalk/angular-schema-form-datepicker is missing.

    You need to install angular-schema-form-datepicker

    https://github.com/Textalk/angular-schema-form-datepicker