Click here to Skip to main content
15,879,864 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello. I have problem with slider in jquery. I need prepare slider for date an time but i don't know how it make. Below my code. Someone have idea how change my slider for date and time on format (YYYY-MM-DD h:mm) .

JavaScript
var minVal, maxVal, infoMin, infoMax, data1, data2;
           data1 = '2016-02-10 10:36'
           data2 = '2016-02-11 13:47'
           minVal = '10:36';
          maxVal = '13:47';
          minVal = parseInt(minVal.substring(0, 2) * 60) + parseInt(minVal.substring(3, 5))
          maxVal = parseInt(maxVal.substring(0, 2) * 60) + parseInt(maxVal.substring(3, 5))

           jQuery(function () {
              jQuery('#slider-time').slider({
                   range: true,
                       min: parseInt(minVal),
                       max: parseInt(maxVal),
                       step: 1,
                       values: [minVal,maxVal],
                       slide: function (event, ui) {

                       var hours1 = Math.floor((ui.values[0]) / 60) ;
                            var minutes1 = (ui.values[0] - (hours1 * 60));

                            if (hours1 == 0)
                           { hours1 = '0' + hours1; }
                           else if (hours1<10)
                           {hours1= '0' + hours1;}
                            if (minutes1 == 0)
                            { minutes1 = '00'; }
                            else if (minutes1 < 10)
                            { minutes1 = '0' + minutes1;}

                         var hours2 = Math.floor(ui.values[1] / 60) ;
                      var minutes2 = ui.values[1] - (hours2 * 60);

                        if (hours2 == 0)
                        { hours2 = '0' + hours2; }
                        else if (hours2 < 10)
                        { hours2 = '0' + hours2; }
                        if (minutes2 == 0)
                        { minutes2 = '00'; }
                       else if (minutes2 < 10)
                        { minutes2 = '0' + minutes2; }
                         if (minutes2 == 0)
                          minutes2 = '00';

                      $('#tb3').val(hours1 + ':' + minutes1+':00')
                      $('#tb4').val(hours2 + ':' + minutes2 + ':00')
                   }
               });
           });


ASP.NET
<div id="slider-time"></div>
<asp:TextBox ID="tb3" runat="server"></asp:TextBox>
<asp:TextBox ID="tb4" runat="server"></asp:TextBox>


What I have tried:

Added before an hour date but i can't change date and time together.
Posted
Updated 10-Mar-16 19:19pm
Comments
Karthik_Mahalingam 10-Mar-16 12:46pm    
what is the issue?
sokkkol 10-Mar-16 12:52pm    
I dont know how add to slider information about date which will be changing with slider . I have only information about hours and minutes.
Karthik_Mahalingam 11-Mar-16 1:46am    
you have to write some algorithm for that, better you can search for some free open source widget which is available online.

1 solution

Why don't you go for date time picker ... ???
 
Share this answer
 
Comments
Karthik_Mahalingam 11-Mar-16 1:45am    
Hi Sehar
Please post your queries/comments under the comments sections (below the question).
User Solution block, once you have the solution for that question.
Thanks.
sokkkol 11-Mar-16 2:44am    
Hello, The problem is that sometimes my slider will be between date and time (min 2016-02-10 16:00- max 2016-02-16 11:00), sometimes between only time (min 2016-02-10 16:00- max 2016-02-10 18:43).Users can't set other date than is between slider border.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900