Disable dates in Protoplasm DatePicker - javascript

I am using the ProtoPlasm Datepicker in one of my apps, now I want to disable all the dates earlier than today.
I used the following code:
Protoplasm.use('datepicker').transform('input[type="text"].xyz_datepicker', {dateFormat: 'MM/dd/yyyy'});
But I'm still unable to do it. Any help?

I am not familiar with Protoplasm; however, according to their doc, you should be able to do this:
Protoplasm.use('datepicker')
.transform('input.datepicker', { 'minDate' : '1/1/2016' })
Ref. http://jongsma.org/software/protoplasm/control/datepicker
However, I don't recommend this approach. I recommend just using standard jQuery UI as outlined https://jqueryui.com/datepicker/#min-max

I have fixed the issue by adding the following line of code to my js file:
Protoplasm.use('datepicker').transform('input.datepicker', { 'minDate' : '1/1/2016' })

Related

How to use within() function with contains() function incypress

I have a datepicker calendar as below [![enter image description here][1]][1]
To select a particular date I am using this code
cy.get('.fa-calendar').click();
cy.get('[label="select-year"]').select(2023);
cy.get('[label="select-month"]').select('Jan');
Now to select the date I am using below approach which is working fine
cy.get('.ngb-dp-month>ng-star-inserted:nth-of-type(1)').within(()=>{
cy.get('.ngb-dp-day').contains('10').click();
})
but I don't wanted to use nth-of-type(1) because it will cause issue in future I tried this approach whic didn't work
cy.contains('January 2023').within(()=>{
cy.get('.ngb-dp-day').contains('10').click();
});
Can you folks help me resolving the issue also any other alternative is also welcome
[1]: https://i.stack.imgur.com/38XyO.jpg
Basically, you just need to combine the two different ways you tried: cy.get('.ngb-dp-month') and cy.contains('January 2023')
This should work
cy.contains('.ngb-dp-month', 'January 2023').within(()=> {
cy.contains('.ngb-dp-day', '10')
.click()
})

Animating live changes in meteor issue

I am trying to animate each time the post.text is updated in meteor using Percolate:Momentum (I have tried other plugins but those didn't work either). The post.text updates fine, but it does not animate - not sure what I am doing wrong :S
JS
Template.textDisplay.helpers({
post: function () {
return MongoDatabase.findOne({}, { sort: { date: -1} });
}
});
MongoDatabase.insert({
text: message,
date: new Date()
});
HTML
<template name="textDisplay">
{{#momentum plugin='right-to-left'}}
{{post.text}}
{{/momentum}}
</template>
#Peter looking at the code it seems like Percolate:Momentum support just multiple elements a collection.find() cursor with at least 2 elements works fine. I made a simple jQuery use of fadeIn() to show you how you can actually use any jQuery to animate it
http://meteorpad.com/pad/32rHhkm6NmdxSsTt4/Copy%20of%20Test
you can try open a github issue for Percolate:Momentum maybe they have a work around or find a different library? But if it's just a single element it's actually easy to use jQuery for this. But there probably should be different animation package that works with just one element. Hopefully this is helpful.

TypeError: datepicker_instActive is undefined in Jquery-ui Datepicker

I have built rails + angular app. In this I have used jquery-ui datepicker. I didn't find the solution why I get this error in console:
TypeError: datepicker_instActive is undefined
if(!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline?
datepicke...
in console.
My versions of css is jQuery UI Datepicker 1.11.2
and js is also the same. jQuery UI Datepicker 1.11.2
And when I move my cursor on datepicker widget no.of same error counts are increased.
I think issue is in this function of Jquery:
function datepicker_handleMouseover() {
if (!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicker_instActive.dpDiv.parent()[0] : datepicker_instActive.input[0])) {
$(this).parents(".ui-datepicker-calendar").find("a").removeClass("ui-state-hover");
$(this).addClass("ui-state-hover");
if (this.className.indexOf("ui-datepicker-prev") !== -1) {
$(this).addClass("ui-datepicker-prev-hover");
}
if (this.className.indexOf("ui-datepicker-next") !== -1) {
$(this).addClass("ui-datepicker-next-hover");
}
}
}
Do you have face same issue ever? Or any idea how can I resolve it. I have used bootstrap-modal popup and in that form I used datepicker.
Same issue here in jQuery UI 1.11.4. We just created a bug ticket http://bugs.jqueryui.com/ticket/14578 and hope this is fixed soon by the jQuery team.
To workaround the problem, just
download only the datepicker component from the jQuery UI site via custom download (https://jqueryui.com/download/),
Extract jquery-ui.js from the ZIP archive and rename it, e.g. jquery-ui-1.11.4-datepicker-fix.js
embed the script right after your full jQuery UI script in your template(s), and
add a null-check to the first line of function datepicker_handleMouseover() as follows:
function datepicker_handleMouseover() {
if (!datepicker_instActive || !$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicker_instActive.dpDiv.parent()[0] : datepicker_instActive.input[0])) {
...
}
No further changes to your code should be required. The patch can easily be removed when the bug has been fixed by simply removing the script tag from your templates.
Note that this workaround completely overwrites the original datepicker plugin.
I encountered this error when I included jquery-ui twice. Removing either instance resolved it.
After destroying a datepicker, calling refresh on another datepicker sets datepicker_instActive again, which might be a more acceptable workaround than modifying external plugin code:
// Delete a datepicker
$('#date1').datepicker('destroy');
// WORKAROUND: Refresh another datepicker until the following is fixed
// http://bugs.jqueryui.com/ticket/14578
$('.hasDatepicker').last().datepicker('refresh');
Here's an updated Fiddle from the ticket to demonstrate the workaround.

jQuery Setup and issues

How do you set up jQuery in ColdFusion? I have downloaded 2.1.1.js created a js folder file and call the library like so .. <script src="/js/jquery-2.1.1.js"></script> I am trying this code but for some reason I cannot get this to work any suggestions or help?
$(document).ready(function () {
$('span.date').each(function() {
var dateFormat = $(this).text()
var dateFormat = $.datepicker.formatDate('MM/DD/YYYY', new Date(dateFormat));
//alert(dateFormat);
$(this).html(dateFormat + "<br>");
});
});
You would need to add jQuery UI from this page: http://code.jquery.com/. You need both:
jQuery-ui CSS (pick a theme that fits your design or appeals to you)
jQuery-ui JS
Examples:
http://code.jquery.com/ui/1.11.1/jquery-ui.js
http://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css
And then your code would need to change per the jQuery UI Datepicker API Documentation. Your code would not work as it is. Take a look at various examples here: http://jqueryui.com/datepicker/ and let us know if you still need help.

Changing state of JQuery Mobile Calendar dates in code (JS)

The tutorial at:
http://dev.jtsage.com/jQM-DateBox/demos/calendar/blackhigh.html
explains how to disable/highlight days in HTML.
Is there a neat way to do this at runtime - i.e with JavaScript, preferably without manually adding/removing classes?
You can set disable dates through js like this
$('#mydate').data('datebox').options.blackDates = ['2012-01-01','2012-01-06'];
and highlight dates like this
$('#mydate').data('datebox').options.highDates = ['2012-01-10','2012-01-12'];
Demo here - http://jsfiddle.net/jj8th/

Categories

Resources