I am trying to format a datepicker to have a specific format. The format I am looking for is ISO 8601 yy-mm-dd. Something is wrong inside $(function), but I'm not sure what.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="<?php echo $jquery_css?>" type="text/css" />
<script type="text/javascript" src="<?php echo $jquery?>"></script>
<script type="text/javascript" src="<?php echo $jquery_ui?>"></script>
<script type="text/javascript">
$(function() {
$.datepicker.formatDate('yy-mm-dd', "datepicker");
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker" size="30"/></p>
</div>
$("#datepicker").datepicker({dateFormat: 'yy-mm-dd'})
is the syntax you want
http://docs.jquery.com/UI/Datepicker#option-dateFormat
If you're only using jQuery for this feature (and not for the larger framework), I'd skip the jquery and just use datejs.
Related
I am following this site to create autocomplete textbox but the dropdown is not appearing below the texbox instead apearing on top-left of the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
<script src="jquery-ui/jquery-ui.min.js"></script>
<script>
$(function() {
$("#skill_input").autocomplete({
source: "search.php",
});
});
</script>
</head>
<body>
<label>Your skills:</label>
<input type="text" id="skill_input" placeholder="Start Typin"/><br>
</body>
</html>
I think you need to add like the example with these scripts and css.
Looks like you are using different.
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery UI library -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Currently, I have a jquery function that I'm trying to get to display the time (the jquery I'm using is the Basic Example found here: http://jonthornton.github.io/jquery-timepicker/). When I implement Mr. Thornton's timepicker, I may click on the input field and a list of time options drops down, however there is no scroll bar/slider on the side of the drop down (as there is in his example). The time value that I select (I can use the mouse scroller to move up and down in the selection) is able to be inserted into my SQL db (via $_POST) with no problems, however, I would like to be able to use some of the other jquery examples listed on Mr. Thornton's site - but none of them (with the exception of the Basic Example - which seems to be only partially working) will work. Attached is the pertinent code. Any input would be much appreciated. Also, I tried going through this tutorial (https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery) and hence I tried adding the script (note: 10/9/17 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js) but that didn't seem to have any effect.
<?php
//DOCTYPE begins header.html
include_once("includes/header.html");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style media="screen"></style>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crime Stoppers</title>
<!--added 10/9/17-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="js/scripts.js"></script>-->
<!--Austin's Original links and scripts-->
<link rel="stylesheet" type="text/css" href="./styles/styles.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.min.css"/>
<link rel="stylesheet" href="./jquery/timepicker/jquery.timepicker.css"/>
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="./jquery/timepicker/jquery.timepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#basicExample').timepicker();
// $('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
// $('#setTimeExample').timepicker();
// $('#setTimeButton').on('click', function (){
// $('#setTimeExample').timepicker('setTime', new Date());
// });
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header"/></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
</div>
The following code displays the scroll bar for me, as well as enables basic timepicker, as well as the set date example. Its not every example, but will get you on your way
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crime Stoppers</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker#1.11.12/jquery.timepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/timepicker#1.11.12/jquery.timepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#basicExample').timepicker();
$('#setTimeButton').on('click', function () {
$('#basicExample').timepicker('setTime', new Date());
})
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header" /></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
<button id="setTimeButton">Set current time</button>
</div>
</body>
</html>
Your problem is probably about calling the JavaScript functions before the document is fully loaded.
$(function() {
$(document).ready(function() {
// Your code here
}
});
It is always best practice to use JavaScript only when the document is ready (a.k.a. document.onload event), replaced by jQuery's $(document).ready() event.
I try to include Angularjs in Laravel but i don't know what mistake i made i got error
Use of undefined constant name - assumed 'name'
myHead.blad.php
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/homeController.js"></script>
<script type="text/javascript" src="controllers/aboutController.js"></script>
myWelcome.blade.php
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<?php echo View::make('layouts/head'); ?>
</head>
<body>
<?php echo View::make('layouts/header'); ?>
<div ng-controller="HelloController">Hi {{name}} welcome to AngularJS Tutorial Series</div>
<button class="btn" name="test" value="test">Test</button>
</body>
<?php echo View::make('layouts/footer'); ?>
</html>
Hellocontroller.js
MyApp.controller('HelloController', hello);
function hello($scope)
{
$scope.name = "Test";
}
Please tell me how to configure Angularjs in Laravel
interpolated expression need to change if you want to work with laravel because laravel and angular js both use same {{}} interpolation symbol for expression exicuition
Add the code where you define your app
var MyApp = angular.module('MyApp', [])
MyApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
myWelcome.blade.php
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<?php echo View::make('layouts/head'); ?>
</head>
<body>
<?php echo View::make('layouts/header'); ?>
<div ng-controller="HelloController">Hi <%name%> welcome to AngularJS Tutorial Series</div>
<button class="btn" name="test" value="test">Test</button>
</body>
<?php echo View::make('layouts/footer'); ?>
</html>
Kindly Check into your code the issue persist with injection due to which your code was not working, it's working with your code, please have a look
(function(angular) {
'use strict';
var myApp = angular.module('MyApp', []);
myApp.controller('HelloController', function($scope) {
$scope.name = 'Test';
});
})(window.angular);
https://plnkr.co/edit/30nM20o7MHrxPifVu9Ig?p=preview
How to use date picker in Codeigniter?
My view part looks like this
<html>
<head>
<link href="css/CalendarControl.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/CalendarControl.js"></script>
</head>
<body>
<table>
<tr>
<td><input name="txtdatefrom" type="text" id="txtdatefrom" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="From" onKeyPress="return disableEnterKey(event)"/></td>
<td><input name="txtdateto" type="text" id="txtdateto" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="To" onKeyPress="return disableEnterKey(event)"/></td>
<td><input type="submit" value="submit" name="submit" id="submit" /></td>
</tr>
</table>
</body>
</html>
And my controller
public function calender(){
$this->load->view('news/calender1');
}
install datecker's js then call function datepicker() using jQuery on id on which you want date.
This might help you out: Using Datetime picker
Or for Codeigniter:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker Example 1</title>
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
</body>
</html>
Download the jquery.ui for datepicker from the internet and put the file in your folder.the file is stored in assessts/js/jquery_ui.the stored location is on your wish
1. jquery-ui.css
2. jquery-ui.js
3. jquery-ui.min.js
provide the css link in head section
<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">
provide the javascript in body section
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>
your code be look like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>
</body>
</html>
and finally in control load the view and javascript library
include datepicker js and see the result.
<div class="text">
<?php
$data = array(
'name' => "registration_date",
'id' => "registrationDate",
'class' => "datepicker",
'readonly' => "true",
'value' => $this->input->post('registration_date')
);
echo form_input($data);
?>
<span class="text-error"><?php
echo form_error('registration_date');
?></span></div>
Two calendar is not showing in one php file. scenario is below
I have a php file name temp. Here i want to show two calendar(previous month and next month).
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="left1"><?php include('calendar_previous.php');?></div>
<div id="right1"><?php include('calendar_next.php');?>hello</div>
</body>
</html>
My calendar_previous.php is
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="css/datetimepicker_css.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>BuildUp Real Estate</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="admin.css" />
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="css/jquery.1.4.2.js"></script>
<script type="text/javascript" src="css/jsDatePick_prev.jquery.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
target:"inputField1"
});
g_globalObject.setOnSelectedDelegate(function(){
var obj = g_globalObject.getSelectedDay();
alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year);
document.getElementById("div3_example_result").innerHTML = obj.day + "/" + obj.month + "/" + obj.year;
});
};
</script>
</head>
<body>
<div id="inputField1"></div>
</body>
</html>
My calendar_next.php is almost same to calendar_previous.php with two difference of javascript
<script type="text/javascript" src="css/jquery.1.4.4.js"></script>
<script type="text/javascript" src="css/jsDatePick_next.jquery.min.1.3.js"></script>
When i call calendar_previous.php and calendar_next.php separately it is showing previous and next month properly. But when i include this two php file in temp.php in different div only one calendar is showing. I want to show two calendar in temp.php in different div.
Any help is appreciate.
I guess its because now you are having two window.onload. So, that might be troubling. What you can try is place the contents of both window.onload to the second page and try.
2nd problem could be jquery conflict.
For that follow this
$s = jQuery.noConflict();
Now replace all of the $ with $s in one of your files.
That should resolve your problem. Tell me if it doesn't.