This question already has answers here:
jQuery UI DatePicker - Change Date Format
(29 answers)
Closed 8 years ago.
I have a simple html form that asks for two dates to select, and on the next page they are used in a MySQL query. Problem is, datepicker uses mm/dd/yyyy as the format, and I need yyyy-mm-dd for MySQL.
Is there a simple way to do this? I don't care if the datepicker's format is changed, or if I have to add a middle step to convert it, but whenever I search for examples they all look way overly complicated and include stuff I'm not even using.
I don't think the code is really important since it's so simple, but here's what I have in the header;
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker2" ).datepicker();
});
</script>
And here's what's in the body;
<form method="post" action="stat_report.php">
<h1>Report Summary</h1>
Format: YYYY-MM-DD<br>
Start Date: <input type="text" name="startDate" id = "datepicker"><br>
End Date: <input type="text" name="endDate" id = "datepicker2"><br>
<input type="submit" value="Submit">
</form>
Like so: $('#someId').datepicker({ dateFormat: 'yy-mm-dd' });
This could solve your Problem: http://api.jqueryui.com/datepicker/#option-dateFormat
Related
I have a field on which I have implemented jQuery Datepicker but if I assign a value on that field its shows in the chrome's developer tool...
But its not showing on the front end.
I know we can set a default date like this with the datepicker option setDate:
$( ".datepicker" ).datepicker("setDate", '29-10-2016');
But the date is coming from database and I cannot hard code it... So is there any way I can add a value and it will show up on front end unless user changes and set another date?
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
This problem happen because javascript require date input in format "yyyy-MM-dd", regardless format you use to display the value.
So your code should be like this :
<input type="text" name="date" id="date" class="datepicker" value="2016-10-25">
or
<input type="text" name="date" id="date" class="datepicker" value="<?php echo date_format($date,"Y-m-d"); ?>">
I found a way but still doesn't feel its the correct way, but for now this will do the trick for me.
I'm posting this answer to help other and will wait and see anyone else come up with the best and efficient solution for this question.
Since I'm using PHP so I just put this on my page to set the date for that field. I can add more lines if I have more date fields in my page...
<script>
$(function(){
$('#date').datepicker('setDate', '<?php echo $date; ?>');
});
</script>
If you are not getting value from $('#date').val() then there is problem in back end , date is not coming from back-end. If there is value in input field like
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
Then you can use below code .
$(function(){
$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"} );
$( ".datepicker" ).datepicker("setDate",$('#date').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
Mine situation was my date input didn't show the date value I picked after submit, but the date value can be seen in Chrome Developer tool, so I solved this problem by getting the input value before setting datepicker, then adding the value after.
$( function() {
var ddate = document.getElementById("date").value?document.getElementById("date").value:'';
$("#date").datepicker();
$("#date").datepicker("option", "dateFormat", "yy/mm/dd");
$("#date").val(ddate);
} );
I am calling the content of a PHP file via AJAX similar to this:
NEW.PHP
$output = '<p>Date: <input type="text" id="field_1"></p>
<p>Date: <input type="text" id="field_6"></p>
<p>Date: <input type="text" id="field_7"></p>';
echo $output;
The inputs are generated dynamically depending on options the user selected. In this case, field_1 and field_7 would be date picker fields and field_6 would be a standard text box.
In my main page, the jQuery success handler looks like this:
success: function(result){
jQuery('#div-custom').html(result).show();
jQuery("#div-custom").find("#field_1,#field_7" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
}
The issue I'm having is that the number of date picker fields is dynamic and the field number field_X can be different. Is there a way to make this find("#field_1,#field_7") dynamic or use a wildcard? I can change my PHP code so that, for example, all date picker fields are called date_X and other fields are field_X.
In that case, I'd like to do something like find("#date_*) but don't know if that's possible. I'm definitely not strong with Javascript.
Really appreciate any help!
You should use a class as you can use the same class on multiple items unlike ids
<p>Date: <input type="text" class="cal" id="field_X"></p>
jQuery("#div-custom").find(".cal" ).datepicker({
If you rely completely on the ids, then you can use 'starts with' selector on the input elements.
$("#div-custom input[id^='field']").datepicker({
This would be applicable on all input with ids starts with 'field' within a div with id ='div-custom'.
From database I get data in format like (let's suppose it's a string)
1974-07-05
How I need to pass the date in form with datepicker and make the date active there, so how can I do it?
<td>
<script src="javascript/datepicker.js"></script>
<input id="datepicker" type="text" name="dob" value="${person.bdate}">
</td>
and ${person.bdate} is a string date
This is not an answer, just an observation.
You have requested a pure javascript solution, but you are using a plugin. Why not use jQuery and jQueryUI's datepicker plugin. Look how easy the code would be:
jsFiddle Demo
HTML:
<input id="datepicker" type="text" name="dob" value="">
jQuery:
var dd = '1974-07-05';
$('#datepicker').val(dd);
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
Sources:
http://jqueryui.com/datepicker/#date-formats
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have the following script.
<script>
$(function() {
var date = $('#date').datepicker({ dateFormat: 'yy-mm-dd' }).val();
});
</script>
It displays the datepicker when selected the text box. But I want the current date as default in the text box.Help me
Assuming that you are using jQuery UI's datepicker, you can use setDate to set the date.
var date = $('#date').datepicker({
dateFormat: 'yy-mm-dd'
}).datepicker('setDate', new Date()).val();
1)using php you can to it easily as:
<input type="text" id="date" name="date" value="<?php echo date('Y-m-d')?>" />
2)by using datepicker you can do it like below:
var date = $('#date').datepicker({
dateFormat: 'yy-mm-dd'
}).datepicker('setDate', new Date()).val();
I have a long html document with like a hundred of datepickers. Surely each has its own id in the form of (DueDate'num'), like "DueDate401":
<div id="DueDate">
<label for="DueDate">Due date:<br></label>
<input name="DueDate" type="date" id="DueDate401"/>
</div>
JS for processing event is as follows:
$(function() {
$( "#DueDate401" ).datepicker({
dateFormat:"d-M-yy",
showButtonPanel:true,
changeMonth:true,
changeYear:true
});
});
I have a vague idea that something like this should be used:
document.getElementById("DueDate"+id)
but not sure. Would appreciate assistance.
UPDATE: Oh yeh, the question)))) The above JS example shows how a reference is made to a SPECIFIC datepicker field. Since every next datepicker changes its id, I do not know how to change this Javascript to address all datepickers.
use class as well. name the input's class names as DueDate,
then you can use like this
$(function() {
$( ".DueDate" ).datepicker({
dateFormat:"d-M-yy",
showButtonPanel:true,
changeMonth:true,
changeYear:true
});
});
<input name="DueDate" class="DueDate" type="date" id="DueDate401"/>