This is the code I have but it's not working:
$(document).ready(function () {
$(function () {
$('#QuoteDate').datepicker({ dateFormat: 'yy-mm-dd' });
});
}
QuoteDate is id of datepicker.
if you are using bootstrap Datepicker then use following code.
$("#QuoteDate").datepicker({
format: 'dd-mm-yyyy',
});
Related
function init() {
$('.message-composition__footer')
.prepend('<input type="text" id="datepicker_1" placeholder="Select date" class="input input--pilled event-form__date-input u-hide-focus" readonly>');
let dp = $( "#datepicker_1" );
console.log(dp);
$(dp).datepicker({
showOn: 'both',
onSelect: function (dateText, inst) {
schedule_date = dateText;
$( dp ).val(dateText);
console.log("schedule_date - " + schedule_date);
}
});
};
document.addEventListener('turbolinks:load', () => {
console.log('turbolinks:load');
init();
});
(function($) {
console.log('new-message script loaded');
init();
})(jQuery);
'turbolinks:load' event fires successfully but datepicker does not work.
if I reload the page then it works. I'm stuck here for 2 days now, please help.
Datepicker after reloading page
Datepicker without reloading page (when 'turbolinks:load' event fires)
I try to change the class of the selected Datepicker Field, but ist doesn´t work.
Here you find a fiddle with the code
https://jsfiddle.net/ztj6rd5m/
<div id="Kalender"></div>
/* <![CDATA[ */
$(document).ready(function() {
$("#Kalender").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
dateFormat: "yy-mm-dd",
onSelect: function(date, inst) {
$(".ui-datepicker-calendar .ui-datepicker-current-day")
.removeClass("ui-datepicker-current-day")
.children()
.removeClass("ui-state-active");
$(".ui-datepicker-calendar TBODY A").each(function() {
if ($(this).text() == inst.selectedDay) {
$(this).parent().addClass("pickerActive");
return;
}
});
}
});
});
/* ]]> */
.pickerActive {
background: yellow;
}
I tried different cases, but the addClass doesn´t fire.
Can anyone helm me?
Thanx!
Ok. Finally, as promised, i have found the solution. Check the fiddle here.
As i have mentioned in the comment, the datepicker reconstructs itself at some point, that's why your code doesn't work. You can use a timeout function to apply your code.
$(document).ready(function() {
$("#Kalender").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
dateFormat: "yy-mm-dd",
onSelect: function(date, inst) {
$(".ui-datepicker-calendar .ui-datepicker-current-day")
.removeClass("ui-datepicker-current-day")
.children()
.removeClass("ui-state-active");
setTimeout(function() {
inst.dpDiv.find('.ui-datepicker-current-day a').addClass("pickerActive");
}, 50);
return;
}
});
});
I have modified your code a bit. I have removed the following condition check code
$(".ui-datepicker-calendar TBODY A").each(function() {
if ($(this).text() == inst.selectedDay) {
to inst.dpDiv.find('.ui-datepicker-current-day') because you get the selected date instance from the onSelect function parameter.
In your css, you have to add !important to the background color as the background color from Datepicker Ui overrides your style.
I have a link which opens a Bootstrap popver. Inside of this popover, I have a text field that I want to use as a Jquery Autocomplete. The problem is, I am unsure how to access the Div ID for the text box that is in the popover -- using conventional methods don't work. My Autocomplete works fine on a standalone page, but not on popover. Please help!
Text: <input type="text" id="add_game_search"/></div>'>Popover
$(document).ready(function () {
$('[data-toggle="add_game"]').popover({
'trigger': 'click',
'html': 'true',
'placement': 'bottom'
});
});
$(document).ready(function () {
$('.add_game_search').autocomplete({
source: function (request, response) {
$.ajax({
global: false,
url: "http://www.google.com",
dataType: "html",
success: function (data) {
response($.map(data, function (item) {
alert("in response");
}));
}
});
}
});
});
js fiddle: http://jsfiddle.net/hwEp6/2/
simplified fs fiddle proving the concept: http://jsfiddle.net/hwEp6/3/
Here the problem is not with jQuery autocomplete or bootstrap. The actual reason is #add_game_search is generated dynamically when you click the Popover which you have not handled.
Change your code as below,
$(document).ready(function () {
$('body').on('click', '#add_game_search', function () {
alert("here");
});
});
JSFiddle
Can anyone please help me with the date time picker and explain why it is not working?
http://jsfiddle.net/IrvinDominin/6FGgA/
$(function () {
$('input').datetimepicker(
{
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
});
Instead of datetimepicker you need to use datepicker:
$(function () {
$('input').datepicker(
{
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
});
Updated fiddle # http://jsfiddle.net/theoutlander/6FGgA/66/
EDIT: In case I misunderstood and you meant to use datetimepicker defined in the included library there, it seems that the site you've referenced doesn't allow cross-site requests for the scripts. I copied the contents of those scripts into the fiddle here (http://jsfiddle.net/theoutlander/6FGgA/69/) and you can now use your original code.
What is your need.datepicker or datetimepicker
if you want datepicker try this:
$(function () {
$('input').datepicker(
{
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
});
if you want datetimepicker check this link:
http://runnable.com/UgCgGBRfEwILAAEt/how-to-create-date-time-picker-using-jquery-ui
Can any one tell me how I could update a selection in a date picker to a full calendar ie When user selects date from DatePicker then FullCalendar loads events for given date.
Take a look at this : Issue 167: Mini Calender to control Main Calender.
Or make the combination with following example :
$(document).ready(function() {
$("#fullcalendar").fullCalendar({
// .....
});
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
$('#fullcalendar').fullCalendar('gotoDate', d);
}
});
}
<div id="fullcalendar"></div>
<div id="datepicker"></div>
The "gotoDate (method)" would help you select a date programatically in fullcalendar. So let the user select a date using jquery date picker and register a onchange event on the text input that captures the date. When the onchange fires, use gotoDate to set the date in fullcalendar. Refer - http://arshaw.com/fullcalendar/docs/current_date
This might help anyone coming to this answer to add a gotoDate datepicker to fullcalendar as a custom button
customButtons: {
gotoDate: {
text: 'Go to date',
click: function () {
$(this).datepicker({
autoclose: true
});
$(this).datepicker().on('changeDate', function (e) {
$('#fullcalendar').fullCalendar('gotoDate', e.date);
});
$(this).datepicker('show');
}
},
},
footer: {
'center': 'gotoDate'
},