Support the ongoing development of Laravel.io →
Input Views Blade
Last updated 2 weeks ago.
0

It would be

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

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

Last updated 7 years ago.
0

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 7 years ago.
0

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 7 years ago.
0

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 7 years ago.
0

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

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

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

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

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

$( document ).ready(function() {

instead of

$(function() {

The above works perfect, there are no issues with jquery ui and laravel.

Last updated 7 years ago.
0

I found my fault! I manually added "hasDatepicker" class to input and this prevented jquery to show date picker.

0

thanks LukeBro. it worked for me.

0

Sign in to participate in this thread!

Cloudways

Your banner here too?

mnameghi mnameghi mnameghi Joined 16 May 2015

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

The Laravel portal for problem solving, knowledge sharing and community building.

© 2022 Laravel.io - All rights reserved.