Angular js Datepicker和jquery

问题描述 投票:0回答:1

我想要一个只显示月份和年份选项的日历,格式应该是月份和年份(yyyy-mm)。选择月份和年份后,应该用上述格式更新ng-model变量值(yyyy-mm)我已经在angularjs文件中尝试了多个jquery ui-datepicker但是没有成功。请帮帮我。

angularjs jquery-ui-datepicker uidatepicker
1个回答
0
投票

这个带有bootstrap日期选择器的指令可以提供帮助。

Bootstrap网址:https://github.com/Eonasdan/bootstrap-datetimepicker

版本:4.17.37

directives.directive("pedDatepicker", function () {
        return {
            restrict: 'A',
            require: "ngModel",
            link: function (scope, element, attrs, ngModelCtrl) {
                element.datetimepicker({
                    format: 'MM/YYYY',
                    useCurrent: false,
                    useStrict: true,
                    maxDate: 'now',
                    ignoreReadonly: false,  
                })
                  .on("dp.change", function (e) {
                      scope.dateValid = moment(e.date).format("MM/YYYY");
                      ngModelCtrl.$setViewValue(moment(e.date).format("MM/YYYY"));
                      scope.$apply();
                  })
                  .on("blur", function (e) { 
                    if(ngModelCtrl.$modelValue && ngModelCtrl.$modelValue.length === 7 && moment(ngModelCtrl.$modelValue,'MM/YYYY').isValid()){
                          scope.dateValid = ngModelCtrl.$modelValue;
                           ngModelCtrl.$setViewValue(ngModelCtrl.$modelValue);
                           scope.$apply();
                          } else {
                            if(scope.dateValid) {
                                ngModelCtrl.$setViewValue(scope.dateValid);
                            } else {
                            ngModelCtrl.$setViewValue();    
                            }
                           scope.$apply(); 
                        }
                  });  
            },
        };
    });   
© www.soinside.com 2019 - 2024. All rights reserved.