We Keep Coding

Issue with my datepicker while using .on()

Ok, so I am using a datepicker with FuelCMS and have run into an odd issue and am hoping I can get some help.
I have a admin area that includes a date picker for adding events, but it needs to have the ability to add an unlimited number of events. The code that I have works, but only in an odd way. When the system is loaded it automatically creates one date field, but the datepicker will only come up after you have clicked to add a second field. At this point it will work in either field perfectly fine.
This obviously creates some usability issues so I am hoping that somebody might be able to see where I went wrong.
$("body").on("click", ".datepick", (function () {
$(this).datepick({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
}))

You need to use focus instead of click. Using click means you have to click in the input field, then it activates, so you will have to click out of the field and back into it for this to work. You also had $(this).datepick instead of $(this).datepicker.
$("body").on("focus", ".datepick", function () {
$(this).datepicker({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
});
JSFiddle

try this code.
$(document).ready(function(){
$("body").on("click", function () {
$(this).datepick({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
});
});

Hide the datepicker on blur event

I am trying to add an event blur on input in order to hide a calendar.
The plugin I am using to show the calendar is the foliowing eternicode/bootstrap-datepicker.
Here is the source code http://jsfiddle.net/KLpq7/75/
var inputs = $('.datepicker').datepicker({
autoclose: true
});
inputs.on('blur', function () {
console.log($(this));
// I would like to hide just the date picker
//$(this).hide();
});

You can try this:
var inputs = $('.datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true}).on('changeDate', function (ev) {
$(this).blur();
$(this).datepicker('hide');
});
Fiddle: http://jsfiddle.net/KLpq7/82/

inputs.on('blur', function () {
inputs.datepicker('hide');
});

This is a known bug* -- if you use "datepicker" as the class for your inputs, it will interfere with the datepicker code, because datepicker is also the class used for the picker pane. Using a different class for your pickers should fix the issue for now.
* There aren't any open tickets for it at the moment, but it is acknowledged as a minor bug

Try this updated fiddle. I think that since you were using a class selector there was some conflicts in the blur event handler. I have separated each calendar picker by ID and it seems to work fine now.

How to disable closing of datepicker on jQuery UI Datepicker

When I open a datepicker like that:
$("#checkindate,#checkoutdate").datepicker({
onClose: {
//I'd like to disable the closing
}
);
I'd like to prevent the closing of the datepicker dialog depending on a condition. The ideal would be that return false would stop this event.
I tried modifying the source code and there is no trivial solution.
What I want to do is to be able to select the checkout date without reopening another dialog.
Any idea?

I don't think it's possible to pick multiple dates from one datepicker. You probably will need to do something like their date range demo:
http://jqueryui.com/demos/datepicker/#date-range

$('#datepicker').blur(function(){
$(this).datepicker('show')
})
open up http://jqueryui.com/demos/datepicker/ and copy the code on the javascript console and see what happens

var selectTask = function(selectedDate, calendar) { // pretends to remain open
setTimeout(function() {
$(selector).datepicker('show'); // don't go away ...
}, 0);
};
// datepicker instance
$(selector).datepicker({ onSelect:selectTask, duration:0 });
It's an illusion of prevent closing; might reach the goal.

After spending around a day finally got it,
$( "#selector" ).datepicker({
onSelect: function ( dateText, inst ) {
this._updateDatepicker(inst);
}
});
For all code, click here.

In this question: jQuery UI Datepicker - Multiple Date Selections the accepted answer explains how to implement the multiple date selection in one datepicker.
To prevent the datepicker closing after the selection of a date, you can put this in the onClose option:
$(this).data('datepicker').inline = false;
And add this in onSelect option:
$(this).data('datepicker').inline = true;

Does anyone know how to format the Jquery Datepicker

Does anyone know how to format the Jquery datepicker? I want it to display it like dd/mm/yyyy and that is the only way I want to display it, but at the moment it is displaying it like mm/dd/yyyy.
I tried this but it didn't work:
$(function() {
$( "#datepicker" ).datepicker({format("dd/mm/yyyy")});
});
Does anyone have an idea?

The key you want is dateFormat:
$(function() {
$( "#datepicker" ).datepicker({dateFormat: "dd/mm/yyyy"});
});

What are some simple JQuery buttons?

With a simple JQuery command, it will turn a regular button into something awesome.

Take a look at jQuery UI Button. You can turn many form controls/elements into pretty, themed button controls like this:
$("#aLink").button();
$(":checkbox").button();
// more in the docs

Try jQuery UI Button
<script>
$(function() {
$( "button, input:submit, a" ).button();
});
</script>