Показать сообщение отдельно
  #1 (permalink)  
Старый 28.06.2015, 02:23
Интересующийся
Отправить личное сообщение для andrewinc Посмотреть профиль Найти все сообщения от andrewinc
 
Регистрация: 19.09.2012
Сообщений: 10

jQueryUI.timespinner
Уважаемые коллеги!
Хочется в проекте использовать jQueryUI.spinner для увеличения/уменьшения времени, по аналогии с http://jqueryui.com/spinner/#time только, естественно немецкий формат, мне не нужен, хотя он и совпадает с тем что нужно получить. Подозреваю, что он окажет влияние и на другие виджеты jQueryUI, т.к. используется библиотека Globalize, что предполагает некие глобальные настройки. Естественно, хочется "содрать" код timespinner'а и найти отечественный аналог файла
http://jqueryui.com/resources/demos/...lture.de-DE.js который используется в примере. Стандартный ход мыслей: скачать библиотеку, установить русский globalize.culture... Но его нет в самой библиотеке! Хм.. Решил пойти другим путём. Нафига для двух циферок с ведущими нулями в спиннере нужно грузить ещё кучу библиотек.. Может обойтись себе простой заменой _parse и format. Как следует из названий _parse -должна текстовую версию парсить в некое внутреннее представление, например как в примере в ms (в моём - минуты), а format - отображать в красивом виде. Но что-то у меня не катит:
/** Вставка нулей перед числом например, 7 вывести как 007 (number=7, digits=3)
 * @param Number number исходное число
 * @param Number digits сколько символов надо задействовать
 * @return String строка с ведущими нулями (если требуются)
 **/
function numberZeroFill(number, digits){
        if( (number = number + "").length < digits ) {
                return new Array(++digits - number.length).join("0") + number;
        } else {
                return number;
        }
};
    $.widget( "ui.timespinner", $.ui.spinner, {
        options: {
            // минуты
            step: 1,
            // hours
            page: 60
        },

        _parse: function( value ) {
            var f=function(value){
              if ( typeof value === "string" ) {
                if ( Number( value ) == value ) {
                    return Number( value );//число минут
                }
                var t, re=/([0-9]{1,2}):([0-9]{1,2})/;
                var a=value.match(re);//"2:03" => ["2:03", "2", "03"]
                return (isNaN(t=parseInt(a[1],10))?t*60:0)+isNaN(t=parseInt(a[2],10))?t:0;
              }
              return value;
            };
            console.log('parse: '+JSON.stringify(value)+" -> "+JSON.stringify(f(value)));
            return f(value);
        },

        _format: function( value ) {
            var f=function(value){
              if ( Number( value ) == value )  {
                  var h=Math.floor(value/60), m = value%60;
                  return numberZeroFill(h,2)+":"+numberZeroFill(m,2);
              } else return value;
            };
            console.log('format:'+JSON.stringify(value)+" -> "+JSON.stringify(f(value)));
            return f(value);
        }
    });

    $('#s').timespinner({value:'00:00', min:0,max:24*60-1});

При работе спинера выдача в консоль:
Код:
parse: "" -> 0
parse: "" -> 0
parse: "" -> 0
parse: 1 -> 1
format:1 -> "00:01"
parse: "00:01" -> 0
parse: "00:01" -> 0
parse: 1 -> 1
format:1 -> "00:01"
parse: "00:01" -> 0
parse: "00:01" -> 0
как видно - дальше одной минуты дело не идёт.

В примере из http://jqueryui.com/spinner/#time на 28 строке что-то для меня новенькое:
return +Globalize.parseDate( value );
и у меня ступор !!! нафига "+"??? Вначале даже подумал - опечатка. Нет, без него не работает (воспроизвёл пример точно). С ним работает....

В общем, если кто-нибудь решал подобную задачу, или просто не поленится объяснить мне как завести этот спинер без кучи устаревших немецких библиотек - буду весьма признателен. Ну а как бонус, если кто объяснит смысл этой странной конструкции с плюсиком на 28 строке - я буду вообще счастлив.
Ответить с цитированием