Develop Reference

jQuery/bootstrap show datepicker when button is clicked and assign value to variable without input text

Quite new to jQuery so please bear with me...
I would like to show the datepicker when I click a button. The datepicker should appear as a popup and assign the selected date to a variable.
My attempt so far
<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>
Snapshot
</button><input type="hidden" id="button_snapshot" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
and in the main.js
function snapshot_btn() {
$("#button_snapshot").datepicker({
showOn: 'both',
onSelect: function () {
var dateObject = $(this).datepicker('getDate');
alert(dateObject);
}
});
}
but the datepicker does not show when I click the button.
It shows normally on other input boxes.

EDIT
Since in your original question you didn't say that it was bootstrap datepicker, not jQuery datepicker, I made this answer using jQuery datepicker.
You need to add the two libraries (jquery and then jquery UI, check the snippet to get the links), after that,
just use the code below and in the onSelect function, get the date as parameter, it already contains the selection.
I made a slight change, removing the input type='hidden', and adding an empty div, that way the calendar will appear inline.
My example also makes the calendar disappear and reappear on click, take a look.
function snapshot_btn() {
var btnOpenCalendar = $("#btnOpenCalendar");
if (btnOpenCalendar.hasClass('calendar-open')){
btnOpenCalendar.removeClass("calendar-open");
$("#button_snapshot").datepicker("destroy");
}else{
btnOpenCalendar.addClass("calendar-open");
$("#button_snapshot").datepicker({
showOn: 'both',
onSelect: function (date) {
alert(date);
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button type="button" id='btnOpenCalendar' class="btn btn-primary" onclick='snapshot_btn()'>
Snapshot
</button>
<div id="button_snapshot"></div>

With bootstrap-datepicker, add autoHide:true inside datepicker() and .datepicker("show"); right after. When use click the button, the modal will show up, and hide when you click outside
<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>Snapshot </button>
<input type="hidden" id="button_snapshot" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
JS
function snapshot_btn() {
$("#button_snapshot").datepicker({
autoHide:true,
showOn: 'both',
onSelect: function () {
var dateObject = $(this).datepicker('getDate');
alert(dateObject);
}
});
$("#button_snapshot").datepicker("show");
}

parsley.js does not work for ckeditor textarea

I wrote code for my form with parsley.js validator, however it works fine except CKEditor textareas. Where can be the problem? Here is screenshot
Here is my code:
<script type="text/javascript">
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("change",function(e) {
for ( instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
});
});
});
</script>
<h2 class="heading">Description</h2>
<div class="controls">
<textarea name="description" id="description" required="" data-parsley-errors-container="#description-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
</div>
<div style="margin-bottom: 20px;" id="description-errors"></div>
<script>
CKEDITOR.replace('description');
</script>
<h2 class="heading">Purpose</h2>
<div class="controls">
<textarea name="purpose" id="purpose" required="" data-parsley-errors-container="#purpose-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
<div style="margin-bottom: 20px;" id="purpose-errors"></div><br><br>
<button type="submit" name="submit">Submit</button>
</div>
<script>
CKEDITOR.replace('purpose');
</script>

Your issue is related to the required attribute. After, this line:
CKEDITOR.on('instanceReady', function () {
you need to add such an attribute again, for each text area, because lost during CKEDITOR init phase (i.e.: CKEDITOR.replace('purpose');).
For a specific textarea you can write:
$('#description').attr('required', '');
For all the textareas belonging to the form:
$('form textarea').attr('required', '');
From your comment:
When the error shows in other inputs and when I type something it removes automatically. But in textareas it does not leave
In order to solve this part, on CKEDITOR change event, you need to trigger parsley validation. The below line does the trick:
$('form').parsley().validate();
The updated code (jsfiddle here):
CKEDITOR.on('instanceReady', function () {
$('form textarea').attr('required', '');
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].on("change", function (e) {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
$('form').parsley().validate();
}
});
});
});

It's always so much easier to answer questions if you provide a minimal working example...
ckeditor hides the <textarea> and fills it in via Javascript.
Maybe the issue is that the error container is in the wrong place.
It's also very possible that ckeditor doesn't trigger the input event (not very well known). If that's the case, the following code should resolve the issue:
$('textarea').on('change', function() { $(this).trigger('input') })
Please update if this works or not.

Insert label inside bootstrap datetimepicker

Is there a way to add hour/minute label to eonasdan's bootstrap datetimepicker like shown in the screenshot?

As ceejayoz stated in comments, the datetimepicker does not include this kind of functionality. The library is open source and you can customize the code and the look & feel as suggested.
Another appoach is to add dinamically a row under hours and minutes row when the picker is shown. You can add a listner to dp.show event and then use jQuery to manipulate picker HTML.
Here a working sample:
$('#datetimepicker1').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker1').on('dp.show', function(){
// Check timepicker is visible
if( $('.timepicker').is(':visible') ){
// Get rows of the timepicker
var rows = $('.timepicker>.timepicker-picker>table>tbody>tr');
// Create html for custom text
var tr = '<tr class="customText"><td>hours</td><td class="separator"></td><td>minutes</td></tr>';
// Add custom HTML inside component
$(rows[1]).after(tr);
}
});
.bootstrap-datetimepicker-widget table tr.customText td {
height: 24px;
line-height: 24px;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
The datetimepicker has the debug option that, if set to true:
Will cause the date picker to stay open after a blur event.

Add content besides datepicker based on hoover

Im working on a datepicker so when a user hoover over a date it shows date on top of the input bar
Here is the jfiddle im working on http://jsfiddle.net/JGM85/1/
<div class="demo">
<h1></h1>
<p>Date: <input type="text" id="datepicker"></p>
But I am trying to display it content on the side of the datepicker rather than on the top.
Something like this
Imgur Link

You can use beforeshow for datepicker and call your own function.
https://jsfiddle.net/JGM85/272/
Please check this code with your fiddle :
$(function() {
$("#datepicker").datepicker({
//The calendar is recreated OnSelect for inline calendar
onSelect: function (date, dp) {
updateDatePickerCells();
},
onChangeMonthYear: function(month, year, dp) {
updateDatePickerCells();
},
beforeShow: function(elem, dp) { //This is for non-inline datepicker
updateDatePickerCells();
}
});
updateDatePickerCells();
function updateDatePickerCells(dp) {
/* Wait until current callstack is finished so the datepicker
is fully rendered before attempting to modify contents */
setTimeout(function () {
$('.ui-datepicker-calendar').after('<p>Fajr Sunrise Zuhr Asr Magrib Isha</p><div class="className"></div>');
}, 0);
}
$(".ui-state-default").live("mouseenter", function() {
$('.className').html($(this).text()+"."+$(".ui-datepicker-month",$(this).parents()).text()+"."+$(".ui-datepicker-year",$(this).parents()).text());
});
});

You can just make the <p> and the <h1> into : display: inline
<p style="display: inline">
Date: <input type="text" id="datepicker">
</p>
<h1 style="display: inline"></h1>

Datepicker hiding on mouseover

I need to hide a datepicker when a user moves their mouse away from an input where the datepicker is active. While it works, it works a bit too well. It also hides the datepicker when I try to mouse over it. Resizing the div isn't the best idea either as this is a dynamically generated data entry form. And only date fields are being generated with the .herd-evt-date class.
I need to know what to do to have jquery check if I'm mousing away from the textbox but not the datepicker. How does one do this?
$('#herd-evt-entry-tbl').on('focus','.herd-evt-date',function() {
$(this).datepicker({
onSelect: function() {this.focus();},
onClose: function() {this.focus();},
dateFormat: 'dd-mm-yy'
});
});
$('#herd-evt-entry-tbl').on('mouseleave','.herd-evt-date',function() {
$(this).datepicker('hide');
});
HTML:
<div id='herd-evt-menu-div'></div>
<div id='herd-evt-detail-div'>
<h2><div id='herd-evt-name-div'>Mating Event</div></h2>
<button id='herd-evt-back-btn'><-Back</button>
<button id='herd-evt-columns-btn'>Column Info</button>
<button id='herd-evt-file-upload-btn'>Upload File</button>
<button id='herd-evt-save-btn'>Save Valid</button>
<input type='hidden' id='herd-load-id-hdn' value='0' />
<input type='hidden' id='herd-evt-id-hdn' value='0' />
<table id='herd-evt-entry-tbl' border=1></table>
</div>
<div class='herd-event-columninfo-display'>
<div><button id='herd-event-columninfo-close-btn'>X</button></div>
<table id='herd-evt-columninfo-tbl'></table>
<button id='herd-evt-columninfo-upd-btn'>Update</button>
</div>
<div class='herd-evt-dup'>
<button style='float: right; ' id='herd-evt-dup-close'>X</button>
<table id='herd-evt-dup-tbl'>
<thead><th></th><th>Stig</th><th>Tattoo</th><th>Ident</th><th>Herdstat</th><th>State Day</th><th>Sex</th><th>Gen Level</th><th>Transponder</th><th>French Ident</th></thead>
<tbody></tbody>
</table>
</div>
</div></td></tr></table>
<div style='clear: both'/>
</div>
</div>

You could approach it like this:
$("#herd-evt-entry-tbl").hover(function () {
// Do something on Mouse Over.
}, function () {
// Do something on Mouse Off.
});
So if the entire div is the element herd-evt-entry-tbl then when the div element is hovered on or off it will perform your task. It will also be able to rebind the display to your visible object. Which your line $(this).datepicker('hide'); is actually applying display: none;, which may need to be modified when you mouse over again.