jQuery UI Widgets › Forums › Editors › DateTimeInput › how to set the time

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  support 11 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    how to set the time Posts
  • March 12, 2013 at 2:57 am how to set the time #16752

    ryan paul
    Participant

    hi,
    how to set the time and date separately?
    if for example i have a “jqxDateTimeInput” with and id of “dateonly” that is use to store date only and i have a separate “jqxDateTimeInput” that is use to stort a time only with and id of “timeonly”,

    $(‘#dateonly’).jqxDateTimeInput({ width: 130, height: 25, formatString: ‘MM/dd/yyyy’, theme: ” });
    $(“#timeonly”).jqxDateTimeInput({ width: 130, height: 25, formatString: ‘HH:mm’, showCalendarButton: false, theme: ” });

    example i have a string “12:10” and i want this to store in the “timeonly”.
    is this possible?

    March 12, 2013 at 1:32 pm how to set the time #16805

    support
    Participant

    Hi ryan paul,

    In order to set the time and date separately you can use the formatString property and the setDate method afterwards.Here is an example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
           // create a jqxDateTimeInput.
                    $("#jqxDateTimeInput").jqxDateTimeInput({ width: '300px', height: '25px', formatString: 'HH:mm' });  
                
                    $('#jqxDateTimeInput').jqxDateTimeInput('setDate', new Date(2013, 6, 5, 12, 10, 00, 00));
                });
            </script>
             <div id='jqxDateTimeInput'>
                </div>
                <br />
             
        </div>
    </body>
    </html>

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.