searchBuilder date format

searchBuilder date format

LapointeLapointe Posts: 430Questions: 81Answers: 4

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 ?

This question has accepted answers - jump to:

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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 ?

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Hi @Lapointe ,

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

    Thanks,
    Sandy

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    :)

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited November 2020

    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...

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited November 2020

    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

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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; })));
  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Hi @Lapointe ,

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

    Thanks,
    Sandy

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @sandy

    This work fine...

    So how to tell you many thanks ?

    Cheer

    Bobby

This discussion has been closed.