Set jQuery Range Slider Max value as Current Month using JavaScript

Last Reply 27 days ago By dharmendr

Posted 27 days ago

I want to display the current month automatically when the month goes from one month to next month in the maximum range slider in jquery ui

Note: Current date is always 01

 //range slider in months
    function formatDate(date) {
        debugger;
        var monthNames = [
            "January", "February", "March",
            "April", "May", "June", "July",
            "August", "September", "October",
            "November", "December"
        ];
        var monthIndex = date.getMonth();
        var year = date.getFullYear();
        return monthNames[monthIndex] + ' ' + year;
    }
    function formatDateTime(dateTime) {
        var date = "01";
        var month = ("00" + (dateTime.getMonth() + 1)).slice(-2);
        var year = dateTime.getFullYear();
        var hour = ("00" + dateTime.getHours()).slice(-2);
        var minutes = ("00" + dateTime.getMinutes()).slice(-2);
        var seconds = ("00" + dateTime.getSeconds()).slice(-2);
        return date + "-" + month + "-" + year + " " + hour + ":" + minutes + ":" + seconds;
    }
    $(function () {        
        $("#slider-range").slider({
            range: true,
            min: new Date('2019-01-01').getTime() + 86400000,
            max: new Date('2019-12-01').getTime() + 86400000,
            step: 86400000,
            values: [new Date('2019-04-01').getTime(), new Date('2019-11-01').getTime()],
            slide: function (event, ui) {
                $("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
            },
            stop: function (event, ui) {
                debugger;
                var start = formatDateTime(new Date(ui.values[0]));
                var end = formatDateTime(new Date(ui.values[1]));
                $('#lblStartDateTime').html(start);
                $('#lblEndDateTime').html(end);
                //$("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
                $.ajax({
                    data: { MinValue: start, MaxValue: end },
                    type: "post",
                    url: apiUrl + "/api/Warehouse/addMinMaxValues",
                    success: function (data) {
                        //alert("Data Save: " + data);
                    }
                });
            }
        });
        $("#amount").val(formatDate((new Date($("#slider-range").slider("values", 0)))) +
          " - " + formatDate((new Date($("#slider-range").slider("values", 1)))));
    });

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold; width:100%">                            
<div id="slider-range"></div>

 

Posted 27 days ago

Hi skp,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Month Range Slider</title>
</head>
<body>
    <div>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            function formatDate(date) {
                var monthNames = ["January", "February", "March", "April", "May", "June", "July",
                                "August", "September", "October", "November", "December"];
                var monthIndex = date.getMonth();
                var year = date.getFullYear();
                return monthNames[monthIndex] + ' ' + year;
            }

            function formatDateTime(dateTime) {
                var date = ("00" + dateTime.getDate()).slice(-2);
                var month = ("00" + (dateTime.getMonth() + 1)).slice(-2);
                var year = dateTime.getFullYear();
                var hour = ("00" + dateTime.getHours()).slice(-2);
                var minutes = ("00" + dateTime.getMinutes()).slice(-2);
                var seconds = ("00" + dateTime.getSeconds()).slice(-2);
                return date + "-" + month + "-" + year + " " + hour + ":" + minutes + ":" + seconds;
            }

            $(function () {
                $("#slider-range").slider({
                    range: true,
                    min: new Date('2019-01-01').getTime() + 86400000,
                    max: new Date(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-01').getTime() + 86400000,
                    step: 86400000, // 1 Day
                    values: [new Date('2019-03-01').getTime(), new Date('2019-06-01').getTime()],
                    slide: function (event, ui) {
                        $("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
                    },
                    stop: function (event, ui) {
                        var start = formatDateTime(new Date(ui.values[0]));
                        var end = formatDateTime(new Date(ui.values[1]));
                        $('#lblStartDateTime').html(start);
                        $('#lblEndDateTime').html(end);
                        // Code to pass start and end to Web API.
                    }
                });
                $("#amount").val(formatDate((new Date($("#slider-range").slider("values", 0))))
                        + " - " + formatDate((new Date($("#slider-range").slider("values", 1)))));
            });
        </script>
        <input type="text" id="amount" readonly style="border: 0; color: #f6931f; font-weight: bold;
            width: 100%" />
        <div id="slider-range" style="width: 99%"></div>
        <br />Start DateTime : <span id="lblStartDateTime"></span>
        <br />End DateTime : <span id="lblEndDateTime"></span>
    </div>
</body>
</html>

Demo