From what I can see including examples such as this one
jQuery Datepicker - refresh pickable days based on selected option
This code should work.
Here is where I am calling my external jquery scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
I will note in case it matters I am using a bootstrap theme but do not have boot strap datepicker loaded.
When I load the page the date picker loads fine using the code below. (I will note I was using a jquery change event but switched my code to more closely match the above answer in case it was something small I was missing
$(function(ready){
$(function() {
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+6W"
});
});
});
HTML
<input type="radio" onchange="loadDatePicker()" tabindex="7" class="change" id="radio_1" name="freq" value="1"> Monthly <input type="radio" onchange="loadDatePicker()" tabindex="8" id="radio_2" class="change" name="freq" value="2"> Bi-Weekly
<input class="form-control" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="{{date}}">
The outputted HTML is below:
<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">
Then I click my radio buttons and the following code is called
function loadDatePicker(){
console.log("test")
$('#datepicker').datepicker("destroy");
if($("input[type='radio'][name='freq']:checked").val() == 1){
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+6W"
});
}else if($("input[type='radio'][name='freq']:checked").val() == 2){
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+2W10D"
});
}
$('#datepicker').datepicker("refresh");
}
I can see the input change for a second but it quickly goes back
<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">
However, now the datepicker no longer comes up when the input for the datepicker is clicked.
I finally solved this.
It was an external piece of code modifying the DOM.
Part of a chat script I am working on for the same solution included the following lines of code which caused it. (I commented out lines until I found which ones were breaking it)
jQuery(document).ready(function($) {
$("body").append('<div id="chat" title="Basic chat"><div id="chats">Please Enter your Name: <input id="username" type="text" ></div></div>');
$("body").append('<div id="chat2" title="Basic chat"><div id="chatc"> </div><div id="chate"><input id="chatb" type="text" ></div></div>');
});
For some reason the system objected to this line being between where the date picker was initially declared, and where it was modified.
I moved the entire chat code library above the date picker code and above the jquery-ui library and it all started working as if by magic.
Related
I'm using an input of the type date. I would like to know if there is a way to make the datepicker selection panel opened by default when the user enters in the page.
The element look like this:
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true">
Did you try adding autofocus
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true" autofocus="autofocus">
By using following funtion date picker will open bydefault after screen load.
$(function() {
$( "#starting_date" ).datepicker();
$( "#starting_date" ).datepicker("show");
});
You can display it embedded in a webpage by calling it on div instead of input, as per official documentation.
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 have the following code for jQuery datepicker
$('#startDate').datepicker({
format: "dd/mm/yyyy",
maxDate: '0'
})
.on('changeDate', function (ev) {
$('#startDate').datepicker('hide');
});
It launches in a Bootstrap modal. It is working as expected apart from the maxDate - I want to restrict user from entering any date in the future - is there something I am missing? I also tried maxDate : new Date() which also did not work. And I did a hard reload and have checked Dev Tools and I can see the java-script in the rendered markup is as expected.
Updated with full html markup.
<input id="startDate" placeholder="Select Date" data-provide="datepicker" class="datepicker ng-valid ng-touched ng-dirty ng-valid-parse" readonly="readonly" style="cursor:auto; background-color:white" ng-model="item.startDate" ng-change="startDateChanged(item.startDate)">
Using jQuery 1.10.2 and Angular 1.4.1
Hope this will work for you
$( "#datepicker" ).datepicker({
format: "dd/mm/yyyy",
maxDate: 0
});
Do you want to Prevent the user from typing a date into the text box then add readonly='true' in your Textbox.
HTML
<input id="Datepicker" type="text" readonly='true' />
Demo : Click here
Lesson learned is to search what libraries other devs add to the project and dont assume its the one you have used in the past - I have used jQuery Datepicker in nearly every other place I have developed. This particular Dev had included bootstrap js datepicker. The options for it were endDate and also there is an option for autoclose so I can even get rid of the 'on' event handler which was doing the hiding
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html
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
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.