Angular js Datepicker and jquery

Question

I want a calendar which shows only month and year option to display and format should be month and year (yyyy-mm).After selecting the month and year,it should update the ng-model variable value with the mentioned format (yyyy-mm).I have tried multiple jquery ui-datepicker in angularjs file but couldn't succeed.Please help me out.

Answer 1

This directive with bootstrap date picker can help.

Bootstrap URL: https://github.com/Eonasdan/bootstrap-datetimepicker

Version : 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(); 
                        }
                  });  
            },
        };
    });