convert datepicker format into input field - javascript

I do have a form with a simple input field, using the jquery datepicker.
<input class="date" id="mydate" name="mydate" value="<?php echo $_GET['mydate']; ?>" />
When I send the form, the date format of my parameter have to be: YYYY-MM-DD.
www.mydomain.com/?mydate=2018-06-10
My javascript does look like this:
$(document).ready(function() {
$("#mydate").datepicker({
format: "yyyy-mm-dd"
})
Now, if I use the datepicker to select a date, the date format inside my input field is also YYYY-MM-DD. But for the vistor,the date format should look like this: DD.MM.YYYY.
Is there a way to convert the output of the date into another format? Thank you!

jQuery datepicker provide altField option for this purpose:
$("#displayDate").datepicker({
dateFormat: "dd.mm.yy",
altField: "#mydate",
altFormat: "yy-mm-dd"
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"
integrity="sha256-UezNdLBLZaG/YoRcr48I68gr8pb5gyTBM+di5P8p6t8="
crossorigin="anonymous"></script>
<input class="date" id="displayDate" value="20.12.2017" />
<input type="hidden" class="date" id="mydate" name="mydate" value="2017-12-20" />
Read documentation for more detail.

Related

Datetimepicker set value from Db

I'm using eonasdan Datetimepicker in my project but I can't really set the value that I'm getting from my DB in the input field
here is my HTML code
<div class="form-group">
<label class="col-sm-2 col-form-label">Conference start</label>
<div class='col-sm-10'>
<input type='text' class="form-control" id='datetimepicker4' name="datestart" value="<?=$vars['tstart']?>" />
</div>
</div>
here is my JS code
$(function () {
$('#datetimepicker4').datetimepicker({
daysOfWeekDisabled: [0],
format: 'YYYY-MM-DD H:mm'
});
});
from my MYSQL DB, I get the DATETIME in the variable $VAR but in the input field I always have the "2020-04-04 00:00" when it's supposed to be "2020-04-09 02:35"
if I inspect element using google chrome tools in the input value I see the correct date but in the field, I get the wrong DATETIME

How to select date from the calender using the datevalue in the textbox

This is my html
<input type=text name="date" value=7/8/2019>
This is my date picker:
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
endDate: '+0d',
todayBtn: 'linked'
});
I want to select the date in the calendar using the date value in the text box
The code which you paste is call javascript not html
But you can use html input tag with type date or datetime-local like this, which give the additional attributes to set min, max etc.
<input name="submittion-date"
type="date"
max="2017-06-20"
min="2017-06-01" />
You can use jquery to read the value
for further reading: https://www.w3schools.com/jsref/prop_date_value.asp
Your input should look like this:
<input type="text" id="datepicker" value="7/8/2019">
You need to wrap your attribute values in "" if they are not numeric.

jQuery datepicker field value not showing

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);
} );

How fill up the datepicker form with string date?

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

Javascript Date Picker Into A Textfield

I'm trying to use a date picker for a date field but my date fields ID is a dynamic id, since the fields generates in table rows, like
<input type="text" id="date<%=n%>"/>
But my date picker script requires the ID to attach the date picker into the above text field like below,
<script type="text/javascript">
new datepickr('datepick', { dateFormat: 'Y-m-d' });
</script>
Is there any other way to make this work?
Add a class to your input field
<input type="text" id="date<%=n%>" class="datepicker"/>
and get its value from javascript
var date = $('.datepicker').datepicker();
Better to use one class instead of multiple id's .you can differentiate the text filed value based on index number of class
first:<input type="text" class="date">
second:<input type="text" class="date">
third:<input type="text" class="date">
$(document).ready(function(){
$('.date').datepicker();
$('.date').on('change',function(){
var index=$('.date') .index(this);
$('.date:eq('+index+')').val();
});
});
js fiddle link: http://jsfiddle.net/sarath704/LhPP2/1/

Categories