html - jQuery UI Datepicker going out of scale -


my datepicker changing shape , stretching across end of screen. wrong? here code:

also, how can alter date in jquery appears 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 treatment</p>     <div class="dropdown">         <select><?php echo $options; ?></select>     <div class="heading2">         <p>select date</p>         <input type="text" id="datepicker">     <div class="heading3">         <p>select 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;     }

maybe have close html divs

<div class="heading1">     <p>select treatment</p> </div> <div class="dropdown">     <select><?php echo $options; ?></select> </div> <div class="heading2">     <p>select date</p>     <input type="text" id="datepicker"> </div> <div class="heading3">     <p>select time</p> </div>

and change date format, add dateformat option datepicker function

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

Comments

Post a Comment