简体   繁体   中英

Datetime field does not work in Alpaca.js

I have these scripts on my html page:

<!-- alpaca.js datetime date -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>        
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" rel="stylesheet" href="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" />

And the code below assembles the alpaca form:

$("#form").alpaca({    
    "schema": {
        "properties" : {
            "name": {
                "type":"string",
                "title":"Name",
                "required":true
             },
             "datetime": {
                 "title": "Datetime",
                 "description": "Pick your datetime.",
                 "format": "datetime"
             }
        }
    },
    "options": {
        "fields" : {
            "name": {
                "type" : "text",
                "size": 20            
            },
            "datetime": {
                "type": "datetime",
                "picker": {
                    "format": "DD/MM/YYYY HH:mm:ss"
                 },
                "manualEntry": true
            }
        }
    }
});

But the datetime field doesn't allow me to enter the date and time

The calendar pop-up that appears is unconfigured, I can't even change the month, for example.

Do I need to do anything else for this datetime field to work properly?

I solved the problem by changing the scripts.

I accessed the showcase Alpaca page and I inspected the HTML

I discovered the scripts and I replaced them on my page.

The scripts below:

<!-- alpaca.js datetime date -->
<script type="text/javascript" src="http://www.alpacajs.org/lib/jquery-ui/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/jquery-ui/themes/cupertino/jquery-ui.min.css" />
            
<script type="text/javascript" src="http://www.alpacajs.org/lib/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.css" />
    
<script type="text/javascript" src="http://www.alpacajs.org/lib/moment/min/moment-with-locales.min.js"></script>
<script type="text/javascript" src="http://www.alpacajs.org/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"/>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM