CODEWITHSUNDEEP
alpacajs
Gustavo Menezes
Gustavo Menezes

Reputation: 137

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?

Upvotes: 2

Views: 459

Answers (2)

Rashid Julfakar
Rashid Julfakar

Reputation: 1

Just add below css in your code and that's it:

.bootstrap-datetimepicker-widget.dropdown-menu {
    display: block !important;
}

This issue occurs due to the below display css in dropdowns.less css of Bootstrap:

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: @zindex-dropdown;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0; // override default ul
  list-style: none;
  font-size: @font-size-base;
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  background-color: @dropdown-bg;
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
  .box-shadow(0 6px 12px rgba(0,0,0,.175));
  background-clip: padding-box;

 Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
  &.pull-right {
    right: 0;
    left: auto;
  }

  // Dividers (basically an hr) within the dropdown
  .divider {
    .nav-divider(@dropdown-divider-bg);
  }

  // Links within the dropdown menu
  > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: @line-height-base;
    color: @dropdown-link-color;
    white-space: nowrap; // prevent links from randomly breaking onto new lines
  }
}

Upvotes: 0

Gustavo Menezes
Gustavo Menezes

Reputation: 137

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

Upvotes: 2

Related Questions