Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

datetimepicker is not a function jquery

I working with datetimepicker jquery ui, when code below html , datetimepicker is not displaying and when i inspect with firebug console it displayed an error ``

$("#example1").datetimepicker is not a function
[Break On This Error] $("#example1").datetimepicker(); 

and below is the code

<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css">

<style>
    .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }

    .ui-timepicker-div dl { text-align: left; }
    .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
    .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }          
    .ui-timepicker-div td { font-size: 90%; }           
    .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }                   

</style>


<script type="text/javascript" src="scripts/jquery.js"></script>

<script type="text/javascript" src="scripts/jquery/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-sliderAccess.js"></script>

<script>
    $(document).ready(function(){
        $("#example1").datetimepicker();
    });
</script>

<script>

</script>

<input type="text" id="example1" class="hasDatePicker">
like image 467
Rafee Avatar asked Dec 30 '11 09:12

Rafee


People also ask

How to solve$(. datepicker is not a function?

To solve the "$(...). datepicker is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown. Copied!

How can add date picker in jQuery?

JavaScript Code: $( function() { var from = $( "#fromDate" ) . datepicker({ dateFormat: "yy-mm-dd", changeMonth: true }) . on( "change", function() { to. datepicker( "option", "minDate", getDate( this ) ); }), to = $( "#toDate" ).

What is Datepicker in JavaScript?

The JavaScript DatePicker (Calendar Picker) is a lightweight and mobile-friendly control that allows end users to enter or select a date value. It has month, year, and decade view options to quickly navigate to the desired date.


2 Answers

Keep in mind, the jQuery UI's datepicker is not initialized with datetimepicker(), there appears to be a plugin/addon here: http://trentrichardson.com/examples/timepicker/.

However, with just jquery-ui it's actually initialized as $("#example").datepicker(). See jQuery's demo site here: http://jqueryui.com/demos/datepicker/

   $(document).ready(function(){
        $("#example1").datepicker();
    });

To use the datetimepicker at the link referenced above, you will want to be certain that your scripts path is correct for the plugin.

like image 68
PriorityMark Avatar answered Oct 07 '22 10:10

PriorityMark


I had the same problem with bootstrap datetimepicker extension. Including moment.js before datetimepicker.js was the solution.

like image 20
Frank Eschenbacher Avatar answered Oct 07 '22 09:10

Frank Eschenbacher