locked
Data and Time calender RRS feed

  • Question

  • User-1578974752 posted

    Below is my calender. Can I add Time also to this calendar? Appreciate the help

      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>

    $( function() {
                 //today=new Date(1000*today);
             var dateFormat = "mm/dd/yy",
              from = $("#from_filter")
                .datepicker({
                  defaultDate: "+0w",
                  changeMonth: false,
                  numberOfMonths: 1
                })
                .on( "change", function() {
                  to.datepicker( "option", "minDate", getDate( this ) );
                }),
              to = $( "#to_filter" ).datepicker({
                defaultDate: "+0w",
                changeMonth: false,
                numberOfMonths: 1
              })

              .on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
              });
             function getDate( element ) {
              var date;
              try {
                date = $.datepicker.parseDate( dateFormat, element.value );
              } catch( error ) {
                date = NULL;
              }

              return date;
             }
             } );
             $('.from_icon').click(function(){
              $("#from_filter").datepicker("show");

             });
               $('.to_icon').click(function(){
              $("#to_filter").datepicker("show");

             });

    Wednesday, June 26, 2019 8:42 AM

Answers

  • User665608656 posted

    Hi shsu,

    According to your description and code you provided, the datepicker plug-in can't directly display the specific time.

    I recommend you can choose TimePicker plug-in in bootstrap to achieve your function.

    You could refer to this link: https://coderwall.com/p/muwupg/datepicker-with-time-timepicker-jquery-ui

    For more details,you could refer to the following code:

    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
        <title></title>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" media="screen"
            href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" />
    </head>
    <body>
        <div id="datetimepicker" class="input-append date">
            <input type="text" />
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>
        <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script>
        <script type="text/javascript"
            src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $('#datetimepicker').datetimepicker({
                format: 'dd/MM/yyyy hh:mm:ss', 
            });
        </script>
    </body>
    </html>
    

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 26, 2019 10:00 AM

All replies

  • User-821857111 posted

    The standard jQuery calendar doesn't support picking a time, but there are lots of other third party jQuery libraries that do. 

    https://www.google.com/search?q=jquery+time+calendar

    Wednesday, June 26, 2019 8:49 AM
  • User665608656 posted

    Hi shsu,

    According to your description and code you provided, the datepicker plug-in can't directly display the specific time.

    I recommend you can choose TimePicker plug-in in bootstrap to achieve your function.

    You could refer to this link: https://coderwall.com/p/muwupg/datepicker-with-time-timepicker-jquery-ui

    For more details,you could refer to the following code:

    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
        <title></title>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" media="screen"
            href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" />
    </head>
    <body>
        <div id="datetimepicker" class="input-append date">
            <input type="text" />
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>
        <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script>
        <script type="text/javascript"
            src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $('#datetimepicker').datetimepicker({
                format: 'dd/MM/yyyy hh:mm:ss', 
            });
        </script>
    </body>
    </html>
    

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 26, 2019 10:00 AM
  • User-1578974752 posted

    Thank you

    After adding ,below code the textbox alignment and look become different. I just need the text box and calendar only with out effecting my current format in the form.

    Thanks

     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" />

    Another point : When I place the div inside a panel ,the calendar is not showing.

    <div id="datetimepicker" class="input-append date"> <input type="text" /> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div>

    Thursday, June 27, 2019 4:13 AM
  • User665608656 posted

    Hi shsu,

    According to your description, If you don't want to change your format, I suggest you don't use this method, because it's a bootstrap encapsulated control.

    If you delete the style reference of bootstrap, it will cause the control to not work properly.

    So, I recommend that you use another method, using jQuery to monitor your textbox changes on the basis of your original datepicker plug-in.

    When you select a date, you use jQuery to get the specific time and seconds of the current time and add them to the text box date selection.

    For more details , you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <link href="../jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
        <script src="../jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#datepicker").datepicker();
                $("#datepicker").change(function () {
                    var date = new Date();
                    var h = date.getHours();
                    var mm = date.getMinutes();
                    var s = date.getSeconds();
                    $("#datepicker").val($("#datepicker").val() + " " + h + ":" + mm + ":" + s);
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
            </div>
        </form>
    </body>
    </html>

    The result of this work demo:

    Best Regards,

    YongQing.

    Thursday, June 27, 2019 7:00 AM
  • User-1578974752 posted

    $ script tag is undefined error is coming . Thanks

    Thursday, June 27, 2019 7:42 AM
  • User665608656 posted

    Hi shsu,

    This reminds you of the lack of references to jQuery files.

    You can add these three references to your page to ensure that they work properly.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>

    Best Regards,

    YongQing.

    Thursday, June 27, 2019 8:36 AM
  • User-1578974752 posted

    I am still getting the error. What is wrong here.Thanks

    <head runat="server">
        <title></title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <link href="../jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
        <script src="../jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#datepicker").datepicker();
                $("#datepicker").change(function () {
                    var date = new Date();
                    var h = date.getHours();
                    var mm = date.getMinutes();
                    var s = date.getSeconds();
                    $("#datepicker").val($("#datepicker").val() + " " + h + ":" + mm + ":" + s);
                });
            });
        </script>

    </head>
    <body>
        <form id="form1" runat="server">
            <div>
           <div>
                <asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
            </div>
     

            </div>
        </form>
    </body>
    </html>

    Thursday, June 27, 2019 9:16 AM
  • User665608656 posted

    Hi shsu,

    According to your code , 

    <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <link href="../jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
        <script src="../jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

    the three reference is my local file, you can't directly refer to it.

    I suggest you should delete the three reference and only refer to the three files above like this:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#datepicker").datepicker();
                $("#datepicker").change(function () {
                    var date = new Date();
                    var h = date.getHours();
                    var mm = date.getMinutes();
                    var s = date.getSeconds();
                    $("#datepicker").val($("#datepicker").val() + " " + h + ":" + mm + ":" + s);
                });
            });
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div>
                    <asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
                </div>
    
    
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    YongQing.

    Thursday, June 27, 2019 10:07 AM
  • User-1578974752 posted

    Done as above ,But still

    the below error is showing

    Object doesn't support property or method 'datepicker'

    Friday, June 28, 2019 2:22 AM
  • User665608656 posted

    Hi shsu,

    Please ensure your page only refer to the three reference I have privded you above, this error is due to the jQuery file references on your page.

    The code works well on my side. Or you can give me more detailed code.

    You can refer to this link: https://forums.asp.net/t/1959496.aspx?JavaScript+runtime+error+Object+doesn+t+support+property+or+method+datepicker+

    Best Regards,

    YongQing.

    Friday, June 28, 2019 5:06 AM