var ComponentsDateTimePickers = function () {



    var handleDatePickers = function () {



        if (jQuery().datepicker) {

            $('.date-picker').datepicker({

                rtl: App.isRTL(),

                orientation: "left",

                autoclose: true

            });

            //$('body').removeClass("modal-open"); // fix bug when inline picker is used in modal

        }



        /* Workaround to restrict daterange past date select: http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker */

    }



    var handleTimePickers = function () {



        if (jQuery().timepicker) {

            $('.timepicker-default').timepicker({

                autoclose: true,

                showSeconds: true,

                minuteStep: 1

            });



            $('.timepicker-no-seconds').timepicker({

                autoclose: true,

                minuteStep: 5

            });



            $('.timepicker-24').timepicker({

                autoclose: true,

                minuteStep: 5,

                showSeconds: false,

                showMeridian: false

            });



            // handle input group button click

            $('.timepicker').parent('.input-group').on('click', '.input-group-btn', function(e){

                e.preventDefault();

                $(this).parent('.input-group').find('.timepicker').timepicker('showWidget');

            });

        }

    }



    var handleDateRangePickers = function () {

        if (!jQuery().daterangepicker) {

            return;

        }



        $('#defaultrange').daterangepicker({

                opens: (App.isRTL() ? 'left' : 'right'),

                format: 'MM/DD/YYYY',

                separator: ' to ',

                startDate: moment().subtract('days', 29),

                endDate: moment(),

                minDate: '01/01/2012',

                maxDate: '12/31/2018',

            },

            function (start, end) {

                $('#defaultrange input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

            }

        );        



        $('#defaultrange_modal').daterangepicker({

                opens: (App.isRTL() ? 'left' : 'right'),

                format: 'MM/DD/YYYY',

                separator: ' to ',

                startDate: moment().subtract('days', 29),

                endDate: moment(),

                minDate: '01/01/2012',

                maxDate: '12/31/2018',

            },

            function (start, end) {

                $('#defaultrange_modal input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

            }

        );  



        // this is very important fix when daterangepicker is used in modal. in modal when daterange picker is opened and mouse clicked anywhere bootstrap modal removes the modal-open class from the body element.

        // so the below code will fix this issue.

        $('#defaultrange_modal').on('click', function(){

            if ($('#daterangepicker_modal').is(":visible") && $('body').hasClass("modal-open") == false) {

                $('body').addClass("modal-open");

            }

        });



        $('#reportrange').daterangepicker({

                opens: (App.isRTL() ? 'left' : 'right'),

                startDate: moment().subtract('days', 29),

                endDate: moment(),

                minDate: '01/01/2012',

                maxDate: '12/31/2014',

                dateLimit: {

                    days: 60

                },

                showDropdowns: true,

                showWeekNumbers: true,

                timePicker: false,

                timePickerIncrement: 1,

                timePicker12Hour: true,

                ranges: {

                    'Today': [moment(), moment()],

                    'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],

                    'Last 7 Days': [moment().subtract('days', 6), moment()],

                    'Last 30 Days': [moment().subtract('days', 29), moment()],

                    'This Month': [moment().startOf('month'), moment().endOf('month')],

                    'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]

                },

                buttonClasses: ['btn'],

                applyClass: 'green',

                cancelClass: 'default',

                format: 'MM/DD/YYYY',

                separator: ' to ',

                locale: {

                    applyLabel: 'Apply',

                    fromLabel: 'From',

                    toLabel: 'To',

                    customRangeLabel: 'Custom Range',

                    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],

                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

                    firstDay: 1

                }

            },

            function (start, end) {

                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

            }

        );

        //Set the initial state of the picker label

        $('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

    }



    var handleDatetimePicker = function () {



        if (!jQuery().datetimepicker) {

            return;

        }



        $(".form_datetime").datetimepicker({

            autoclose: true,

            isRTL: App.isRTL(),

            format: "dd MM yyyy - hh:ii",

            pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left")

        });



        $(".form_advance_datetime").datetimepicker({

            isRTL: App.isRTL(),

            format: "dd MM yyyy - hh:ii",

            autoclose: true,

            todayBtn: true,

            startDate: "2013-02-14 10:00",

            pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left"),

            minuteStep: 10

        });



        $(".form_meridian_datetime").datetimepicker({

            isRTL: App.isRTL(),

            format: "dd MM yyyy - HH:ii P",

            showMeridian: true,

            autoclose: true,

            pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left"),

            todayBtn: true

        });



        $('body').removeClass("modal-open"); // fix bug when inline picker is used in modal

    }



    var handleClockfaceTimePickers = function () {



        if (!jQuery().clockface) {

            return;

        }



        $('.clockface_1').clockface();



        $('#clockface_2').clockface({

            format: 'HH:mm',

            trigger: 'manual'

        });



        $('#clockface_2_toggle').click(function (e) {

            e.stopPropagation();

            $('#clockface_2').clockface('toggle');

        });



        $('#clockface_2_modal').clockface({

            format: 'HH:mm',

            trigger: 'manual'

        });



        $('#clockface_2_modal_toggle').click(function (e) {

            e.stopPropagation();

            $('#clockface_2_modal').clockface('toggle');

        });



        $('.clockface_3').clockface({

            format: 'H:mm'

        }).clockface('show', '14:30');

    }



    return {

        //main function to initiate the module

        init: function () {

            handleDatePickers();

            handleTimePickers();

            handleDatetimePicker();

            handleDateRangePickers();

            handleClockfaceTimePickers();

        }

    };



}();



if (App.isAngularJsApp() === false) { 

    jQuery(document).ready(function() {    

        ComponentsDateTimePickers.init(); 

    });

}