Problem in arrangement date and time

HTML & CSS
1

Hi,I need some help please I am using datepicker bootstrap and datetimepicker plugins for my time,…Can you help me please how do i put my date before the time…

I want to be like this

startdatetextfield enddatetextfield startimetextfield endtimetextfield buttonclick

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <link type="text/css" href="css/bootstrap.css" rel="stylesheet"/>
    <link type="text/css" href="css/datepicker.css" rel="stylesheet"/>
    <link type="text/css" href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>


</head>
<body>

<form method="post" class="form-inline" role="form" id="showform">
    



    <div class="form-group">
        <label class="sr-only" for="sd1" class="col-sm-2 control-label">Start date</label>

        <div class="col-sm-10">
            <input type="text" class=" form-control" id="sd1" name="sd1" placeholder="Start date">
        </div>
    </div>

    <div class="form-group">
        <label class="sr-only" for="sd2" class="col-sm-2 control-label">End date</label>

        <div class="col-sm-10">
            <input type="text" class="form-control" id="sd2" name="sd2" placeholder="End date">
        </div>
    </div>

    <div class="col-sm-2">
        <div class="input-group date timepicker1 col-sm-10" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">

            <input class="form-control" size="16" id="start_time" name="start_time" type="text" value="" readonly placeholder="Start time">

            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
        </div>
    </div>



    <div class="col-sm-2">
        <div class="input-group date timepicker2 col-sm-10" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">

            <input class="form-control" size="16" id="end_time" name="end_time" type="text" value="" readonly placeholder="End time">

            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
        </div>
    </div>

    <button type="button" id="show"  class="btn btn-primary">Click</button>
</form>


</body>
</html>

Thank you in advance.

2

Is this a CSS question or a JS question? Are you talking about the placement of the elements through CSS or the implementation of the datepicker scripts through js?

In the html your dates seem to be in the order that you want so I’m a little confused :slight_smile: (A live link would help)

3

HI paul,

Thank you for the reply…I am talking about the placement elements…if you tried to run that in browser the time will be in the first order,but i want to my date will be on the first order.

Thank you in advance.

4

When I run your code above I get the inputs stacked vertically in the order you asked for :

Start Date
Start Date input
End Date
End Date input
Start Time Input
End Time Input
Click button

You didn’t supply CSS so I can’t tell if you have moved them around with CSS.

5

If you meant you just want them horizontal then something like this:


.form-group,.col-sm-2{display:inline-block;vertical-align:bottom}

If you need to support ie7 and under then also add this:


*+html .form-group,
*+html .col-sm-2{display:inline;zoom:1.0}
* html .form-group,
* html .col-sm-2{display:inline;zoom:1.0}