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.
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 have a need to set the min Date for one of my datepicker inputs to 5 days after today's date. I have setup the jQueryUI datepicker directive for AngularJS, and by itself, it works great. When I try to add any properties to the input for an individual datepicker, such as 'min' (Date), it does not appear to honor the property, and shows me all dates.
sorry for not having a jsfiddle or plunker
EDIT: Updated to show solution
index.html
<input id="requestDate" type="text" ng-model="requestDate" ss-datepicker min-date="5"/>
Datepicker.js
app.directive('ssDatepicker', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl){
$(function(){
element.datepicker({
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
beforeShow: function(element, datepicker){
if(attrs.minDate){
angular.element(element).datepicker("option", "minDate", attrs.minDate);
}
if(attrs.maxDate){
angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
}
},
onSelect:function(date){
scope.$apply(function(){
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
Thanks in advance!
Okay, thanks to Sebastian, I was able to figure it out. It doesn't, for some reason, like a date variable for the "min-date" attribute, but it will accept the offset, which, for my purposes, works exactly as needed. I am fairly sure that it is a formatting problem with the date that prevented it from working.
app.directive('ssDatepicker', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl){
$(function(){
element.datepicker({
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
beforeShow: function(element, datepicker){
if(attrs.minDate){
angular.element(element).datepicker("option", "minDate", attrs.minDate);
}
if(attrs.maxDate){
angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
}
},
onSelect:function(date){
scope.$apply(function(){
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
How do you thing the "min" value should led to some changes?
Your directive doesn't read this value, does it?
You can access it via attrs.min in your link function.
Have you got some documentation for what you are doing. I can't find something, that looks like your code.
Oh - you are not using Angular UI Bootstrap Datepicker but jQuery UI Datepicker.
So you have to set this value: http://api.jqueryui.com/datepicker/#option-minDate
...
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
minDate: attrs.min, // get the value of the "min" attribute - maybe you should take care that it is really a date
...
Just like: http://plnkr.co/edit/MyduNfrchgsuD9mAYOEU?p=preview
I would like this to log out the value of the input:
HTML:
<input id="spinner" />
JS:
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(ui.value)
}
});
});
Fiddle: http://jsfiddle.net/u9T5s/
jsFiddle Demo
I am not sure what the appropriate hook is as far as the jquery ui API goes, but here is a simple way to do this as well:
$(function() {
$("#spinner").spinner();
$('.ui-spinner-up').click(function(){
console.log("Increased to "+$('#spinner').val());
});
$('.ui-spinner-down').click(function(){
console.log("Decreased to "+$('#spinner').val());
});
});
This this:
http://jsfiddle.net/u9T5s/1/
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(this.value)
}
});
});
Use this.value instead of ui.value. This will take the current object to which the change function is attached.
Answer to comment: you implement different function one is change and one is spin.
Also change will execute one on blur after a real change happened an spin executes once up/down click is fired.
spin: function( event, ui ) {
if ( ui.value > 10 ) {
$( this ).spinner( "value", -10 );
return false;
} else if ( ui.value < -10 ) {
$( this ).spinner( "value", 10 );
return false;
}
}
i have tow pages one is mange.aspx and other is pop-up.aspx
in mange.aspx i load the other page with ajax and display it in jquery ui Dialog
my problem is when i load page the jquery ui Datepicker inside that page not working
this is my code
$(function () {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "../images/calendar-icon.png",
buttonImageOnly: true
});
$('#Add').click(function () {
var $dialog = $('<div id="MyDialog"></div').appendTo('body')
.load("../Pop-up.aspx #pop-up")
.dialog({
position: 'center',
width: 550
// code .....
});
});
});
You need to create the datepicker after you load the popup. Creating the datepicker before will do nothing.
function createDatePicker() {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "../images/calendar-icon.png",
buttonImageOnly: true
});
}
$(function () {
$('#Add').click(function () {
var $dialog = $('<div id="MyDialog"></div').appendTo('body')
.load("../Pop-up.aspx #pop-up", createDatePicker)
.dialog({
position: 'center',
width: 550
});
// code .....
});
});
Your datepicker creation code is now inside its own function, and is set as the callback when the popup page is loaded. This way, the datepicker will be created as soon as the page is loaded.
I have a jquery ui datepicker range with a from-date and to-date, how do I send an alert when the date range is changed? here's my code:
$(function() {
var dates = $("#date-from, #date-to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function(selectedDate) {
instance = $(this).data("datepicker"), date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.datepicker("option", "dateFormat", "DD, d MM, yy");
}
});
$('#date-from').datepicker({
onClose: function() {
alert("closed");
}
});
});
but the onClose: event is not fired. Thanks
You can either separately initialise #date-from and #date-to, or include the onClose option in the combined initiation and check for the element ID. Here is an example for the 2nd approach:
var dates = $("#date-from, #date-to").datepicker({
...
onClose: function() {
if ($(this).attr('id') == 'date-from') {
alert("closed");
}
}
});
See this in action: http://jsfiddle.net/william/L9Szd/1/