CODEWITHSUNDEEP
jqueryhtmlcss
Filip Grebowski
Filip Grebowski

Reputation: 389

jQuery UI Datepicker going out of scale

My Datepicker is changing shape and stretching across to the very end of the screen. What could be wrong? Here is my code:

Also, how can I alter the date in the jQuery so it appears as dd-mm-yyyy?

enter image description here

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
        <title>Beauty Factory Bookings</title>
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js">    </script>
    <script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </script>
    </head>

<body>
    <div class="heading1">
        <p>Select Your Treatment</p>
    <div class="dropdown">
        <select><?php echo $options; ?></select>
    <div class="heading2">
        <p>Select Your Date</p>
        <input type="text" id="datepicker">
    <div class="heading3">
        <p>Select Your Time</p>
</body>

CSS:

    .heading1 {
        text-align: center;
        margin-top: 5%;
        text-transform: uppercase;
        font-size: 16px;
    }

    .heading2 {
        text-align: center;
        margin-top: 3%;
        text-transform: uppercase;
        font-size: 16px;
    }

    .heading3 {
        text-align: center;
        margin-top: 3%;
        text-transform: uppercase;
        font-size: 16px;
    }

    .dropdown select {
        margin-top: 1%;
        display: block;
        height: 30px;
        width: 320px;
        background: #ff656c;
        border: 1px solid #e15960;
        color: #fff;
        font-size: 15px;
        font-family: Montserrat;
        outline: none;
        cursor: pointer;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        border-radius: 5px;
    }

    img {
        padding-top: 12px;
        padding-left: 12px;
    }

    .headertext {
        float: right;
        padding-top: 20px;
        padding-right: 3%;
    }

    body {
        background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
        background-size: cover;
        font-family: Montserrat;
        margin: 0;
        padding: 0;
    }

Upvotes: 0

Views: 127

Answers (1)

smdsgn
smdsgn

Reputation: 1746

Maybe you have to close your html divs

<div class="heading1">
    <p>Select Your Treatment</p>
</div>
<div class="dropdown">
    <select><?php echo $options; ?></select>
</div>
<div class="heading2">
    <p>Select Your Date</p>
    <input type="text" id="datepicker">
</div>
<div class="heading3">
    <p>Select Your Time</p>
</div>

And to change the date format, add a dateFormat option to your datepicker function

$( "#datepicker" ).datepicker({dateFormat: 'dd-mm-yy'});

Upvotes: 1

Related Questions