ghusse / jQRangeSlider

A jquery UI range selection slider that supports dates
http://ghusse.github.com/jQRangeSlider/
GNU General Public License v3.0
670 stars 147 forks source link

formatter not working and shows 1492475587941 if a new slider is added. #229

Closed adeel-sohail closed 6 years ago

adeel-sohail commented 6 years ago

I have a button on my page on which clicking add a slider to my div. I am having multiple sliders there. It was working fine but now iw ant to use the formatter to format my date label. On first slider after clicking it is adding slider but if i want to add another sldier it give me error on . var days = val.getDate(), after inspecting i noticed that val is getting the value 1492475587941. Is there any solution for this ?

This is my code to add the slider.

on Clicking it goes to this function : ` function add_slider() {

var html = '';

html += '<div class="timescale"></div>';

$('#slider_to_add').append(html);
initDateRange();

}`

And this is my initDateRange function :

initDateRange: function () {
        monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        var self = this, startVal, endVal, middle = Math.round((this._Labels.length - 1) / 2);
        startVal = this._Labels[middle - 10];
        endVal = this._Labels[middle + 10];
        $(".timescale").dateRangeSlider({
            bounds: {min: new Date(self._startDate), max: new Date(self._endDate)},
            defaultValues: {min: new Date(startVal), max: new Date(endVal)},
            scales: [{
                first: function (value) {
                    return value;
                },
                end: function (value) {
                    return value;
                },
                next: function (value) {
                    var next = new Date(value);
                    return new Date(next.setMonth(value.getMonth() + 1));
                },
                label: function (value) {
                    return monthNames[value.getMonth()];
                },
                format: function (tickContainer, tickStart, tickEnd) {
                    tickContainer.addClass("myCustomClass");
                }
            }],
            formatter:function(val){
                var days = val.getDate(),
                    month = val.getMonth() + 1;

                return days + "/" + month;
            }
        });

    },