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
Related
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.
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.
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 using datepicker in my application for letting the user entering dates. But what I want is that the user should be able to enter the dates manually as well into the textbox using keyboard and then the date-picker automatically should be able to identify the date and accept it.
Here is the JS used.
<script type="text/javascript">
function getMetricName()
{
var today = new Date();
var maxdate= new Date(today.getFullYear(),today.getMonth(),(today.getDate()- 1),"23","59","59");
$(function() {
$('#start_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
maxDate: maxdate});
$('#end_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
maxDate: maxdate});
});
</script>
And below is the simple datepicker commands in html.
<td><input class="datepicker" name="start_date" value="" /></td>
<td><input id="end_date" name="end_date" value="" /></td>
Please help.
If you are using Datepicker Widget from JQuery, you can use the next option;
constrainInput: false
like
$('#start_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
constrainInput: false,
maxDate: maxdate});
API information constrainInput +
API documentation for further documentation if you need any.
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/