Save jQuery range slider data in ddmmyyy hh:mm:ss format using Web API in ASP.Net

Last Reply 10 days ago By dharmendr

Posted 10 days ago

How to save the date into database in datetime datatype in ddmmyyy hh:mm:ss from range slider

    //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 () {
        $("#slider-range").slider({
            range: true,
            min: new Date('01/01/2019').getTime(),
            max: new Date('01/12/2019').getTime(),
            step: 86400000,
            values: [new Date('01/03/2019').getTime(), new Date('01/06/2019').getTime()],
            slide: function (event, ui) {
                $("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
            },
            stop: function (event, ui) {
                debugger;
                $("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
                $.ajax({
                    data: { MinValue: formatDate(new Date(ui.values[0])), MaxValue: formatDate(new Date(ui.values[1])) },
                    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)))));
    });

 

<div>
    <p>
        <label for="amount">Month range:</label>
        <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold; width:30%">
    </p>
    <div id="slider-range"></div>                
</div>              

 

        [HttpPost]
        [ActionName("addMinMaxValues")]
        public int insertMinMaxDetails(rangeSlider rs)
        {
            SqlConnection myConnection = new SqlConnection();
            myConnection.ConnectionString = ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString;
            SqlCommand sqlCmd = new SqlCommand();
            DateTime now = DateTime.Now;
            sqlCmd.CommandType = CommandType.StoredProcedure;
            sqlCmd.CommandText = "INSERT_RANGE_SLIDER";
            sqlCmd.Connection = myConnection;
            sqlCmd.Parameters.AddWithValue("@MinValue", rs.MinValue);
            sqlCmd.Parameters.AddWithValue("@MaxValue", rs.MaxValue);         
            myConnection.Open();
            int rowInserted = sqlCmd.ExecuteNonQuery();
            myConnection.Close();
            return 1;
        }

 

You are viewing reply posted by: dharmendr 10 days ago.
Posted 10 days ago Modified on 10 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></title>
    <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('2019-12-31').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>
</head>
<body>
    <div>
        <p>
            <label for="amount">Month range:</label>
            <input type="text" id="amount" readonly style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider-range"></div><br />
        Start DateTime : <span id="lblStartDateTime"></span><br />
        End DateTime : <span id="lblEndDateTime"></span>
    </div>
</body>
</html>

Demo