locked
Add time picket to existing jquery datepicker RRS feed

  • Question

  • User810354248 posted

    I am using this date picker and it works fine. 

     <script type="text/javascript">
              $(document).ready(function () {
                  $('#<%= timetxt.ClientID%>').datepicker({
                  dateFormat: 'dd-mm-yy',
                  changeMonth: true,
                  changeYear: true
              });
          });
    </script>

    Now in another web page i want to add date and time through picker

    tried various options but not able to proceed.

    Monday, January 11, 2021 8:31 AM

Answers

  • User-1716253493 posted

    Use class instead

    change #dtpicker to .dtpicker then set cssclass of the textbox

        <script>
            $(document).ready(function () {
                $(".dtpicker").datetimepicker({
                    format: 'Y-m-d H:i:s',
                    step: 15
                })
            })
        </script>
    <asp:TextBox ID="timetxt" runat="server" 
    CssClass="dtpicker" AutoCompleteType="Disabled" Width="80px"></asp:TextBox>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 17, 2021 9:18 PM

All replies

  • User-775646050 posted

    Are you using jQuery UI? If so maybe you can try this time picker addon: https://github.com/trentrichardson/jQuery-Timepicker-Addon

    You could also try this one:

    https://flatpickr.js.org/examples/ 

    I would make sure to pick a date picker library that does everything I want before I commit to one.

    Monday, January 11, 2021 5:25 PM
  • Monday, January 11, 2021 7:14 PM
  • User-939850651 posted

    Hi Baiju EP,

    If you want to select the time and date at the same time, you can try the datetimepicker plugin.

    For example, the jquery datetimepicker mentioned by other members, here is a simple demo(Set the time interval to 15 minutes):

    <head runat="server">
        <title></title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#dtpicker").datetimepicker({
                    format: 'Y-m-d H:i:s',
                    step: 15
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input type="text" name="dtpicker" id="dtpicker" />
            </div>
        </form>
    </body>

    Result:

    Hope this can help you.

    Best regards,

    Xudong Peng

    Thursday, January 14, 2021 7:26 AM
  • User810354248 posted

    its working if i use  this

     <input type="text" name="dtpicker" id="dtpicker" />

    But i am using 

    <asp:TextBox ID="dtpicker" runat="server" AutoCompleteType="Disabled" Width="80px"></asp:TextBox>

    dtpicker i snot working in text box

    i changed like this also

    <asp:TextBox ID="timetxt" runat="server" AutoCompleteType="Disabled" Width="80px"></asp:TextBox>

    Sunday, January 17, 2021 4:13 PM
  • User475983607 posted

    The selector you used to assign the datetime picker is probably wrong.   ASP.NET Web Forms generates unique IDs so you have to get the control's ClientID.

    $("#<%=dtpicker.ClientID %>").datetimepicker({

    Sunday, January 17, 2021 4:24 PM
  • User-1716253493 posted

    Use class instead

    change #dtpicker to .dtpicker then set cssclass of the textbox

        <script>
            $(document).ready(function () {
                $(".dtpicker").datetimepicker({
                    format: 'Y-m-d H:i:s',
                    step: 15
                })
            })
        </script>
    <asp:TextBox ID="timetxt" runat="server" 
    CssClass="dtpicker" AutoCompleteType="Disabled" Width="80px"></asp:TextBox>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 17, 2021 9:18 PM