text: 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(),
                  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')],
                      'This Year': [moment().startOf('year'), moment().endOf('year')],
                      'Last Year': [moment().subtract('year', 1).startOf('year'), moment().subtract('year', 1).endOf('year')],
                  },
                 // 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(); 
      });
  }