个人中心
gpt4 book ai didi

jQuery UI Datepicker 超出范围

转载 作者：太空宇宙 更新时间：2023-11-04 10:51:17 24 4
gpt4 key购买 nike

我的日期选择器正在改变形状并延伸到屏幕的最末端。有什么问题吗？这是我的代码:

此外，我如何更改 jQuery 中的日期，使其显示为 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;
    }

最佳答案

也许你必须关闭你的 html div

<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>

要更改日期格式，请将 dateFormat 选项添加到您的日期选择器函数

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

关于jQuery UI Datepicker 超出范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34982812/

24 4 0
文章推荐： linux - 在下标中使用 exec 重定向标准输出
文章推荐： java - Spring 启动: ReactiveCrudRepository is not being implemented by any bean
文章推荐： java - Spring batch FileItemWriter 没有在正确的路径创建文件
文章推荐： java - 代码名称 1 个错误 :411 length required
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com