Customising the Date Lookup widget

[Bruce]

As you may know by now, NetTalk 5 uses jQuery. And jQuery has a very powerful Date Picker widget, which is now the date picker in NetTalk 5.

Some of the options in the DatePicker are supported directly by the template (the date limits for example) but most options have to be set in embed code. The goal of this post is to show how and where to put this embed code.


jQuery options documentation

http://jqueryui.com/demos/datepicker/#options
I'm not going to duplicate that documentation here, so feel free to go there and have a look at some of the options.

Setting options globally

The SitesQ has a new property, DateOptions. So this can be set either in the WebServer procedure, or (better) in the WebHandler procedure, in the ProcessLink method (before the parent call).

For example; (in web handler)
  self.site.dateoptions = 'numberOfMonths: 3'

Translations

One big use for setting options is non-english sites. for example;

Code: [Select]

Self.site.DateOptions = 'monthNames: [''Januarix'', ''Februarix'', ''Marchix'', ''Aprilix'', ''Mayix'', ''Juneix'', ''Julyix'', ''Augustix'', ''Septembix'', ''Octobix'', ''Novembix'', ''Decembix''], monthNamesShort: [''Jax'', ''Fix'', ''Max'', ''Apx'', ''Mix'', ''Jux'', ''Jix'', ''Aix'', ''Six'', ''Oix'', ''Nix'', ''Dix'']'
There's also options there for day names, first day of the week, and so on.

Date Picture

You can set the Date Picture for your site on the Web Server procedure, (General Tab) and also for each field individually as before. The one big difference is that it supports a lot more date pictures than NT4. As far as I know all date pictures supported by clarion (up to @D16) are supported.

Setting options locally

You can also set options specifically for each date lookup. This is useful if you want one (or more) date pickers to behave differently to the global default.

To do this, right-click on the procedure in question, and search for
.CreateDateInput
There's an embed point right before that call where you can set a variable called loc:options
you can either add to the global options as in...

Code: [Select]

loc:options = clip(p_web.site.DateOptions) & ',numberOfMonths: 3'or override it completely as in...

Code: [Select]

loc:options = 'numberOfMonths: 3'

[Alberto]

Thanks Bruce,
FWIW here is the Spanish translation of mostly used datepicker porps :


Self.site.DateOptions = 'monthNames: [''Enero'', ''Febrero'', ''Marzo'', ''Abril'', ''Mayo'', ''Junio'', ''Julio'', ''Augosto'', ''Setiembre'', ''Octubre'', ''Noviembre'', ''Deciembre'']'&|
                        ',monthNamesShort: [''Ene'', ''Feb'', ''Mar'', ''Abr'', ''May'', ''Jun'', ''Jul'', ''Ago'', ''Set'', ''Oct'', ''Nov'', ''Dic'']'&|
                        ',dayNames: [''Domingo'', ''Lunes'', ''Martes'', ''Miercoles'', ''Jueves'', ''Viernes'', ''Sabado'']'&|
                        ',dayNamesMin: [''Do'', ''Lu'', ''Ma'', ''Mi'', ''Ju'', ''Vi'', ''Sa'']'&|
                        ',dayNamesShort: [''Dom'', ''Lun'', ''Mar'', ''Mie'', ''Jue'', ''Vie'', ''Sab'']'&|
                        ',closeText: ''Salir'''&|
                        ',currentText: ''Hoy'''&|
                        ',dateFormat: ''dd/mm/yy'''&|
                        ',nextText: ''Sig.'''&|
                        ',prevText: ''Ant.'''&|
                        ''

Cheers
Alberto

[Poul Jensen]

And in Danish for those interested:

Self.site.DateOptions = '' & |
      'monthNames: [''Januar'', ''Februar'', ''Marts'', ''April'', ''Maj'', ''Juni'', ''Juli'', ''August'', ''September'', ''Oktober'', ''November'', ''December'']' &|
      ',monthNamesShort: [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''Maj'', ''Jun'', ''Jul'', ''Aug'', ''Sep'', ''Okt'', ''Nov'', ''Dec'']' &|
      ',dayNames: [''Søndag'', ''Mandag'', ''Tirsdag'', ''Onsdag'', ''Torsdag'', ''Fredag'', ''Lørdag'']' &|
      ',dayNamesMin: [''Sø'', ''Ma'', ''Ti'', ''On'', ''To'', ''Fr'', ''Lø'']' &|
      ',dayNamesShort: [''Søn'', ''Man'', ''Tir'', ''Ons'', ''Tor'', ''Fre'', ''Lør'']'  &|
      ',closeText: ''Luk'''  &|
      ',currentText: ''Idag'''  &|
      ',dateFormat: ''dd/mm/yy'''  &|
      ',nextText: ''Næste''' &|
      ',prevText: ''Forrige''' &|
      ',showWeek: ''true''' &|
      ',firstDay: 1'  &|
      ',numberOfMonths: 2'

Cheers,
/Poul

[walter.dasilva]

And now in Brazilian Portuguese,

  Self.site.DateOptions = 'monthNames: [''Janeiro'', ''Fevereiro'', ''Março'', ''Abril'', ''Maio'', ''Junho'', ''Julho'', ''Agosto'', ''Setembro'', ''Outubro'', ''Novembro'', ''Dezembro'']'&|
                          ',monthNamesShort: [''Jan'', ''Fev'', ''Mar'', ''Abr'', ''Mai'', ''Jun'', ''Jul'', ''Ago'', ''Set'', ''Out'', ''Nov'', ''Dez'']'&|
                          ',dayNames: [''Domingo'', ''Segunda'', ''Terça'', ''Quarta'', ''Quinta'', ''Sexta'', ''Sábado'']'&|
                          ',dayNamesMin: [''Do'', ''Se'', ''Te'', ''Qa'', ''Qi'', ''Se'', ''Sá'']'&|
                          ',dayNamesShort: [''Dom'', ''Seg'', ''Ter'', ''Qua'', ''Qui'', ''Sex'', ''Sáb'']'&|
                          ',closeText: ''Sair'''&|
                          ',currentText: ''Hoje'''&|
                          ',dateFormat: ''dd/mm/yy'''&|
                          ',nextText: ''Pró.'''&|
                          ',prevText: ''Ant.'''&|
                          ''
                         

Walter