calendar bootstrap web component does not work.

Classic Servoy
1

Hi all

I’m trying to implement a date field in my solution using bootstrap calendar component from servoy default installation.

Do I have to write an special function to deal with the date dataprovider in the web component before saving it in the database?

Web components like input text are workin right, but the date one does not work for me …

Is it my fault? Has anybody worked with this kind of web component?

My work environment is

Version: 8.0.2 - build 3024
Postgres 9.4

Best regards. Thanks in advance.

test01.servoy (6.1 KB)

2

Hello Roberto,
I’ve tried you sample and it looks like it is working correctly.
I can change the date values and those are stored in the database.

3

Thanks a lot jdbruijn

I’m starting to think my computer is getting crazy … :| :| :|

I can not retrieve any data from Date Picker Web Component.

This is again a sample solution where dataprovider from Web Component is linked to a date form variable … and again nothing happens.

Thanks in advance. Best Regards. Roberto Blasco.

test01.servoy (5.53 KB)

4

That one is working also.

5

Thanks a lot jdbruijn …

Time to try it in another computer and/or servoy installation … :shock: :shock: :shock:

Best Regards. Roberto Blasco.

6

Hi Roberto,

I tried your sample and the component works fine. I can pick a date but when I click on Save data, this error appears in the log
2016-04-07 17:05 Executor,uuid:19ea7175-6358-4c07-bbe2-1e05d6c1d90a WARN org.sablo.websocket.WebsocketEndpoint Warning: Access to component calendar property dataProviderID denied (protected)

The app remains running but data is not updated into the database.

Regards

7

Hi dfernandez

Thanks a lot for this point of view … :-)

I’ve rebuild the compontent provided with servoy within “.\developer\plugins\servoy_ngclient_8.0.2.3024.jar” → "war\bootstrapcomponents\calendar

Looking up model section int the spec file.

This is servoy code …

"name": "bootstrapcomponents-calendar",
	"displayName": "Calendar",
	"version": 1,
	"icon": "servoydefault/calendar/Calendar_C16.png",
	"definition": "bootstrapcomponents/calendar/calendar.js",
	"libraries": [{"name":"moment", "version":"2.6.0", "url": "bootstrapcomponents/calendar/bootstrap-datetimepicker/js/moment.min.js", "mimetype":"text/javascript"},{"name":"moment-jdateformatparser", "version":"0.1.1", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/js/moment-jdateformatparser.js", "mimetype":"text/javascript"},{"name":"bootstrap-datetimepicker", "version":"4.7.14", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js", "mimetype":"text/javascript"},{"name":"bootstrap-datetimepicker", "version":"4.7.14", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css", "mimetype":"text/css"},
{"name":"bootstrap-datetimepicker-servoy-extension", "version":"1.0", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/css/bootstrap-datetimepicker-servoy-extension.css", "mimetype":"text/css"}],
	"model":
	{
	        "dataProviderID" : { "type":"dataprovider", "pushToServer": "allow","tags": { "scope" :"design" }, "ondatachange": { "onchange":"onDataChangeMethodID", "callback":"onDataChangeCallback"}},
	        "enabled" : { "type": "enabled", "blockingOn": false, "default": true, "for": ["dataProviderID","onActionMethodID","onDataChangeMethodID"] }, 
	        "format" : {"for":["dataProviderID"] , "type" :"format"},
	        "readOnly" : { "type": "protected", "blockingOn": false, "default": false,"for": ["dataProviderID","onDataChangeMethodID"] },
	        "styleClass" : { "type" :"styleclass", "tags": { "scope" :"design" }, "default" : "form-control"},
	        "visible" : "visible"
	},
	"handlers":
	{
	        "onActionMethodID" : {
	         	
	        	"parameters":[
								{
						          "name":"event",
								  "type":"JSEvent"
								} 
							 ]
	        }, 
	        "onDataChangeMethodID" : {
	          "returns": "Boolean", 
	         	
	        	"parameters":[
								{
						          "name":"oldValue",
								  "type":"${dataproviderType}"
								}, 
								{
						          "name":"newValue",
								  "type":"${dataproviderType}"
								}, 
								{
						          "name":"event",
								  "type":"JSEvent"
								} 
							 ]
	        }
	},
	"api":
	{
	}

This is my code …

{
	"name": "mypackage-datepicker",
	"displayName": "Calendar",
	"version": 1,
	"definition": "mypackage/datepicker/datepicker.js",
	"libraries": [
			{"name":"moment", "version":"2.6.0", "url": "bootstrapcomponents/calendar/bootstrap-datetimepicker/js/moment.min.js", "mimetype":"text/javascript"},
			{"name":"moment-jdateformatparser", "version":"0.1.1", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/js/moment-jdateformatparser.js", "mimetype":"text/javascript"},
			{"name":"bootstrap-datetimepicker", "version":"4.7.14", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js", "mimetype":"text/javascript"},
			{"name":"bootstrap-datetimepicker", "version":"4.7.14", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css", "mimetype":"text/css"},
			{"name":"bootstrap-datetimepicker-servoy-extension", "version":"1.0", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/css/bootstrap-datetimepicker-servoy-extension.css", "mimetype":"text/css"}],
	"model":
	{
	        "dataProviderID" : { "type":"dataprovider", "pushToServer": "allow","tags": { "scope" :"design" }, "ondatachange": { "onchange":"onDataChangeMethodID", "callback":"onDataChangeCallback"}},
	        "enabled" : { "type": "enabled", "blockingOn": false, "default": true, "for": ["dataProviderID","onActionMethodID","onDataChangeMethodID"] }, 
	        "format" : {"for":["dataProviderID"] , "type" :"format"},
	        "styleClass" : { "type" :"styleclass", "tags": { "scope" :"design" }, "default" : "form-control"},
	        "visible" : "visible"
	},
	"handlers":
	{
	        "onActionMethodID" : {
	         	
	        	"parameters":[
								{
						          "name":"event",
								  "type":"JSEvent"
								} 
							 ]
	        }, 
	        "onDataChangeMethodID" : {
	          "returns": "Boolean", 
	         	
	        	"parameters":[
								{
						          "name":"oldValue",
								  "type":"${dataproviderType}"
								}, 
								{
						          "name":"newValue",
								  "type":"${dataproviderType}"
								}, 
								{
						          "name":"event",
								  "type":"JSEvent"
								} 
							 ]
	        }
	},
	"api":
	{
	}
	 
}

Note that readOnly property has been removed.

And now … it’s works !!!

This is the solution with the datepicker webcomponent modified code.

Best regards. Roberto Blasco

test01.servoy (5.53 KB)