Can we format the model output?

[pavan2540]

Need to use the ComboDatePicker for user Date of Birth, so i do not want to store the zulu time but only the date.

eg. 1977-06-01T22:00:00.000Z to 1977-06-01

Is this possible through some format attribute on the ng-combo-date-picker directive without modifying the model with a filter after its populated?

[jfmdev]

Hi Pavan,

For displaying the date in a nice format, you can use the Angular Date Filter.

For example:

<script type="text/javascript">
    app.controller('basicCtrl', function ($scope) {
        $scope.basic = new Date();
    });
</script>
<div ng-controller="basicCtrl">
    <p>Choose a date: <ng-combo-date-picker ng-model="basic"></ng-combo-date-picker></p>
    <p>Current selection is: <strong ng-bind="basic | date:'MM/dd/yyyy'"></strong><p/>
</div>

And if you want to convert the Date object into an string (in order to use it on an AJAX, for example) you can use the methods of the Date class.

For example:

var myDate = $scope.basic.getFullYear() + "-" + ($scope.basic.getMonth()+1) + "-" + $scope.basic.getDate();

Regards

[rafialikhan]

Thanks for the reply. @jfmdev

However, what Pavan was asking is, if we can pass some attribute to the ng-combo-date-picker to format the date which is loaded into the model "basic".

eg. solution: <ng-combo-date-picker ng-model="basic" ng-date-filter="MM/dd/yyy">

so that the ngComboDatePicker itself returns the formatted value instead of a zulu format.

Reason: We create user forms which are being dynamically generated using angular-schema-forms and then send back to the server without any angular controller (code) intervention through dynamic restangular apis.

Want to avoid any code intervention using Angular Date filter or Date Class only for the ngComboDatePicker before saving.

Scenario: We use calendars for capturing most dates which returns zulu dates/formatted dates. But specific dates like Date of Birth etc we felt using ngComboDatePicker (UX wise - with 3 simple drop downs) makes more sense than a calendar. But the zulu format means having to intervene either in the frontend or backend to reformat the same before saving it, this would mean a lot of special customization for just one field.

Of course while displaying any date field as text, we do use angular filters to format the view, but while storing we want to avoid this especially for Date of Births and other such date fields where the timestamp is of literally no value.

Your thoughts!

[jfmdev]

Hi Rafi,

I understand what you say, unfortunately that method do not exists and I have no plans on adding it (it would be much complex to change the type of of the ngModal variable, and I don't much user cases besides the one you are describing).

I don't have experience with angular-schema-forms, but I have two ideas that may help you:

1) You can use an auxiliary variable for store a formatted version of the date:

<script type="text/javascript">
    app.controller('basicCtrl', function ($scope) {
        $scope.basic = new Date();
        $scope.birthDate = null;
        $scope.$watch('basic', function() {
            if($scope.basic) {
                $scope.birthDate = $scope.basic.getFullYear() + "-" + ($scope.basic.getMonth()+1) + "-" + $scope.basic.getDate();
            } else {
                $scope.birthDate = null;
            }
        }, true);
    });
</script>
<div ng-controller="basicCtrl">
    <p>Choose a date: <ng-combo-date-picker ng-model="basic"></ng-combo-date-picker></p>
    <p>Current selection is: <strong>{{ birthDate }}</strong><p/>
</div>

2) You can use the attributes ng-attrs-date, ng-attrs-month and ng-attrs-year in order to define the name attribute of each combo box, and then submit these values (year, month and date) by separate.

[rafialikhan]

Thanks @jfmdev for the detailed reply and appreciate your suggestions. Maybe we can do a fork and add this feature and suggest a pull request at a later date.

The reason why the $watch method wont work in the angular-schema-form scenario is that the model object eg. basic will be dynamic / nested object.

(eg. company.department.employee.dob and so on) and defined by a schema-form object which is dynamically generated.

We may in future replace the calendar entirely with ngComboDatePicker in the future as well, hence this would have been a great addition. For now, we will hack the backend to remove the timestamp.

Thanks again.