jquery datetime picker problem.

replied 9 years ago

It would be

$('#datefield').datetimepicker({
    datepicker: true
});

Make sure #datefield is an input text field with an ID of datefield.

Last updated 9 years ago.

0

mnameghi

replied 9 years ago

Thanks LukeBro but it's not work! this is my console log:

TypeError: $(...).datetimepicker is not a function

datefield is correct I think there is a problem in jquery. datepicker not rendered completely.

Last updated 9 years ago.

0

thanyawzinmin

replied 9 years ago

Should put the all the scripts things under the bottom of your html document.


 <link href="/blog/public/css/datepicker.css" rel="stylesheet">
 <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
 <script src="/blog/public/js/datepicker.js"></script>

 <script type="text/javascript">
    $(document).ready(function() {
        $('#datefield').datepicker();
    });
</script>
</html>

Last updated 9 years ago.

0

jimgwhit

replied 9 years ago

First do you have the jquery ui with datepicker on the computer? Do you have the ui included something like:

<script type="text/javascript" src="<?php echo DIR; ?>public/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="<?php echo DIR; ?>public/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

In my form I have:

<tr>
<td>odate:</td>
<td>
<input type="text" name="odate" id="odate" value="<?php echo $data['row'][0]->odate;?>">
</td>
</tr>

And jquery code at bottom

<script>

$( document ).ready(function() {	

$( "#odate" ).datepicker({
showOn: "button",
buttonImage: "/crudv2/public/overcast/images/calendar19.gif",
buttonImageOnly: true,
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});


});

</script>

The line

buttonImage: "/crudv2/public/overcast/images/calendar19.gif",

is only for an image to click to popup canendar, ignore.
You need the UI not just jquery.

Last updated 9 years ago.

0

lukebro

replied 9 years ago

jimgwhit is right, in my previous post I thought you were using a datetimepicker library. If you're using the datepicker jQuery UI you also need to download and import jQuery UI's CSS and JS files: https://jqueryui.com. Then what you had before should work fine.

0

mnameghi

replied 9 years ago

Thanks all for response. I test jquery date picker on a simple html file and it worked correctly. but same as html in laravel it not worked! It seems that jquery didn't create datetime picker in laravel!

0

jimgwhit

replied 9 years ago

Yes it does you might have to make sure you're including everything correctly put them underneath the public folder under JS and include /js/thefiles. It is tricky in laravel to include things correctly until you learn how. just to practice write a regular HTML page in Laravel and include Jquery files at the top and try that don't use blade or form helper just for the test and you will see what I'm talking about. jquery works perfectly on my local and my production server with the date picker.

0

jimgwhit

replied 9 years ago

To be clear, make a folder under public called js like:

public\js

Place the necessary files in this folder.
Include them, but leave off the public for example:

<script type="text/javascript" src="js/jquery.js"></script>
plus other ui files

0

jimgwhit

replied 9 years ago

Finally had time to boot up main computer. Here is an edit page with datepicker at bottom, excuse the rough not formatted good code, but this works 100%. Only difference is I put my files under public/include instead of
public/js. Pay attention to where things are as to how to properly include them.

<html>
<head>
    
<!--<script type="text/javascript" src="include/jquery.js"></script>-->
<link rel="stylesheet" href="include/overcast/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="include/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="include/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="include/myjq.js"></script>

</head>
<body>
    
</body>
<div style="margin-right:auto;margin-left:0px; width:600px;">
<?php
//$token = md5(uniqid(rand(), TRUE));
//$token = 777;
//$token = 779;
//$newtoken = ($token + 223) / 2; 
//$token2 = '17testzzz';
//Session::put('token', $token);
//$_SESSION['token'] = $token;
?>
    <form id="peditform" method="post" action="petupdate">
    <?php //echo Form::token(); ?>
    <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
    
<input type='text' name='petid' value="<?php echo $data->petid;?>">
<table style="border:none;">
<tr>
<td class="aright">petname:</td>
<td>
<input type="text" name="petname" id="petname" value="<?php echo $data->petname;?>">
</td>
</tr>




<tr>
<td class="aright">species:</td>
<td>
<input type="text" name="species" id="species" value="<?php echo $data->species;?>">
</td>
</tr>




<tr>
<td class="aright">sex:</td>
<td>
<input type="text" name="sex" id="sex" value="<?php echo $data->sex;?>">
</td>
</tr>
<?php //echo "sgo===".$data['owner']; ?>



<tr>
<td class="aright">ownerid:</td>
<td>


<input type="text" name="ownerid" id="ownerid" value="<?php echo $data->ownerid;?>">
<?php
echo '<a href="JavaScript:void(0);" onclick="WriteBack()">Click Me</a>';
//use \helpers\session as Session;
?>
</td>
</tr>
<tr>
<td class="aright">petowner:</td>
<td>
<input type="text" name="petowner" id="petowner" value="<?php echo $data->petowner;?>">
</td>
</tr>




<tr>
<td class="aright">ostreet:</td>
<td>
<input type="text" name="ostreet" id="ostreet" value="<?php echo $data->ostreet;?>">
</td>
</tr>




<tr>
<td class="aright">odate:</td>
<td>
<input type="text" name="odate" id="odate" value="<?php echo $data->odate;?>">
</td>
</tr>

<tr>
<td class="aright">ocheck:</td>
<?php
if($data->ocheck == 1)
{
echo "<td>";
echo "<input type=\"checkbox\" name=\"ocheck\" id=\"ocheck\" value=\"1\" checked />";
echo "</td>";
}
else
{
echo "<td>";
echo "<input type=\"checkbox\" name=\"ocheck\" id=\"ocheck\" />";
echo "</td>";	
}
?>
</tr>




<tr>
<td class="aright">dogpic:</td>
<td>
<input type="text" name="dogpic" id="dogpic" value="<?php echo $data->dogpic;?>">
</td>
</tr>
<table>
    <p style="margin-left:50px;"><input type='submit' name='updatepet' value='updatepet'></p>
</form>
<a id="updatejq" href="">  [updatejq ]  </a>

<?php
//$spage = Session::get('petpage');
//$spsch = Session::get('petsearch');
//echo "<a href='".DIR."pet/?p=".$spage."&psch=".$spsch."'>back</a>";
echo "</div>";
$vurl = Session::get('areturn');
echo "<a href=".$vurl.">sess back</a>";
//echo Session::get('areturn');
?>


</body>  

<script>

$(function() {

$("a#updatejq").click(function() {
     dataString = $("#peditform").serialize();
     alert('here');
     $.ajax({
        type: "POST",
        url:'<?php echo "petupdate";?>',
        data: dataString,
        //dataType: "json",
        success: function() {
            alert('updated');
                
                }
 	});
 return false;
 });





});  ///end all

//datepicker

$( document ).ready(function() {	

$( "#odate" ).datepicker({
showOn: "button",
buttonImage: "/include/overcast/images/calendar19.gif",
buttonImageOnly: true,
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
//});

});

//datepicker

</script>
</html>

date picker seems to like