locked
jquery date range slider in javascript RRS feed

  • Question

  • I
    have a requirement where slider has a range for 01-JAN-2013 to 31-MAR-2014.
    When i move the slider it should move for 3 months.
    For eg..
    If i move the slider and if the start date is 03-JAN-13 then the scroll bar end
    date should be 02-APR-13.
    It should not let me to expand/drag more than 02-APR-2013 or less than 03-JAN-13.
    Only the scroll bar should be moved with the 3months range.
    Next when i move and start  date is 15-JAN-13 then the scroll bar end date should
    be 14-APR-13.
    as mentioned above.

    It will be helpful if someone can help or provide me the code.

    Below is the code. Kindly let me know what change do I need to do in code or provide me the sample code.

    -----------------------

    function

    SetRangeSlider(year) {

           

    varmonths = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];

            $(

    "#slider").dateRangeSlider({

                bounds: { min:

    newDate(year[0], 0, 1), max: newDate(year[1], 2, 31,12,59,59) },

    defaultValues: { min:

    newDate(year[0], 0, 1), max: newDate(year[0], 2, 31) },

              

    // range: { min: new Date(year[0], 0, 1), max: new Date(year[0], 2, 30) },


               

    //defaultValues: { min: new Date(2013, 0, 1), max: new Date(2013, 3, 1) },


                    step: {

                        months: 3,

                       

    //days: 1


                    },

                scales: [{

                    first:

    function(value) { returnvalue; },

                    end:

    function(value) { returnvalue; },

                    next:

    function(value) {

                       

    varnext = newDate(value);

                       

    returnnewDate(next.setMonth(value.getMonth() + 1 ) );

                    },

                    label:

    function(value) {

                       

    returnmonths[value.getMonth()];

                    }

                   

    //width:300,


                }],

                constraint: {

                    min:

    newDate(year[0], 0, 1),

                    max:

    newDate(year[0], 2, 31)

                },

                range: {

                    min: { days: 0 },

                    max: { days: 90 }

                }

               

            });

        }


    Thursday, September 19, 2013 5:33 AM