greatCodeIdeas / md-date-range-picker

Angular Material Date Range Picker Service/Directive
MIT License
62 stars 40 forks source link

Customisation of selected date #54

Closed kyblinh closed 6 years ago

kyblinh commented 6 years ago

Hi there, I am trying to use the date picker and I would like to have a different format when range is selected. (My users do not want to see english). I would like to have something like '05/11/2018 - 26/12/2018'.

I cannot see how i could customize it that way , i have been able to translate most of the calendar with the localizationMap but I cannot get this to work.

Could you tell me how to achieve this?

Code is pretty simple so far:

       <md-date-range
                ng-model="vm.filters.appointmentDateRange" localization-map="vm.localizationMap" >
            </md-date-range>

and

vm.localizationMap = {
            'Mon': 'Lu',
            'Tue': 'Ma',
            'Wed': 'Me',
            'Thu': 'Je',
            'Fri': 'Ve',
            'Sat': 'Sa',
            'Sun':'Dim',
            'This Week': 'Settimana corrente',
            "January": "Janvier",
            "February": "Février",
            "March": "Mars",
            "April": "Avril",
            "May": "Mai",
            "June": "Juin",
            "July": "Juillet",
            "August": "Aout",
            "September": "Septembre",
            "October": "Octobre",
            "November": "November",
            "December": "Decembre"
        };

        vm.filters =
        {
            appointmentDateRange: {
                //selectedTemplate: 'TY',
                //selectedTemplateName: 'Anno corrente',
                dateStart: new Date(),
                dateEnd: new Date(),
            }
        };

date 1 date 2

Thanks for the help and for the good work :)

roelbarreto commented 6 years ago

You can customize the date selection display https://ipiz.herokuapp.com/md-date-range-picker-demo/index.html Please see in Demo Advance


$scope.format = function (dateStart, dateEnd, template, templateName) {
  return dateStart && dateEnd && (dateStart.toLocaleDateString() + ' - ' + dateEnd.toLocaleDateString());
 }
<md-date-range format="format"></md-date-range>

image

kyblinh commented 6 years ago

Oh, i will do that. Sorry didn't see it... Thanks a lot!