datepicker markup initialization

Webix JS
#1

Please have a look at http://webix.com/snippet/8f2b2637

I am initializing several commonly-used form controls, angular-style. This includes text, textarea, combo, datepicker, checkbox, radio.

I can set an initial value for text and textarea controls in this way:

<div view="text" id="nameText" label="{{translations.Name}}" 
value="{{perfilName}}"></div>

However that technique does not seem to work on datepickers - neither ‘date’ nor ‘value’ attribute seem to work

<div view="datepicker" id="fromDatepicker" timepicker="true" label="{{translations.From}}" 
date="{{from}}" value="{{from}}"></div>

How do I initialize datepicker values in html?

#2

In markup dates should be passed as strings, not as Date objects. You need to convert them in the controller:

 var now = new Date();
 var parser = webix.Date.dateToStr(webix.i18n.parseFormat);

 $scope.from = parser(new Date(now.getTime() - 86400000)); // yesterday
 $scope.to = parser(new Date(now.getTime() + 86400000)); // tomorrow

Check, please: http://webix.com/snippet/1091f374

You may also check date formatting info in the documentation.

#3

Your solution does not seem to cover i18.

Main app audience is Spanish so I will need to show datetimes in Spanish format.

I have tweaked fullDateFormat in webix/codebase/i18n/es.js to be “%d/%n/%Y %G:%i”, so that it does not show AM PM.

/*Spanish (Spain, International Sort) locale*/
webix.i18n.locales["es-ES"] = {
	groupDelimiter:".",
	groupSize:3,
	decimalDelimiter:",",
	decimalSize:2,
	dateFormat:"%d/%n/%Y",
	timeFormat:"%G:%i",
	longDateFormat:"%d %F %Y",
	fullDateFormat: "%d/%n/%Y %G:%i",
	am:null,
	pm:null,
...

On my controller, I have set webix locale and changed your parser definition

webix.i18n.setLocale('es-ES');
var parser = webix.Date.dateToStr(webix.i18n.fullDateFormat);

The datepicker output is unexpected - 06/1/2026 14:56 for yesterday and 06/1/2028 14:56 for tomorrow. What should I use to get i18n to work?

#4

It happens because your code is not fully correct.

The formats in locale define the way of date presentation, but all the inner parsing operations use another settings, the current webix.i18n.parseFormat.

So, string date is turned to Date object before it is set as datepicker value. And then this date is parsed according to some visual format. You can set this format in configuration:

<div view="datepicker" format="{{dateformat}}" ></div>

Check the snippet, please: http://webix.com/snippet/4ee3d301

The default parseFormat is %Y-%m-%d %H:%i and it can also be changed in the locale:

webix.i18n.parseFormat = my_format;
webix.i18n.setLocale();
#5

brilliant stuff, very informative. Code now working