Search code examples
angularjstypescriptbootstrap-datetimepicker

How to set global configuration of Gillardo/bootstrap-ui-datetime-picker in angularjs


I am using Gillardo bootstrap-ui-datetime-picker in my application and i wanted to override some default setting(wanted to remove buttonBar).For that i have used the following code which does not solve my problem (code get from library documentation uiDatetimePickerConfig Documentation). I have also searched but didn't find any help.

Note:Library is working fine only i wanted to remove buttonBar

buttoBar

Any suggestion.

Here html where shown datetimepicker

<p class="input-group">
                          <input type="text" class="form-control ng-valid ng-isolate-scope ng-valid-datetime ng-dirty ng-touched ng-not-empty"
                                               datetime-picker="HH:mm" ng-model="range.endTime"
                                               is-open="range.dEndTime" enable-date="false" 
                                               readonly>
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="controller.openCalendar($event,range,2)"><i class="fa fa-clock-o"></i></button>
                                        </span>

                                    </p>

Library

Library injected

var myAdminApp = new FHCommon.Module("FHAdminApp", ["daterangepicker", "ui.bootstrap", "ui.bootstrap.datetimepicker"]); //some injection have removed where are not relevant

Config

 myAdminApp.config(($stateProvider, $urlRouterProvider) => {

    $urlRouterProvider.otherwise("/login");

    myAdminApp.constant('uiDatetimePickerConfig',
    {
        dateFormat: 'yyyy-MM-dd HH:mm',
        defaultTime: '00:00:00',
        html5Types: {
            date: 'yyyy-MM-dd',
            'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss',
            'month': 'yyyy-MM'
        },
        initialPicker: 'date',
        reOpenDefault: false,
        enableDate: true,
        enableTime: true,
        //buttonBar: {
        //    show: true,
        //    now: {
        //        show: true,
        //        text: 'Now'
        //    },
        //    date: {
        //        show: true,
        //        text: 'Date'
        //    },
        //    time: {
        //        show: true,
        //        text: 'Time'
        //    },
        //    close: {
        //        show: true,
        //        text: 'Close'
        //    }
        //},
        closeOnDateSelection: true,
        closeOnTimeNow: true,
        appendToBody: false,
        altInputFormats: [],
        ngModelOptions: {},
        saveAs: false,
        readAs: false,
    });

//other code

    }

Solution

  • After long time spend just found a way but this is not a globall . just added this line button-bar="{{false}}" in input element.

    Code

    <p class="input-group">
                                            <input type="text" class="form-control ng-valid ng-isolate-scope ng-valid-datetime ng-dirty ng-touched ng-not-empty"
                                                   datetime-picker="HH:mm" ng-model="range.endTime"
                                                   is-open="range.dEndTime" enable-date="false" 
                                                   button-bar="{{false}}" readonly>
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default" ng-click="controller.openCalendar($event,range,2)"><i class="fa fa-clock-o"></i></button>
                                            </span>
    
                                        </p>
    

    After problem solved