textalk / angular-schema-form-datepicker Goto Github PK
View Code? Open in Web Editor NEWDatepicker add-on for Angular Schema Form using pickadate!
License: MIT License
Datepicker add-on for Angular Schema Form using pickadate!
License: MIT License
How can we set the format to "May 23, 2015"?
Answer: "mmmm dd, yyyy"
references source: http://amsul.ca/pickadate.js/date/
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'));
};
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.
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/
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" }]
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]"
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>
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.
See amsul/pickadate.js#689 for details and the fix
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);
}
},
];
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?
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.
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.
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.
I'm trying to make my datepicker field readonly and that attribute in the schema seems to be ignored. any ideas?
It's hard to select dates in the past without the year selector. An option to enable them would be useful.
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?
Is there any intention to have this add-on provide a time-picker as well since it uses pickadate.js?
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?
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?
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?
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}">
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?
Hi,
Would be great to do npm i angular-schema-form-datepicker
because I am not using bower.
Best
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"
]
}]
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.
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
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()
}
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!
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
Thanks
example:
Date Time Timezone
10/02/2017 02:00 PM (UTC-05:00) Eastern Time (US & Canada)
i want the exact the same control in schemaform
How do we specify extra options available in pickadate.js. Options like selectMonths, selectYears etc.
Thanks.
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()
}
]
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:
Hello,
i am searching a demo code for this module without success!!!
So i write this plunker
But i haven't any datepicker popup.
Is it ok? Where am I doing wrong?
King regards
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.