语义UI日历无法正常工作

时间:2017-08-31 09:25:24

标签: jquery semantic-ui

我正在整合语义UI日历。当我们刷新页面时,日历仅显示第一次。一旦我们选择了一个日期,那么它就无法再次运行了。当我们从任何其他页面进入此页面时,它也无法正常工作。

我的代码:

<span class='field DF1' > 
                <label for='edate'> <?php echo FE_Translate_Translation::getInstance()->translate('GMSG_SERVER','GEN0000033'); ?> </label> 
                <div class='ui calendar' style='margin-top:2%;'> 
                    <div class='ui input right icon calendar'> 
                        <i class='calendar icon'></i> 
                        <input type='text' class='dateMdy' id="edate" placeholder='Choose Date'  > 
                    </div> 
                </div> 
            </span>

JS:

$(document).ready(function() {
        $(".ui.calendar").calendar({
            type            : 'date',
            today           : true,
            showButtonPanel : true,
            //on                : 'hover',
            popupOptions: {
                boundary    : '#contentDiv',
                hideOnScroll:  false,
                lastResort  : 'bottom left',
                position    : 'bottom left',                
                prefer      : 'opposite',               
                transition  : 'scale',
            },
            formatter       : {
                date: function (date, settings) {
                    return $.datepicker.formatDate('dd-M-yy', date);
                },
            },
            parser: {
                date: function (text, settings) {
                    return $.datepicker.parseDate('dd-M-yy', text);
                },
            },
            onChange: function (date, text, mode) {
                empSearchObj.changeEffDate();
            },
        });         
    });

如果有任何机构对此问题有任何疑问,请回复。

2 个答案:

答案 0 :(得分:0)

尝试使用onHide

 onChange: function (date, text, mode) {
            $ctrl.dateRange.startDate = date;

        },
 onHide: function () {
            if($ctrl.dateRange.startDate !== null || $ctrl.dateRange.startDate) {
                $ctrl.onDateSelected();
            }
        }

答案 1 :(得分:0)

配置使用西班牙语。

希望对您有帮助。

我使用angular的AfterViewInit模块

public ngAfterViewInit() {
    var self = this; // the component

    $('.ui.calendar').calendar({
      type: 'date',
      text: {
        days: ['S', 'L', 'M', 'M', 'J', 'V', 'D'],
        months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        today: 'Today',
        now: 'Now',
        am: 'AM',
        pm: 'PM'
      },
      onChange: function (date, text, mode) {
        self.fechaMapa = text; // 'fechaMapa' is a variable
      }
    });
};