searchBuilder date format

Lapointe

Hi all

I use searchBuilder to filter some data, including formated date (sam. 31 oct. 2020 00:00 for sample)

So when selecting date in searchBuilder not record is found (of course)

Is there a way to customise searchBuilder date picker (localise)

like it is in application ?

sandy

Hi @Lapointe ,

You should be able to just change the moment locale, see their documentation here.

If that doesn't work, can you provide a test case please with both running so that we can see where it is tripping up? Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Thanks,
Sandy

Lapointe

hi @sandy

http://live.datatables.net/cegewowu/2/edit

When new, date picker for 'start date' field is localised, but the date picher in search builder not...
How to please ?

sandy

Hi @Lapointe ,

We have a fix for this in progress and will update here when it is resolved.

Thanks,
Sandy

Lapointe

sandy

Hi @Lapointe ,

That should be the issue fixed now as you can see in this edited version of your example. This will be available in the next SearchBuilder release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

Lapointe

hi @sandy

Thanks a lot

Sorry but can't get correct display using nigthly builds.

as you can see in the sample you refer the field date picker is not with same options (language, hours, ...) than searchBuilder date picker

and the 'and' term for between comparison not yes translated...

sandy

Hi @Lapointe,

Can you update the example I provided to show the issues that you are having?

Sorry, we should have replied to tell you about the new language option for the and. You should be able to set it using the language.searchBuilder.valueJoiner option. Note that this is only currently available in the nightly builds, this is the commit for it.

Thanks,
Sandy

Lapointe

Hi @sandy

In fact I use the sample as is actually here

Thanks. The valueJoiner language option work fine (I never get information about a fix for this point or missundertood it)

But for date picker the two (searchBuilder and start date field are not identical, as you can see

Thanks a lot
Bob

sandy

Hi @Lapointe ,

Is your date data in the same format as that in the example?

SearchBuilder matches the date picker to the data within the column that you are filtering on. You can see all of the conditions here.

It does this by tracking the moment format for that column - see here.

Because of this you won't be able to use SearchBuilders default moment conditions, you'll have to create your own that applies two different formats.

Thanks,
Sandy

Lapointe

Hi @sandy

First of all thank you for the time you use to solve this problem.

In the sample, the searchBuilder date picker is displaying english month names, field display french monthes names

In fact I did adjust date format to create a running sample with searchBuilder.

The real date format I need to use in this application is a complete french datetime format :
jeu. 12 nov. 2020 17:28 as DateSqlToFrench($val, 'D d M Y H:i')

                    Field::inst( 'recettes.Date' )
                        ->getFormatter( function ( $val, $data ) {if ($val == 'Invalid date') return null;return DateSqlToFrench($val, 'D d M Y H:i');} )
                        ->setFormatter( function ( $val, $data ) {if ((!$val) || ($val == 'Invalid date')) return null;return DateFrenchToSql($val, 'D d M Y H:i') ;}),

The datepicker used in the real form match these settings as you can see here

js included

    <script type='text/javascript' language='javascript' src='/js/moment.min.js' ></script>
    <script type='text/javascript' language='javascript' src='/js/fr.js' ></script>
    <script type='text/javascript' language='javascript' src='/js/datetime.js'></script>
    <script type='text/javascript' language='javascript' src='/js/datetime-moment.js'></script>

js field definition

        { name: 'recettes.Date', label: 'Date prestation',
            type: 'datetime',
            def:    function () { var today = new Date (); var date = today.getFullYear ()+'-'+ (today.getMonth ()+1)+'-'+today.getDate ();return today;},
            displayFormat: 'ddd DD MMM YYYY HH:mm',
            wireFormat: 'ddd DD MMM YYYY HH:mm',
            fieldInfo: 'Date de réalisation de la prestation',
            //opts:  {minutesAvailable: [0,10,20,30,40,50], hoursAvailable: [ 8,9,10,11,12,13,14,15,16,17,18,19,20 ], disableDays: [ 0, 6 ]},
            keyInput: false
        },

local langage definition

$.extend( true, $.fn.dataTable.Editor.defaults, { //i18n  editor language
    i18n: {
        datetime: {
            unknown: '?', hours: 'Heure', seconds : 'Seconde',
            previous: 'Précédent', next: 'Suivant',
            months:   [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
            weekdays: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ]
        }
    }
});
$.extend( true, $.fn.dataTable.defaults, {        // datatables language
   datetime: {
        momentLocale: 'fr',
        unknown: '?', hours: 'Heure', seconds : 'Seconde',
        previous: 'Précédent', next: 'Suivant',
        months:   [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
        weekdays: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ], unknown:  '?',
        invalidDate: 'Date non valide',
        displayFormat: 'dddd DD MMMM YYYY HH:mm',
        wireFormat: 'dddd DD MMMM YYYY HH:mm',
        showWeekNumber: 1,
        yearRange: 80
    }
$.extend( true, $.fn.dataTable.Editor.DateTime, {  // datetime language
defaults:{
        momentLocale: 'fr',
        invalidDate: 'Date non valide',
        displayFormat: 'dddd DD MMMM YYYY HH:mm',
        wireFormat: 'dddd DD MMMM YYYY HH:mm',
        showWeekNumber: 1,
        yearRange: 80}      
});

$.fn.dataTable.moment( 'ddd DD MMM YYYY HH:mm', 'fr' ); // sort with null or empty datetime-moment.js";

and moment localised language (fr.js)

//! moment.js locale configuration

;(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined'
       && typeof require === 'function' ? factory(require('../moment')) :
   typeof define === 'function' && define.amd ? define(['../moment'], factory) :
   factory(global.moment)
}(this, (function (moment) { 'use strict';
    var fr = moment.defineLocale('fr', {
        months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
        monthsShort : 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
        monthsParseExact : true,
        weekdays : 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
        weekdaysShort : 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
        weekdaysMin : 'di_lu_ma_me_je_ve_sa'.split('_'),
        weekdaysParseExact : true,
        longDateFormat : {
            LT : 'HH:mm',
            LTS : 'HH:mm:ss',
            L : 'DD/MM/YYYY',
            LL : 'D MMMM YYYY',
            LLL : 'D MMMM YYYY HH:mm',
            LLLL : 'dddd D MMMM YYYY HH:mm'
        },
        calendar : {
            sameDay : '[Aujourd’hui à] LT',
            nextDay : '[Demain à] LT',
            nextWeek : 'dddd [à] LT',
            lastDay : '[Hier à] LT',
            lastWeek : 'dddd [dernier à] LT',
            sameElse : 'L'
        },
        relativeTime : {
            future : 'dans %s',
            past : 'il y a %s',
            s : 'quelques secondes',
            ss : '%d secondes',
            m : 'une minute',
            mm : '%d minutes',
            h : 'une heure',
            hh : '%d heures',
            d : 'un jour',
            dd : '%d jours',
            M : 'un mois',
            MM : '%d mois',
            y : 'un an',
            yy : '%d ans'
        },
        dayOfMonthOrdinalParse: /\d{1,2}(er|)/,
        ordinal : function (number, period) {
            switch (period) {
                // TODO: Return 'e' when day of month > 1. Move this case inside
                // block for masculine words below.
                // See https://github.com/moment/moment/issues/3375
                case 'D':
                    return number + (number === 1 ? 'er' : '');

                // Words with masculine grammatical gender: mois, trimestre, jour
                default:
                case 'M':
                case 'Q':
                case 'DDD':
                case 'd':
                    return number + (number === 1 ? 'er' : 'e');

                // Words with feminine grammatical gender: semaine
                case 'w':
                case 'W':
                    return number + (number === 1 ? 're' : 'e');
            }
        },
        week : {
            dow : 1, // Monday is the first day of the week.
            doy : 4  // The week that contains Jan 4th is the first week of the year.
        }
    });

    return fr;

})));

Lapointe

Hi again

In fact the localised words seem to be not according the fr.js

I don't understand where to set searchBuilder moment langage file...

Thanks and good week end

Lapointe

hi @sandy, @allan

i18n is explicitely defined in searchBuilder.js.

I'm a poor js coder and don't know how to, but don't wand to belive there is not a way to use the local moment as defined in the table where searchBuilder apply to

Typing moment.locale() in console return 'fr' and moment.localeData() return all localised terms I need for searchBuilder date picker...

So can you tell me how to set these options to be used by searchBuilder please ?

(I'll go to have a jameson to keep positive)

Thanks for all
Bob

sandy

Hi @Lapointe ,

Apologies I appear to have linked the wrong example when we solved the issue, take a look at this example. I've added some comments to show where I am adding to the defaults etc.

Have a good weekend
Sandy

Lapointe

Hi @sandy

Thanks...

Else the result displayed by date picker (sb) in the sample use english langage for days (Mon, Tue)... this seem to be ok

These settings are for moment display result in my js.fr...
Please let me know how to if possible.

I think about getting moment.localedata and map to existing defaults keys used by searchBuilder... not possible ?

Just another question
are these settings simlilar ?

 $.extend( true, $.fn.dataTable.Editor.defaults, {
    i18n: {
      datetime:
.....
$.extend( true, $.fn.dataTable.Editor.DateTime, { 
    defaults:{
        i18n:

Thanks a lot for your work...
Have a good weekend to
Bob

Lapointe

Hi @sandy

Using this sample

When search builder display Avril as month name and Dim as day column name the returned value is Apr. for month and Sun. for day.... so nothing match with these results id displayed according the localised fr moment.

value returned by date picker in form (fr format)...

filter values returned by searchBuilder datePicker

Thanks
Bon

sandy

Hi @Lapointe ,

momentLocale had to change to just locale in the defaults that you were setting. Take a look at this example.

Thanks,
Sandy

Lapointe

Hi @sandy

This work fine...

So how to tell you many thanks ?

Cheer

Bobby