javascript - 重构以减少 Controller 中 ionicDatePicker 和 ionicTimePicker 的代码重复

Question

我在两个不同的 Controller 中使用 ionicDatePicker 和 ionicTimePicker，但意识到这会导致大量代码重用。我怎样才能减少这个？

这是我到目前为止的代码:

function ConsumerBusinessProfileCtrl($scope, ionicDatePicker, ionicTimePicker, DatePickerService, TimePickerService) {

    // Booking time and date

    $scope.booking = {
      'date': DatePickerService.getDate(),
      'time': TimePickerService.getTime()
    }


    // Ionic datepicker

    $scope.openDatePicker = function(val) {

      var datePickerObject = {

        callback: function(val) {

          console.log('Return value from the datepicker popup is : ' + val, new Date(val));

          // Set new date

          var selectedDate = new Date(val);
          var dd = selectedDate.getDate();
          var mm = selectedDate.getMonth() + 1;
          var yyyy = selectedDate.getFullYear();

          if (dd < 10) {
            dd = '0' + dd
          }

          if (mm < 10) {
            mm = '0' + mm
          }

          $scope.booking.date = dd + '/' + mm + '/' + yyyy;
        },

        from: new Date(),
        inputDate: new Date(),
        closeOnSelect: false,
        templateType: 'popup',
        weeksList: ["S", "M", "T", "W", "T", "F", "S"],
      };

      ionicDatePicker.openDatePicker(datePickerObject);

    };


    // Ionic timepicker

    $scope.openTimePicker = function() {

      var timePickerObject = {

        step: 15, //Optional

        callback: function(val) {

          if (typeof(val) === 'undefined') {
            console.log('Time not selected');
          } else {
            var selectedTime = new Date(val * 1000);
            console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
          }

          // Set new time

          var selectedTime = new Date(val * 1000);
          var h = selectedTime.getUTCHours()
          var m = selectedTime.getUTCMinutes()

          $scope.booking.time = h + ":" + ("00" + m).slice(-2);

        },

        inputTime: TimePickerService.getRoundedTime(),
        format: 24

      };

      ionicTimePicker.openTimePicker(timePickerObject);

    }

function BusinessAddAppointmentCtrl($scope, ionicDatePicker, ionicTimePicker, DatePickerService, TimePickerService) {

  // Booking time and date

  $scope.booking = {
    'date': DatePickerService.getDate(),
    'time': TimePickerService.getTime()
  }


  // Ionic datepicker

  $scope.openDatePicker = function(val) {

    var datePickerObject = {

      callback: function(val) {

        console.log('Return value from the datepicker popup is : ' + val, new Date(val));

        // Set new date

        var selectedDate = new Date(val);
        var dd = selectedDate.getDate();
        var mm = selectedDate.getMonth() + 1;
        var yyyy = selectedDate.getFullYear();

        if (dd < 10) {
          dd = '0' + dd
        }

        if (mm < 10) {
          mm = '0' + mm
        }

        $scope.booking.date = dd + '/' + mm + '/' + yyyy;
      },

      from: new Date(),
      inputDate: new Date(),
      closeOnSelect: false,
      templateType: 'popup',
      weeksList: ["S", "M", "T", "W", "T", "F", "S"],
    };

    ionicDatePicker.openDatePicker(datePickerObject);

  };


  // Ionic timepicker

  $scope.openTimePicker = function() {

    var timePickerObject = {

      step: 15,

      callback: function(val) {

        if (typeof(val) === 'undefined') {
          console.log('Time not selected');
        } else {
          var selectedTime = new Date(val * 1000);
          console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
        }

        // Set new time

        var selectedTime = new Date(val * 1000);
        var h = selectedTime.getUTCHours()
        var m = selectedTime.getUTCMinutes()

        $scope.booking.time = h + ":" + ("00" + m).slice(-2);

      },

      inputTime: TimePickerService.getRoundedTime(),
      format: 24

    };

    ionicTimePicker.openTimePicker(timePickerObject);

  }

}

Answer 1

使用cordova datePicker Plugin相反，非常简单，如下所示

在 Controller 中，

var options = {
    date: new Date(),
    mode: 'date'
};

function onSuccess(date) {
    alert('Selected date: ' + date);
}

function onError(error) { // Android only
    alert('Error: ' + error);
}

datePicker.show(options, onSuccess, onError);