Styling custom date picker - javascript

I'm using this datepicker plugin to display a popup datepicker.
It's working fine, but I'm having trouble assigning it the correct styles.
I have 2 of them, the first not being an issue.
I have the following JS:
$(".datepicker1").pickadate({
min: 1,
onClose: function() {
var picker = $input.pickadate("picker");
picker.set("select", this.component.item.select.pick);
picker.open();
}
});
What it does is simple: The moment a user selects a date on the first picker, the second one is displayed, with the previously selected date displayed(In order to let the user know what the range of dates will be that he/she selects).
Everything works just fine, but I don't want the default blue square background for the selected date. I want something like this as opposed to what I currently have, which is just a different background-color.
Does anyone know how I can achieve this?

Without being able to see the markup or css, my first inclination with these is to add a CSS triangle either to the element, or to the elements :before pseudo class.
As for making the CSS triangle, go here:
http://apps.eky.hk/css-triangle-generator/

You have to find the class
.picker__day--highlighted:hover, .picker--focused .picker__day--highlighted
in the default.date.css file. Then, you can easily modify "everything" concerning the today hightlight shape

Related

How to check whether element is already clicked or not in protractor

I need to check whether element is already clicked/selected or not in protractor.
My scenario is given below.:
I need to check whether the date which i am going to select is already selected in angular js calendar. However single click clear the selected date in calendar .i didnt get any method which return element is clicked or not.
E.g i need to select 11th jan in calendar so before that i need to check whether 11th jan is already selected or not
I also tried element(locator).isSelected() which returns the false value.
Kindly suggest solution which will solve my issue.
Assuming that once clicked, the calendar changes somehow. I'm assuming possibly that some css changed to show what was selected. I am going to make some assumptions on what this looks like. This is difficult without html. You could use getCssValue:
Assumption that you have all your calendar dates with a css called "dates" and that the 10th item in this array of elements is the January 11th. Next assumption, the website css changes when selected. Let's say this css is called "date-selected"...
element.all(by.css('.date')).get(10).getCssValue().then(css => {
console.log(css);
// TODO: parse css and/or expect "date-selected" in "css" to be true
});

CSS is not applying on first click

I have two calendars implemented in one page, but in two different popup boxes. These two calendars have two different CSS applied (e.g. 1.css, 2.css). I used jQuery to enable and disable a calendar in one of the popup boxes. Currently, I am getting new CSS applied when the calendar is open, and removed when the calendar is closed.
My issue is, on first click, it is first applying the old CSS, and after I close the calendar and click it again, then it's applying the new CSS.
Here is the code I used:
$('#inputField').datepicker({
beforeShow: function(input, inst) {
$('div#div1').append($('#ui-datepicker-div'));
$('link[title=2-css]')[0].disabled=false;
},
onClose: function() {
$('div#div2').append($('#ui-datepicker-div'));
$('link[title=2-css]')[0].disabled=true;
}
});
How can I fix this?
This issue has been resolved. Like I mentioned in my question, I have two calendars on same page with different css. Since, the both calendar has same component, there was namespace conflict. The reason I append datepicker to an empty div was to isolate one calendar with another. Aparently it did work but was not the 100% accurate. So, I changed the namespace of one calendar that is being used as class for css. This solved my problem.

Jquery datetimepicker opening first time at different position

I am using Jquery datetimepicker plugin link here
When I click on the field for first time, the datetimepicker is not opening near the field, something like below, the picker is way above the field.
When I close it and click on it second time and after, it is appearing in proper place. depicted below.
This is weird, and when I set either timepicker or datepicker to false, the picker is working fine from the first click.
The code I used to construct the picker is below,
HTML
<input id="DateTimeFrom" type="text" class="widthAdjust" />
JS
$('#DateTimeFrom').datetimepicker({
onShow:function( ct ){
this.setOptions({
maxDate:maximumDate,
maxTime:maximumTime
})
},
mask : true
});
I am not applying any CSS except for setting width to the field.
For maximumDate and maximumTime I performing some logic and setting to it, But I am pretty sure that the logic has no effect on this issue.
EDIT
I have my code in fiddle here. but I couldnt link the datetimepicker js and css.
Any sort of guidance will be helpful.
Try to set offset() for datetimepicker
$("#buttonID").click(function(){
$('.xdsoft_noselect').css('top', $("#DateTimeFrom").offset().top + $("#DateTimeFrom").outerHeight());
});

date picker should appear when clicked on image

In fiddle i am displaying a dynamic date picker which displays date when we put curser on that text box, that is fine.i want a image to be placed right side of text box and when image will be clicked then same date picker will be displayed.
http://jsfiddle.net/cBwEK/
I am trying by putting an image there but when i click on that image nothing happens. How can it be done? Any help please
As it turns out, there is an option for this very thing: toggleElements. It expects a collection of other elements that can also invoke the datepicker. I added an array with a single element and it seems to work just fine.
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['imageInvokerP']
});
Fiddle: http://jsfiddle.net/cBwEK/10/
one ans was given by Jonathan and this should be the way of doing things of these kinds.
but therez an easy solution you can take
assuming id of your image is Image and that of text box is Input
you can do everything normally
binding the datepicker to the input element using $('#Input').datePicker() in document.Ready
next you can bind the click event of the $('#Image') like this
$('#Image').click(function(){
$('#Input').click();
});
this way automatically your input element will get focus when you will click on the image.

Change jquery ui datepicker programmatically

I've got a jquery ui datepicker on my page. It's linked to a span not an input. It's currently tweeked to select a week at a time. I've also got two buttons on my page 'Previous Week' and 'Next Week'. I want the buttons to control what's selected by the datepicker. (ie jump forward / backward by one week when pressed).
I'm not sure how to grab the datepicker so I can mess with it (or what I actually mess with - is there a real 'object' there, or is it a just a load of css / html component like 'ui-datepicker-current-day' etc).
there is a real object you can hold a reference to.
example:
var datePicker = $("#id").datepicker({firstDay: 1});
to know what you can do with it, check:
http://jqueryui.com/demos/datepicker/

Categories