We Keep Coding

Setting selected date in calendar to null on Bootstrap datetime picker

I'm using the bootstrap datetime picker, the documentation of which can be found here: https://eonasdan.github.io/bootstrap-datetimepicker/Options/
I'm trying to set the selected date to null. I'm able to blank out the date (i.e. 2/10/2019) within the input field, but when I click on the input field and the calendar opens, the old date is still selected in blue. WiThis is my code to de-select all dates within the calendar.
$(document).ready(function() {
$('.removedate').on('click', function(){
$("#id_booking_date").val('') //this correctly removes date from input field
$('.input-group').datetimepicker({
date: new Date(null)
});
});
This code isn't working. Do you know what I should try?
Thanks!

Can you please try to use "useCurrent" option for this? Check it out here https://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent

Please try this, they have clearly mentioned here
Working example:
$('#datetimepicker4').datetimepicker({
useCurrent: false,//
});

How can I get the new value of an HTML input after a click event has modified it?

I have the following..
# Html.EditorFor ( model = > model.Date )
A template editor also works in the DateTime type
Clicking on this entry, a calendar is displayed , you select a calendar date , and that date
is the new value of my post. What I need is to validate that the date you select is equal or greater than today.
I tried the onchange event for the EditorFor , but it did not work , Jquery DatePicker property has a MinDate
but added that would mean modifying the operation of all entries with the DateTime data type .

jQuery Datepicker has onSelect function which will give you the chosen date that is displayed in date input box! Here is a fiddle http://jsfiddle.net/aa74R/66/
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
alert(date);
}

The Question is a bit vague, however I think this should help.
It looks like what you want to do is change the date, based on after you've selected a newDate. onChange should work. As far as why it isn't, it could be a matter of code.
If it's a matter of how you've written your code:
$('#inputId').on('change', function(){
var newDate = $(this).val();
});
I personally think this might be an easier approach for some, however inefficient as it persistently sets the date every time you leave the field:
$('#inputId').on('blur', function(){
var newDate = $(this).val();
});
There are also many other ways to write it. But I feel like this might have the proper level for you.

Question doesn't seem to have a context with the absence of code.
Since you have tagged jQuery a possible problem might be you are binding the onchange event to the textbox. If this textbox were to be dynamically generated, the onchange event would never be registered. If this is your problem then you could do this-
$("body").on("change", "#textBoxId", function(){
alert($(this).val());
});

How to incorporate a datepicker in an innerHTML

I have a php page that reads data from a Mysql table and displays it in a HTML table. I then use AJAX to allow the user to update the data, one row at a time. For text fields, that works fine.
However, one of the columns is a date. I would really like the user to select the date from something like JQuery’s datepicker but I cannot figure out how to do it.
The initial data table has the following line to display the current date field:
echo "<td><div id=$eventdate_id>$row[eventdate]</div></td>";
I then modify this line using Javascript to make a field the user can edit:
document.getElementById(eventdate_id).innerHTML = "<input type=text id='" +data_eventdate + "' value='"+ eventdate + "'>";
Part of my problem is that the datepicker uses the id of the HTML element but I am already using it…
Any idea how I can add the datepicker?
Thanks

Assuming you're using https://jqueryui.com/datepicker/, after you set the innerHTML you could do it like this:
$( "#"+data_eventdate ).datepicker();
Or you could add a class to the input (<input class="date_input" type=...) and add datepickers to all of them in one go:
$( ".date_input" ).datepicker();
You can include options in the individual datepicker( {/*options here*/} ) calls, or you can set defaults for all datepickers at the start of your code with $.datepicker.setDefaults() (example from datepicker documentation):
$.datepicker.setDefaults({
showOn: "both",
buttonImageOnly: true,
buttonImage: "calendar.gif",
buttonText: "Calendar"
});

I don't see an issue with the id, but I think it would be better to use a class. Then you can convert all of the dates to input elements and instrument them with datepickers all at once.
echo "<td><div class='date'>$row[eventdate]</div></td>";
You can then use:
$('.date').html(function(i, date) {
// The "date" parameter is the current text inside the div.
// Create the input element.
var $input = $('<input type="text"/>').val(date);
// Instrument the input element with a datepicker.
$input.datepicker();
// Return the input element so it is placed in the div.
return $input;
});
jsfiddle

Select input by name with Jquery

I'm adding this input field via an external .js file on clicking a button. This is added every time a button is clicked.
<input name=​"new" id=​"date" type=​"text" value>​
I want to append the Jquery-ui datepicker to this field.
Here's the code I'm using right now but class="hasDatepicker" isn't getting associated with the new field that's added when I inspect it using the console.
$('[name="new"]').datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
I want to select this by name and not id as the id's will be unique for each field that's added.
The datepicker is added to other fields on my page so it should work here as well.
I also want to append class="btn btn-darkgrey" to make the input field into a button via Jquery.

Try like
$('input[name="new"]').datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
Working FIDDLE

As you said every time input field added when button gets clicked.
so , where you added the new input field at that place you have to initialize input with datepicker. That means on button click, you added code to insert new input field below that you have to find input by
$input = parent_element.find('input[name="new"]').last().
Here parent_element = in which you are appending/inserting your new input.
And initialize that input.
$input.datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
Try this. hope it will work for you.

in jquery datepicker can add alt field with classname?

hi I am using jquery ui datepicker
in starting i set datepicker with following way
$(".td-datepicker).datepicker();
class .td-datepicker apply on four input text box and their id are following
#startdate
#enddate
#edit_startdate,
#edit_enddate
now i want to set alt field in all four input field
how can i add by class because if i add by id then repetition of code occur
like below
$('#startdate').datepicker("option","altField","#alt_startdate");
$('#startdate').datepicker("option","altFormat","mm/dd/yy");
$('#enddate').datepicker("option","altField","#alt_enddate");
$('#enddate').datepicker("option","altFormat","mm/dd/yy");
$('#edit_startdate').datepicker("option","altField","#alt_edit_startdate");
$('#edit_startdate').datepicker("option","altFormat","mm/dd/yy");
$('#edit_enddate').datepicker("option","altField","#alt_edit_enddate");
$('#edit_enddate').datepicker("option","altFormat","mm/dd/yy");
and can i add multiple option in datepicker after initialization
like for
$('#edit_enddate').datepicker("option","altField","#alt_edit_enddate");
$('#edit_enddate').datepicker("option","altFormat","mm/dd/yy");
can i write code for above two line in one line . is this any way ?

To change the altFormat on all of them, assuming they've the same format:
$(".td-datepicker").datepicker("option", "altFormat", "mm/dd/yy");
For the multiple options at once (example):
$(".td-datepicker").datepicker("option", {
disabled: true,
dateFormat: "dd/mm/yy"
});
To solve your issue, based on the ids you're using:
$(".td-datepicker").each(function (idx, el) {
$(this).datepicker("option", "altField", "#alt_" + $(this).attr("id"));
});
If you change your mind, yes, you can use classes instead.
It's all on the API documentation: http://api.jqueryui.com/datepicker/