We Keep Coding

jquery - datepicker inside modal form

I have a simple modal form which is triggered by click on the button. In that form there are two datepicker fields. After clicking on the button and open modal form first text field (datepicker) is immediately active and the datepicker calendar is showing.
It looks like that:
current state
I don't want first field active, showing calendar from the beginning. Instead of this I want open datepicker after click textfield.
How can I do this?
Here is my simple code:
<form>
<fieldset>
<label for="firstDay">Wybierz pierwszy dzień</label>
<input type="text" name="firstDay" id="firstDay" class="text ui-widget-content ui-corner-all">
<label for="lastDay">Wybierz ostatni dzień</label>
<input type="text" name="lastDay" id="lastDay" class="text ui-widget-content ui-corner-all"/>
<input type="submit"/>
</fieldset>
</form>
$(function(){
$("#dialogForm").dialog({
autoOpen: false,
width:400,
modal: true,
buttons: {
"Anuluj": function(){
dialog.dialog("close")
}
}
});
$("#firstDay").datepicker(
{
firstDay: 1
}
);
$("#lastDay").datepicker(
{
firstDay: 1
}
)
$("#addButton").click(function(){
$('#dialogForm').dialog('open');
})
})

Couldn't tell you for sure without access to your css but I believe this will work for you. In the css of the datepicker, set display: none;. Then using js code, set display: block; (or whatever you have it as now) when the text field is clicked using the code below.
$(document).on('click', 'input', function(){
$(this).attr("style", "display: block;");
});

I found couple days ago better solution for that. But unfortunatelly I can't find right now post that helped me.
This is code which makes the input fields are inactive and calendars are hide at the beginning:
$(".addButton").click(function(){
firstDay.datepicker("disable");
lastDay.datepicker("disable");
$('#dialogForm').dialog('open');
firstDay.datepicker("enable");
lastDay.datepicker("enable");
})

Bootstrap datepicker options with javascript append not working

I'm using bootstrap datepicker on a form element that is appended to a div when another dropdown is selected. The datepicker is working, but I can't get the options to apply.
I'm not sure if this is a limitation with datepicker or I am doing something wrong. The html is just
<div class="form-group row">
<div class="col-6 col-md-4 col-lg-3">
<div id="dateSelector">
</div>
</div>
</div>
the append block looks like this
dateSelector.append('<label class="control-label text-muted">Event date</label>' +
'<div class="input-group date" id="datepicker-group" data-provide="datepicker">' +
'<input type="text" class="form-control" name="event_date">' +
'<span class="input-group-addon">' +
'<i class="fas fa-calendar-alt"></i>' +
'</span>' +
'</div>');
with the options in the same js doc like this
$('#datepicker-group').datepicker({
format: 'dd/mm/yyyy',
clearBtn: true
});
I've spent hours trying to work this out and can't see where I'm going wrong.
Any help much appreciated.

Do you get any syntax errors?
You selector looks suspicious. Try:
$('#dateSelector').append('....');

Thanks Travis, using the data-date-format and data-date-clear-btn attributes on datepicker-group worked. I had seen his in the bootstrap docs and tried it before without success, but I think I tried it in the input, not the div.
New .append now looks like this
dateSelector.append('<label class="control-label text-muted">Event date</label>' +
'<div class="input-group date" id="datepicker-group" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-autoclose="true">' +
'<input type="text" class="form-control" name="event_date">' +
'<span class="input-group-addon">' +
'<i class="fas fa-calendar-alt"></i>' +
'</span>' +
'</div>');
Everything else the same.
Thanks!

Jqueryui Datepicker not displaying calendar

I am currently using jquery ui datepicker for two input fields. In order to call the calendar the inputfield must have a class of datepicker. I am using a for loop in the javascript to generate the input fields. I have added the class datepicker to each input field that can be possibly generated. But no calendar appears. In the firebug console the html does show that the input fields have class datepicker. Now if do this with a static input field it works fine. How can I display calendar when the field is click? Example
In the jquery this is the line where i set the class:
content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';
Full Jquery code
<script>
$(document).ready(function () {
$('select').change(function() {
var option = $(this).val();
showFields(option);
return false;
});
function showFields(option) {
var content = '';
for (var i = 1; i <= option; i++) {
content += '<div id="course_'+i+'"><label>Course # '+i+'</label><br /><label>Course Name:</label> <select id="coursename_'+i+'" name="coursename_'+i+'"><option value="">--- Select ---</option>"'
<?php
$course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list ");
$course_query->execute();
$data = $course_query->fetchAll();
foreach ($data as $row) {
//dropdown values pulled from database
echo 'content += \'<option value="' . $row['course_id'] . ':'.$row['course_name'].'">' . $row['course_name'] . '</option>\';';
}
?>
'"';
content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';
}
$('#course_catalog').html(content);
}
});
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" }).val();
});
</script>
HTML
<form action="courses.php" method="POST">
<b>Select the course</b>
Academy<input id="academy_id" name="acad_id" placeholder="Academy ID" type="text" />
Courses being offered?
<select name="courses_offered">
<option value="default">---Select---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="course_catalog"></div>
Static input: <input type="text" id="last_contacted_date" name="last_contacted_date" class="datepicker" />
<input value="SAVE" name="submit" type="submit">
</form>

What you want to do is make sure that the datepicker code runs after the content has been created and added to the DOM. The easiest way to do this would be to move the datepicker code inside your showFields method, right at the end. Like this:
function showFields(option) {
. . . rest of method . . .
$('#course_catalog').html(content);
$('#course_catalog').find(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
}
The $('#course_catalog').find(".datepicker") part will make sure that only the dynamically added datepicker fields will be initialized (you don't want to run it again against the static ones).

Include jQuery UI to your page.
http://jqueryui.com/download/
In the <head>:
<script type=text/javascript src="your_jquery_ui.js"></script>
Ok, you included the jQuery UI, now check your class is not hasDatepicker instead of datepicker ?
As you see here: http://jqueryui.com/datepicker/

Since you're adding inputs (datepickers) dynamically, the easiest solution is to add this:
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
jsFiddle example
BTW, you really only need one document ready call in your page.

Open two jquery datepickers simultaneously

I have two input fields containing a class that triggers a datepicker to open. Both work fine independently, i.e when I click on one or the other but I want for both datepickers to open when either input field is clicked.
Here is the script part of the code
$(document).ready(function() {
$( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});
and this is the html
<div id="quoteformcollection">
<h1>Collection</h1>
<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
<input type="hidden" id="DepotStart" value=""/></td>
<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div>
<div id="quoteformreturn">
<h1>Return</h1>
<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>
I have tried looking for an answer myself but am quite new to jquery and struggling a bit so any help would be much appreciated.
I would also like for whatever value is selected in the first datepicker, for the default date in the second to be incremented by x number of days, which again I am not sure of the best way to go about it.
Any advice would be hugely appreciated!

Try this code for instance to link the two datapickers:
$('#collectiondate').datepicker({
dateFormat: "#",
onSelect: function(dateText, inst) {
var dateText = eval(dateText);
var min = new Date();
min.setTime(dateText);
$('#end').datepicker('option', 'minDate', min);
}
});
$('#returndate').datepicker({
dateFormat: "#",
});

I think you'd have to use the calendar 'inline' and manage how it's popped up yourself through jQuery / Javascript. You need to point the cal to a div tag to use it inline.
http://jqueryui.com/demos/datepicker/#inline

Jquery date picker - want display date in an input field

Hava an jquery calendar:
$(function() {
$("#datepicker").datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
});
});
and
<form method="post">
<div id="datepicker">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
I want to display the date inside the input field...Please help me

The problem is that you have duplicated your id value datepicker. It's there twice.
IDs are supposed to be unique (one per page). Even if you were using classes, you'd be calling datepicker() on both the <div> and the <input>, which is surely not what you want.
Just remove the id from the div.
Working demo: http://jsfiddle.net/wesley_murch/PMFwg/

you cannot have two same id in a single page , use class for the same instead of ids
<form method="post">
<div id="datepicker1">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
above will work fine as div id you can change to datepicker1 or custom it