Положение кнопок в jQuery datepicker - PullRequest
Новая
       8

Положение кнопок в jQuery datepicker

0 голосов
/ 06 июня 2018

Я довольно долго искал и не могу найти ответ на свою проблему.

Я включил панель кнопок в моем jQuery DatePicker, но теперь мне интересно, можно ли изменить положение кнопок?Мне нужны кнопки «Сегодня» и «Вчера».

Я написал код для пользовательской кнопки для «Вчера», но есть ли способ изменить ее положение?

То, что мне нужно сделать, это иметь кнопки в порядке «Вчера сегодня сделано».В настоящее время они отображаются как снимок экрана здесь.

Я также пытался написать код для настраиваемой кнопки для «Сегодня», но она по-прежнему не работает должным образом, и, кроме того, я не могу найти способ скрытькнопки по умолчанию в кнопочной панели.

Мой код для средства выбора даты выглядит следующим образом - JSFiddle : 

var options={
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
        beforeShow: function (input) { 
            //dpClearButton(input);    
            dpMaxButton(input); 

        },
        showButtonPanel: true,
        beforeShow: function (input) { 
            //dpClearButton(input);    
            dpMaxButton(input); 

        },

        onChangeMonthYear: function (yy, mm, inst) { 

            dpMaxButton(inst.input); 
        }
    };

    function dpMaxButton (input) {
        setTimeout(function () {
            var d = new Date();
            var yesterday = new Date((new Date()).valueOf() - 1000*60*60*24);
            //alert (yesterday);
            var buttonPane = $(input)
            .datepicker("widget")
            .find(".ui-datepicker-buttonpane");
            $("<button>", {
                text: "Yesterday",
                click: function () { 
                     jQuery(input).datepicker('setDate', yesterday);   
                     jQuery(input).datepicker('hide'); }
            }).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
        }, 1)
    };

    date_input.datepicker(options);

    $.datepicker._gotoToday = function(id) { 
        $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); 
    };

1 Ответ

0 голосов
/ 06 июня 2018

Я обновил код:

http://jsfiddle.net/7Wygg/516/

Первое добавленное css 

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{
  float:none !important;
}
.pull-left{
  float:left !important;
}

JS: 

$(function() {
$(".datepicker").datepicker({
    showButtonPanel: true,
    beforeShow: function (input) { 
                //dpClearButton(input);    
                dpMaxButton(input); 

            },
      onChangeMonthYear: function (yy, mm, inst) { 

                dpMaxButton(inst.input); 
            }
});
function dpMaxButton (input) {
            setTimeout(function () {
                var d = new Date();
                var yesterday = new Date((new Date()).valueOf() - 1000*60*60*24);
                //alert (yesterday);
                var buttonPane = $(input)
                .datepicker("widget")
                .find(".ui-datepicker-buttonpane");
                $("<button>", {
                    text: "Yesterday",
                    click: function () { 
                         jQuery(input).datepicker('setDate', yesterday);   
                         jQuery(input).datepicker('hide'); }
                }).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all pull-left");
            }, 1)
        }
    $.datepicker._gotoToday = function(id) { 
            $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); 
        };
});
...