Search code examples
alpacajs

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?


Solution

  • 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"/>