I tried to add it back, but I have no idea when to trigger form validation on date change.

Here is the template code I edited, added feedback span and decorator class bindings. But it always shows glyphicon-ok.

angular.module("schemaForm").run(["$templateCache", function($templateCache) {$templateCache.put("directives/decorators/bootstrap/datepicker/datepicker.html","<div class=\"form-group {{form.htmlClass}}\" ng-class=\"{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false }\">\n  <label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label>\n  <div ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\">\n    <span ng-if=\"form.fieldAddonLeft\"\n          class=\"input-group-addon\"\n          ng-bind-html=\"form.fieldAddonLeft\"></span>\n    <input ng-show=\"form.key\"\n           style=\"background-color: white\"\n           type=\"text\"\n           class=\"form-control {{form.fieldHtmlClass}}\"\n           schema-validate=\"form\"\n           ng-model=\"$$value$$\"\n           ng-disabled=\"form.readonly\"\n           pick-a-date=\"form.pickadate\"\n           min-date=\"form.minDate\"\n           max-date=\"form.maxDate\"\n           name=\"{{form.key.slice(-1)[0]}}\"\n           format=\"form.format\" />\n    <span ng-if=\"form.fieldAddonRight\"\n          class=\"input-group-addon\"\n          ng-bind-html=\"form.fieldAddonRight\"></span>\n  </div>\n  <span ng-if=\"form.feedback !== false\" class=\"form-control-feedback\" ng-class=\"evalInScope(form.feedback) || { 'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }\"></span>\n  <span class=\"help-block\">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>\n</div>\n");}]);

How should I change the code in pickADate directive?

I implemented the editable option for pickadate.js for the pickADate directive. Now I need to show the picker when the focus is triggered and hide it on blur.

I also need to implement a way to determine the input field has been changed.

Any ideas?

Hello,

we are using this datepicker and we have problems when it is placed inside of the modal dialog view. We tried to set explicitely the root element to #content but it seems not to work. The attribute i am talking about is: http://amsul.ca/pickadate.js/date/#container

 <input style="background-color: white"
             type="text"
             class="form-control"
             ng-model="dialog.fromDate"
             pick-a-date="date"
             container="#content"
             format="YYYY-MM-DD"/>

Does it work?

It's hard to select dates in the past without the year selector. An option to enable them would be useful.

date picker is not working in angular drywall..need quick solution..

schema:
"date1": {
"title": " ",
"type": "string",
"format": "date"
},
form:[
{
"type": "section",
"notitle": false,
"items": [
"date1"
]
}]

i set schema and form like that ,but it not effect, get the value "birthday": "5 January, 2016",not format like 'yyyy-mm-dd'

schema 
"birthday": {
                    "title": "date select",
                    "type": "string",
                    "format": "date",
                },

form 
{
                "key": "birthday",
                "minDate": "2014-06-20",
                "format": "yyyy-mm-dd",
                "default": new Date()
            }

If you look at the kitchen sink example within http://textalk.github.io/angular-schema-form/examples/bootstrap-example.html and hover the mouse pointer over the angular-schema-form-datepicker field the no-drop cursor is shown.

Forms do not render if only datepicker fields exist.

The following does not render

//schema
{
  "type": "object",
  "properties": {
    "date_complete": {
      "type": "string",
      "required": true,
      "format": "date"
    },
    "close_date": {
      "type": "string",
      "required": true,
      "format": "date"
    }
  }
}

//form
[
  {
    "key": "date_complete",
    "title": "Completed Date",
    "type": "datepicker",
    "readonly": false,
    "description": "Please Supply The Date This Task Was Completed.",
    "format": "mm/dd/yyyy"
  },
  {
    "key": "close_date",
    "title": "Close Date",
    "type": "datepicker",
    "readonly": false,
    "description": "Please Supply The Close Date.",
    "format": "mm/dd/yyyy"
  }
]

If I add a basic text field into the mix the form renders fine.

//schema
{
  "type": "object",
  "properties": {
    "date_complete": {
      "type": "string",
      "required": true,
      "format": "date"
    },
    "close_date": {
      "type": "string",
      "required": true,
      "format": "date"
    },
    "basicfield": {
      "type": "string"
    }
  }
}
//form
[
  {
    "key":"date_complete",
    "title": "Completed Date",
    "type": "datepicker",
    "readonly": false,
    "description": "Please Supply The Date This Was Completed.",
    "format": "mm/dd/yyyy",
    "required": true
  },{
    "key": "close_date",
    "title": "Close Date",
    "type": "datepicker",
    "readonly": false,
    "description": "Please Supply The Close Date.",
    "format": "mm/dd/yyyy",
    "required": true
  },
  {
    "key":"basicfield",
    "title": "basicfield"
  }
]

Any ideas?

Redrawing the form works but seems like a hack.

        let setScopesASF = doc =>{
          $scope.form   = doc.form;
          $scope.schema = doc.schema;

          $timeout(100, ()=>$scope.$broadcast('schemaFormRedraw'));
        };

I have this date picker implemented on a form who's data is saved and can then be edited at a later time. When I first load the form with no data, no date is displayed in the date picker field, I can pick a date with the date picker which then displays in the field, and save the data. When I come back to the form to edit the data, the date picker field shows today's date instead of the date contained in the model. When I save the form data without modifying the form, the date is in fact the correct date from the model, it is just not being displayed in the date picker field. Any ideas on why this is happening?

I'm trying to make my datepicker field readonly and that attribute in the schema seems to be ignored. any ideas?

Common use case is to have two pickers to specify start and end dates, where end date cannot be before the start date. Doesn't it make sense to keep watching for min/max date changes?

Hello,

i am searching a demo code for this module without success!!!

So i write this plunker

http://plnkr.co/edit/mjyd99

But i haven't any datepicker popup.

Is it ok? Where am I doing wrong?

King regards

After entering a correct date the form field does not have the proper success class added to it, making it hard to properly style the element inline with other elements in the form.

Hi,

Would be great to do npm i angular-schema-form-datepicker because I am not using bower.

Best

It seems like the functionality from the angular-schema isn't completely passed through.
The htmlClass is ignored by the datepicker form field when the html is generated. But the code for the adjacent field is created as expected.

Any advice to get this working quickly?

{
    'type': 'section',
    'htmlClass': 'row',
    'items': [
        {'key': 'recentExam', 'format': 'mm-dd-yyyy', 'htmlClass': 'col-sm-6'},
        {'key': 'examPurpose', 'htmlClass': 'col-sm-6'}
    ]
},

This is the resulting html: http://postimg.org/image/xprmfqz6r/

I need to now when a field is dirty ($dirty, $pristine), but in the case of DatePicker it doesn't show in FormController object, in the example myForm:

    <form name="myForm"
        sf-schema="schema" sf-form="form" sf-model="model"
        ng-submit="onSubmit(myForm)" novalidate>
    </form>

See amsul/pickadate.js#689 for details and the fix

Making no PR as this applies to the color- and fontpicker as well and is such an easy fix.

The problem is that there is no main entry point defined in the package.json, so for example for jspm, there has to be a package override do define it.

How can I use a DatePicker, if I´m using an array?
The problem is that is duplicating the data in all imputs, can anyone help me?

form:{ "key": "doc", "add": null, "remove": null, "items": [ { "key": "doc[].docDate", "notitle": true, "format": "dd-mm-yyyy", "fieldHtmlClass": "fechaFichaFinal", "placeholder": "dd-mm-yyyy" }]

Hi! Could you change:

 <div class="form-group..." ng-class="..">

with:

<div class="form-group..." ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false}">

We'd like to be able to add icons / glyphs / etc. in input-group-addons to the forms as described here:
ASF Issue 273.

If we implemented this for -datepicker and submitted a pull request, would the maintainers be amenable to merging it? The goal is to be able to attach an icon to the field like so:

example:
Date Time Timezone
10/02/2017 02:00 PM (UTC-05:00) Eastern Time (US & Canada)

click here for example

i want the exact the same control in schemaform

When a date input has the disabled state, the background is not changed.

The problem comes from the datepicker.html:

<input ng-show="form.key"
       style="background-color: white"

Even if the component is disabled, the background color keeps as white, instead of changing to CSS classes ".form-control[disabled], .form-control[readonly], fieldset[disabled]"

Since the $$value$$ isn't on the controller scope, what the heck is it?

I'm trying to adjust this $$value$$ from a controller scope I created to wrap a file upload field I'm making , and being able to put stuff in $$value$$ is my missing link.

Though this add-on has an elegant ui, it is not easy to select a date of birth since you have to click several times. It will be nice to have some drill down feature for the year.

Thanks.

Hi,

as you know, the datepicker is also used as a filter in the list view of angular-schema-form.
Problem here: Barely anyone ever wants to filter for one special date.
The most common use-case is filter for a date range (i.e. I want to see all Users who logged in during the last week).

Is there already support for this?
If not, what would be best practise to build it?

Hello,

I had create a simple pluker to validate a form with a datepicker.

The code is very simple. Why my form is always INVALID?

Tnkx 4 support me!

http://plnkr.co/edit/BlnsOX

Hello,

I'm trying to use the "onChange" (from the standard option of angular-schema-form)
but the function is never called :

$scope.form = [
   {
    key: "start_date",
    format: "dd-mm-yyyy",
    onChange: function(modelValue,form) {
      console.log("start_date =", modelValue);
    }
   },
 ];

TL;DR

angular-schema-form validates (with tv4) what's visible in the view. angular-schema-form-datepicker converts the dates to ISO8601 format (which json-schema supports) but does not change what is in the view. Because of this, when dates in the form are validated against the json schema (using the view value) validation can fail because it does not conform to the schema.

PROBLEM

Pickadate uses it's own localisations to convert the date (object) that the user picks to a string, which is displayed in the form input on-screen. For example, right now if I select 16th September 2014, because of my locale I will see "16 September, 2014" in my form.

The date format supported by json-schema is ISO8601 (eg. yyyy-mm-dd), so angular-schema-form-datepicker adds an angularjs formatter function (eg. ngModel.$formatters.push(fn)) to datepicker fields, which converts the date selected to a ISO8601 string, and then sets the formatted string on the underlying ngModel. This is the value that developers will see, and usually submit to an API (which presumably defines the json schema used for validation).

So far, so good.

angular-schema-form adds an angularjs $parser function to the ngModel (parser functions are called when an input changes), which calls tv4 and validates that single field. BUT... $parsers get sent the view value, not the model value (e.g. "16 September, 2014" not "2014-09-16"). Because of this angular-schema-form-datepicker is validating what is visible in the view against the json schema, even though this is not what will be submitted to the api. For example, if a pattern is set in the schema for a date-time field, it will fail validation unless the pickadate locale and the json-schema pattern match. Currently this is only an issue if there's no pattern set for the date-time in the schema, but it's conceivable that tv4 might change (in the future) to validate that date-time fields conform to ISO8601.

SUMMARY

angular-schema-form itself never uses angularjs formatters to convert values - all other form types in angular-schema-form save to the model exactly what is visible in the view. angular-schema-form-datepicker is the only place I have found where the view value is different from the model value, which is why I've raised the problem here.

I believe that angular-schema-form should be validating the value from the model, not the view, because it's the model that will be submitted to the server (and that needs to conform to json-schema). It's also possible to imagine other add-ons in the future which will use formatters.

How can we set the format to "May 23, 2015"?

Answer: "mmmm dd, yyyy"

references source: http://amsul.ca/pickadate.js/date/

Is there any intention to have this add-on provide a time-picker as well since it uses pickadate.js?

scope.form = [
{
"key": "birthDate",
"minDate": "1995-09-01",
"maxDate": new Date(),
"format": "yyyy-mm-dd"
}
]

above example is there any possible to pass the default today date.
like
scope.form = [
{
"key": "birthDate",
"minDate": "1995-09-01",
"maxDate": new Date(),
"format": "yyyy-mm-dd"
"default":new Date()
}
]

I try to setup date format as below, but the input box did not update to respective format.
{
"key": "date",
"minDate": "2014-06-20",
"format": "mmmm dd, yyyy",
"formatSubmit": "dd/mm/yyyy"
},

Here is the sample link:
http://schemaform.io/examples/bootstrap-example.html#/027def8a2b695347a118

How do we specify extra options available in pickadate.js. Options like selectMonths, selectYears etc.

Thanks.

This may be by intent or my own ignorance about how to set the language - but the default language seems to vary unpredictably. In the kitchen sink demo it is Dutch even though the rest of the demo is English and the default for bootstrap-datepicker is en. Running on my server it is in German which is doubly odd.

If I wanted to pass the following options :

$('.datepicker').pickadate({
    labelMonthNext: 'Go to the next month',
    labelMonthPrev: 'Go to the previous month',
    labelMonthSelect: 'Pick a month from the dropdown',
    labelYearSelect: 'Pick a year from the dropdown',
    selectMonths: true,
    selectYears: true
})

how would I do it

1. for a single field in a form
2. to all date fields (default global option)

Thanks