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

Update bootstrap datetimepicker after every step/click

I'm using this extension of Bootstrap's datepicker. It works well enough, but I've come upon a usability issue - when selecting a date/time, the text field the datepicker is attached to does not update unless all the steps (year/month/day/hour/minute) are selected to the end. Clicking away from the datepicker before clicking all the steps yields no change to the date in the text field.
How do I make it so that when the user clicks away mid-selection (maybe because they just want to change the date, but find the already-present hour and minute to be acceptable), the text field is updated appropriately?
For example:
Initial date in field: 2015/10/10 10:00
Click on 2015/10/15 -> click away -> date in field: 2015/10/15 10:00
Is that even possible?

Check this updated fiddle - https://jsfiddle.net/4cqLcxcm/8/
Added on changeDay event on datepicker, which will trigger on change of date and set that value into input box.
Below is the code I have changed.
$(document).ready(function() {
var now = new Date();
$('#send-time').datetimepicker({
format: 'yyyy/mm/dd hh:ii',
startDate: now
})
.on('changeDay', function(ev){
$('#send-time').datetimepicker('update',ev.date);
});
console.log('test');
});

jQuery: retrieve datepicker date, check if inside date range, display/hide fields

I have an online form and I want to hide/display specific fields based on the date the user selects in a datepicker field. However, the date they select must fall within a specific date range in order for the additional fields to be shown/hidden.
Right now, this is the only code I have (I am not jQuery writer)
jQuery(document).ready(function ($) {
$("#dpick").datepicker("getDate");
var monthsWithExams;
monthsWithExams = $("#dpick").datepicker("getDate");
if monthsWithExams - THIS IS WHAT I NEED HELP FIGURING OUT
});
#dpick is the id of my datepicker field. Once they select a date, I want the code to check whether the selected date is inside a specific date range - for example, if they pick any day in December, then I want the form field with id tours to be hidden. I think I can write the if...else part, I just don't know how to check if date is inside date range.
I am not a jQuery expert so please try to explain it to me so that I can understand! Thanks for any help! :)

You can set the range by giving the minDate(starting date) and maxDate(Ending date)
//This will only allow 30 days from now range
$(function() {
$("#txtFiled").datepicker({
minDate: 'today',
maxDate: "+30D"
});
});

The datepicker has an "onClose" which can take the chosen date and check it against other dates.
$( "#dpick" ).datepicker({
onClose: function ( selectedDate ) {
var date = selectedDate ;
// if date is between x and y hide element A
}
});

Multi Dates Picker Bug?

I've been trying to add a date picker to my site that allows users to pick multiple non-concurrent dates. Multidatespicker appears to do what I want but i've got to a point where I think I have discovered a bug, particularly with it's AltField, which is confirmed here. The bug seems to stop the altfield's values showing. If you visit the Multidatespicker demo and inspect the altfield you'll see that while it appears empty the values are showing in the code.
The issue this presents for me is that I can't edit previously selected dates when returning a record from my App/DB. When passing the value of altfield back to my Rails App for database storage I only receive the hidden values shown in the code.
If I can get the altfield to correctly show these values and allow me to edit them via the date selector, then I should be amend within my app's backend.
Note the suggested fix on the github link above does not solve this issue - it only enables rendering dates in 'dateVar' as being selected in the picker....it does nothing to show values in altField.
Has anyone used this and had the same problem and solved it?
Does anyone know how to fix it?
OR
Can anyone suggest a good alternative that will work nicely with a Rails 3 App using Twitter Bootstrap. It's very important that i'm able to select multiple non-concurrent dates. I've searched quite extensively but MultiDatesPicker seems to be one of the only options I can find.

The problem is that Multidatespicker is not listening #altField so we need to create our own listener to add/remove dates.
The idea is to add values to a hidden or readonly input and add/remove dates by an other. This prevent the customer to add dates in #altField and getting them overwritten by the plugin.
HTML
<input type="text" id="date">
<button type="button" id="addDate">Add dates</button>
<button type="button" id="removeDate">Remove dates</button>
<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">
JAVASCRIPT
And with javascript we simply add the date with a button (could be on keyup or anything your imagination can imagine :)
var dates = $('#altField').val().split(',');
$('#datepicker').multiDatesPicker({
dateFormat: "yy-mm-dd",
addDates: dates,
altField: '#altField'
});
$('#addDate, #removeDate').on('click', function() {
try {
var $date = $('#date');
var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates';
$('#datepicker').multiDatesPicker(addOrRem, $date.val());
$date.val('');
} catch (e) {
var $error = $('#error');
$error.html(e).slideDown();
setTimeout(function() {
$error.slideUp();
}, 2000);
}
});
jsFiddle

I have scanned the source of MultiDatesPicker. I don't find any method which set the date from the #altfield. So it is not a bug it is missing.
I also do not understand the difference between the preselected dates and the altfield.
I think you can do what you want with a combination of preselect and the altfield:
html
<div id="with-altField"></div>
<input type="text" id="altField" value="08/22/2013,08/21/2013">
</div>
javascript
//first read the values of the #altfield
var dates = $('#altField').val().split(',');
//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
dateFormat: "mm/dd/yy",
addDates: dates,
altField: '#altField'
});
nb load the javascript on document ready

Jquery date validation for invalid date entry

I'm implementing jQuery date picker. which can pick date from calendar as well as keyboard entry. When it is picked from the calendar it's working fine.
<input type="text" id="date" />
<script>
$('#date').datepicker ({
dateFormat: 'mm/dd/yy'
}).on("change", function(){
alert("You Entered: "+($(this).datepicker('getdate')));
})
Problem is when I enter, lets say 02/31/2014. which is invalid. I wanted to set a custom message to the user that $ is invalid.
But Jquery is passing on today's date for wrong entries. How can I get exact value of user entry (02/31/2014)?

When using the getdate method of jQuery, Its automatically setting to today's date for an invalid date (not sure why it is lke this in Jquery).
alert("You Entered: "+($(this).datepicker('getdate')));
instead of this use this
alert("You Entered: "+($("#date").val());
Update: Fiddle Demo