I want to get the values of stop events in two conditions 1 Wanted to get the default values after page load2 Wanted to get the values after the user has stopped sliding to angularjsangularmodule39myApp39controller39efficiencyController39 function scope http sessionStorage window location useragent timeout interval range slider in months function formatDatedate debugger var monthNames 34January34 34Febru

Hi skpCheck below sample codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtMonth Range Sliderlttitlegt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularjs155angularjs34gtltscriptgt ltlink rel34stylesheet34 href34httpscodejquerycomui1121themesbasejqueryuicss34 gt ltscript type34textjavascript34 src34httpscodejquerycomjquery1124js34gtltscriptgt ltscript type34textjavascript34 src34httpscodejquerycomui1121jqueryuijs34gtltscriptgt ltscript type34textjavascript34gt var app angularmodule39MyApp39 appcontroller39MyController39 function scope window scopevalues new Date392019040139getTime new Datenew DategetFullYear 3939 new DategetMonth 1 3901

Access jQuery Range slider start and stop values in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Nov 18, 2019 03:05 AM
Forum: AngularJS
Answer: 1
Views: 3329
Sample Code: Download

I want to get the values of stop events in two conditions :

1. Wanted to get the default values after page load.

2. Wanted to get the values after the user has stopped sliding to angularjs.

angular.module('myApp').
controller('efficiencyController', function ($scope, $http, $sessionStorage, $window, $location, useragent, $timeout, $interval) {
    //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;
    }
    debugger;
    $scope.values = [new Date('2019-04-01').getTime(), new Date(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-01').getTime()]
    $scope.start = formatDateTime(new Date($scope.values[0]));
    $scope.end = formatDateTime(new Date($scope.values[1]));
    $(function () {
        $scope.range = {};
        $("#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(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-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)))));
    }); 
});

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Nov 18, 2019 05:46 AM
Report

Hi skp,

Check below sample code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Month Range Slider</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <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">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope, $window) {
            $scope.values = [new Date('2019-04-01').getTime(), new Date(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-01').getTime()]
            $scope.start = formatDateTime(new Date($scope.values[0]));
            $scope.end = formatDateTime(new Date($scope.values[1]));
            $("#slider-range").slider({
                range: true,
                min: new Date('2019-01-01').getTime() + 86400000,
                max: new Date('2019-12-01').getTime() + 86400000,
                step: 86400000, // 1 Day
                values: $scope.values,
                slide: function (event, ui) {
                    $("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
                },
                stop: function (event, ui) {
                    $scope.start = formatDateTime(new Date(ui.values[0]));
                    $scope.end = formatDateTime(new Date(ui.values[1]));
                    $('#lblStartDateTime').html($scope.start);
                    $('#lblEndDateTime').html($scope.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)))));

            $scope.CheckValue = function () {
                $window.alert('Start : ' + $scope.start + '\nEnd : ' + $scope.end);
            }
        });

        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;
        }
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <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><br />
        <input type="button" ng-click="CheckValue()" value="Check Value" />
    </div>
</body>
</html>

Demo

Access jQuery Range slider start and stop values in AngularJS

Company

Explore

Follow us

Contact Us