I'm trying to do something that seems like it should be simple, but somehow won't tie up properly.
The user selects a date from a jquery datepicker, where I have showWeek enabled.
$(".datepicker").datepicker({
showWeek: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
But, when the resulting date string is fed into a php datetime, the week does not correspond, and is 1 week further into the future.
$start_date = isset($_POST['startdate']) ? $_POST['startdate'] : "";
$start = new DateTime($start_date);
echo $start->format("W");
IE, 2018-10-02 shows as week 39 in my datepicker, but the echo above from reading that date back into a datetime and formatting for week returns week 40.
So, as far as I can tell, the jquery datepicker and php datetime class do not agree on which weeks are which by default.
Is there a way to reconcile this?
The PHP date says it conforms to ISO-8601, Checking online confirms for me that php has it right, so how do I fix the datepicker to display correctly?
Ok here is the solution: according to jquery ui you need to specify the first day and in your code you are missing it:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Show week of the year</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
showWeek: true,
firstDay: 1,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
Just add firstDay: 1, and everything works as you expect.
Related
Am using Jquery Datepicker for my project . If i want to change date format my code will be
$( "#datepicker1" ).datepicker({
dateFormat: "dd-mm-yy"
});
Its not working . But if am using this format its working
$("#datepicker1").datepicker("setDate", '+1d');
Please provide me a solution . Thanks in Advance
To disable all previous dates, give start date as today date
startDate: new Date()
$(function() {
$( "#datepicker" ).datepicker({
format: 'dd/mm/yyyy',
startDate: new Date(),
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" rel="stylesheet"/>
<div> Select Date <input type="text" id="datepicker" /></div>
This question already has answers here:
Set initial value in datepicker with jquery?
(7 answers)
Closed 2 years ago.
I am using jquery-ui.js and its datepicker component, as follows
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
However, instead of today date, I want to set an initial value for the datepicker. (I plan to retrieve a date from a mysql db thru php). How can I do it ?
The simplest way is (to put a php date value $initialdate as your initial date value in datepicker):
Amending you codes from
$( function() {
$( "#datepicker" ).datepicker();
} );
to
$( function() {
$( "#datepicker" ).datepicker();
} );
$( "#datepicker" ).datepicker( "setDate", '<?php echo $initialdate; ?>');
Make sure that the format of your datepicker is the same as that of your DB.
For example, if you db's date is YYYY-MM-DD, then I suggest you to use the following (before the setdate line) as well (otherwise the initial date cannot be correctly set):
$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
I have two php pages, search.php and result.php. Both of these pages use jQuery and both have jQueryUI datepickers and work perfectly independently of each other.
I've included search.php in my result.php file because I want to use it as a sidebar, now I seem to have some kind of conflict because the datepicker in search.php has stopped working, in that the calendar doesn't appear and so is unusable. jQuery is working in both files, I've confirmed this by printing to the screen. Also if I remove the datepicker initialisation code from result.php (leaving other jQuery code I also have in the page) then the other datepickers from search.php begin to work again. The IDs are unique, I'm using noConflict to make sure jQuery can work on both pages and as I say, it does - the only issue is when I initialise the datepicker on result.php it causes those in search.php to stop working.
Using IE's JS debugger I can see that the datepicker in result.php is initialised first, then the others get initialised. There is no script error or warning so I don't know where else to go! Any help appreciated.
UPDATE
I've stripped out all non-related code so I can upload it here. There's two files, testSearch.php and testResult.php. The testResult.php includes test.search.php as it will be displayed as a sidebar. Both pieces of script work in isolation but once both are enabled, the datepicker in testSearch.php stops working.
testResult.php
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
</head>
<body>
<div id="sidebar"><?php include 'testSearch.php';?></div>
<div id="content">
<div id="availCal"></div>
</div>
<script>
var jResult = jQuery.noConflict(true);
jResult(document).ready(function() {
jResult( "#availCal" ).datepicker({
changeMonth: false,
changeYear: false,
firstDay: 1,
numberOfMonths: 3,
dateFormat: "dd-mm-yy",
showCurrentAtPos:1
});
});
</script>
</body>
testSearch.php
<!-- include jquery and jquery ui -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<label for="arrPicker">Arrival date:</label><br />
<input class="dateSelect" type="text" id="arrPicker" name="arr" value="<?php echo $arr; ?>" readonly />
<script>
var jSearch = jQuery.noConflict(true);
jSearch(document).ready(function() {
jSearch('.dateSelect').each(function(){
jSearch(this).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
constrainInput: true,
dateFormat: "dd-mm-yy",
minDate: 1,
showAnim: "slideDown"
});
});
});
</script>
As an asside, am I correct in leaving out the doctype/head/body tags from the file which will be included (testSearch.php)? I assume they aren't necessary since testResult.php already has those tags and testSearch.php will just be injected into that.
Try use
jQuery(function($){
$('body').on('focus',"#yourTagId", function(){ $(document).ready(function() {
$('#yourTagId').datepicker({ dateFormat: 'dd-mm-yy' });});
});
});
When i submitted form than if error occurred than value is not set in datepicker which is selected before. Datepicker field empty . how this possible ??
<html>
<head>
<script type="text/javascript" >.
$(function() {
$( "#dob" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:'
});
$( "#dob" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
});
</script>
</head>
<body>
<form>
<input type="text" name="dob" id="dob" value="<?php if(isset($_SESSION['dob'])) echo $_SESSION['dob']; ?>" placeholder="Please enter date of birth" required/>
</form>
<body>
</html>
There can be many reasons for this issue.
Either the dob variable is null/empty/undefined.
The dob value is not in the correct format.
You have not used defaultDate in the datepicker.
For 1st part, you can only log and debug what is wrong.
For 2nd part, you can format the value in correct format. Search on SO for formatting a string to Date.
For the 3rd part:
$(function () {
$("#dob").datepicker({
defaultDate: $(this).val(), //Add this
dateFormat: 'dd-mm-yy', // And this too
changeMonth: true,
changeYear: true,
yearRange: '1900:'
});
});
I am trying to format a jquery datepicker to display as Saturday, 18 May, 2013 but also have a second hidden field that would submit 2013-05-18 so I can use it in a MySQL query. I cannot seem to get it to work right. It keeps displaying as 05/18/2013. Here is my code.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alt-datepicker",
altFormat: "yy-mm-dd",
format: "DD, MM d, yy"
});
});
</script>
Date: <input type='text' id='datepicker' placeholder='Date'/><br />
<input type='hidden' id='alt-datepicker' name='AddHomeworkDate' />
Try like this
$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
READ MORE DATEPICKER
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
Assume that you already got date value - like - 6/09/07
var cur_date = '6/09/07';
dateFormat(cur_date, "dddd, mmmm dS, yyyy, h:MM:ss TT");
It will give you output - Sat Jun 09 2007 17:46:22
see this http://blog.stevenlevithan.com/archives/date-time-format for more explanation.
You did small mistake in dateFormat insted simply format
Here is the solution check this fiddel jsfiddle.net/2e8qE/
This works just fine;
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alt-datepicker",
altFormat: "yy-mm-dd",
dateFormat: "DD, MM d, yy"
});
});
jsFiddle