Different prettify functions for grid, min-max and label !

[ncoquelet]

Hi, Thanks for your great plugins, I used jqrangeslider before but i tried to replace it by yours that looks much better :+1:

One request : Our app uses one slider with two handlers to control a time period. The prettify function seems to by applied for all prettify operations, but it's more appreciable that each part has its function.

Example :

// default function
prettify: function (num) {
    return moment(num, "X").format("ll");
},
// specific for min_max
min_max_prettify: function(num) {
    return moment(num, "X").format("LL");
},
// more complicated for grid
grid_prettify: function(num) {
    var date = moment(num, "X");
    if (date.isoWeek() == 1) {
        return moment(num, "X").format("YYYY");
    } else {
        return moment(num, "X").format("[W]WW");
    }
}

If a specific pretiffy function aren't present it use the default behaviour.

Do you have a workaround for that ? Thanks a lot

[IonDen]

Hello, now there is only one prettify function. But idea is great and i added this to developement plan.

[ncoquelet]

Thanks for your response.

Another approch is to pass a context with the prettify num param, with the part we are to prettify : grid, min-max or label. We can also differenciate min and max or from label and to label.

In my case, our selection step is the week. For the users understanding, all selected dates are inclusives. exemple : sept 14, 2015 to 20 sept, 2015 or sept 7, 2015 to sept 13, 2015.

It can be little tricky to implements it in the rangeslider code, so for the moment, with week as step, our current selection is : sept 14, 2015 to 21 sept, 2015 But with context, only for the to label, we can virtualy decrease the date by one day and display it !

Here an example of the current state http://jsfiddle.net/b453y0fu/6/

[IonDen]

A little hard to understand. Maybe you can create some illustration?

[ncoquelet]

Hello,

To keep my example, only one function, with an additional ctx param. No need to implement new function each time and more powerful with 5 cases

prettify: function (num, ctx) {

   if (ctx.type == "min_max") {
      return moment(num, "X").format("LL");
   } else if (ctx.type == "grid") {
      var date = moment(num, "X");
      if (date.isoWeek() == 1) {
         return moment(num, "X").format("YYYY");
      } else {
         return moment(num, "X").format("[W]WW");
      }
   } else if (ctx.type == "label" && ctx.part == "to") {
      // our specific case, only on the "to" label
      return moment(num, "X").minusday(1).format("ll");
   } else {
      return moment(num, "X").format("ll");
   }
}

The ctx params is a js object. Its typeattribute take 'grid', 'min_max' or 'label' value. And part attribute is used to detail the current type.

// grid context
ctx = {
   type: 'grid'
}
// min label context
ctx = {
   type: 'min_max',
   part:  'min'
}
// max label context
ctx = {
   type: 'min_max',
   part:  'max'
}
// from label context
ctx = {
   type: 'label',
   part:  'from'
}
// to label context
ctx = {
   type: 'label',
   part:  'to'
}

[IonDen]

Ok, i understend your idea. I will think how to make it the best way.

[y01689]

so ,what is the solution about this issue "Different prettify functions " today ?

[IonDen]

@pangniur, basically, until 3.0 is under development, you can do it this way: http://jsfiddle.net/93dg8yL4/