We Keep Coding

Is there any method to click on a flatpickr date automatically using jQuery?

I tried to auto-click on below calendar created with flatpickr using jQuery but it's not working, Any method to do that?
Image: Screenshot of Calander.jpg
<span class="flatpickr-day click-this" aria-label="October 9, 2022" tabindex="-1">9</span>
jQuery (function($) {
$(document).ready(function() {
$(".click-this").trigger("click")
})
})
Can someone help me to click automatically on the date on calendar with click-this class?

Assuming from the context of your question that you're trying to set the default date displayed in the flatpickr control, then you don't need to auto-click anything. You can simply set the defaultDate property in the settings object you provide when instantiating the library:
const today = new Date();
const tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
$("#date").flatpickr({
inline: true,
defaultDate: tomorrow
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js" integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<input type="text" id="date" />
More details on the settings available when using flatpickr can be found in the documentation: https://flatpickr.js.org/options/

ToastUI Calendar Dependency requirement

I was trying to work with Toast UI calendar available here:
https://github.com/nhn/tui.calendar
I tried to use it via CDN which requires us to insert the following:
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
<script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
When I tried to create a calendar in my html file, I noticed that it lacked a few functions such as date-picker, render-range, or even the event scheduler pop-up. I also noticed that they talk of tui-code-snippet as a dependency for this calendar:
https://github.com/nhn/tui.calendar#-dependency
However, I'm not sure what to include from the tui-code-snippet exactly, as there are a bunch of functions in there and they state that we should only import the functions we need from it:
https://github.com/nhn/tui.code-snippet#-usage
Any help in this would be greatly appreciated.
EDIT: I added the following tui-code-snippet file as well, and this only helped me to get the calendar to show/render, but all the functionalities are still missing:
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>

The code lacks a few js links such as :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>
Once these links are attached, we simply need to create a tui.calendar instance and then post the custom options as required. An example of such can be:
<script type="text/javascript">
var cal, resizeThrottled;
var useCreationPopup = true;
var useDetailPopup = true;
var datePicker, selectedCalendar;
cal = new tui.Calendar('#calendar', {
defaultView: 'week',
useCreationPopup: useCreationPopup,
useDetailPopup: useDetailPopup,
calendars: CalendarList,
template: {
milestone: function(model) {
return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
},
allday: function(schedule) {
return getTimeTemplate(schedule, true);
},
time: function(schedule) {
return getTimeTemplate(schedule, false);
}
}
});
</script>
and it should load the calendar just fine, and allow adding events to the scheduler.
I hope this helps anyone else stuck in a similar problem.

How do I get Date Range Picker selected date to a variable?

hi i am using data range picker for filter option. there is change with default date picker range is . here i am using a div instead of text box. so tthat i need the selected start date and end date in a variable how can i due it?. i try like this way...
$('#Date').daterangepicker();
$(document).on("click",".applyBtn",function() {
// var range = $('#Date').datarangepicker.getRange();
// var startDate = range.start;
// var endDate = range.end;
var x =$('#Date').data('daterangepicker').StartDate()
alert(x);
});
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<div id="Date" class="col-xs-5 col-md-4 paddingNull filterImageAlign" >here select</div>

Try this.
var startDate = $('#Date').data('daterangepicker').startDate._d;
var endDate = $('#Date').data('daterangepicker').endDate._d;

If you need to get it formatted locally
$('#Date').daterangepicker().on('apply.daterangepicker', function (e, picker) {
var startDate = picker.startDate.format('DD-MM-YYYY');
var endDate = picker.endDate.format('HH:mm');
})

Using angular's $scope.info varible inside a service

I want to use this method (which ouputs a message if a user is typing) with a service. the method is updating a info varible (set its text to "typing" or blank).
I thought about using this method as a service to my angular model. the problem is that this method needs access to the text varible {{info}} with sits inside the view (some html).
How can I do that?
my code is below....
Thanks
js file
mymodule.controller("cntrlChat", ['$scope','isUserTypingService',
function($scope,isUserTypingService){
$scope.isUserTyping=function(){
isUserTypingService($scope.info);
}
}]);
mymodule.factory('isUserTypingService',['$q','$timeout', function($q,$timeout) {
var isUserTyping= function(info) {
runTwoFunctionWithSleepBetweenThem(function (){info='user is typing...';},function (){info='';},3500);
};
var runTwoFunctionWithSleepBetweenThem=function(foo1, foo2, time) {
$q.when(foo1()).then(() => $timeout(foo2, time));
}
return isUserTyping;
}]);
index.html
<html>
<head>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<div ng-app="mymodule" ng-view>
</div>
</html>
chat.html
{{info}}

you could do something like this:
<input ng-model="userInput" ng-change="runWhenTyping()" />
in your controller:
$scope.userInput = '';
$scope.runWhenTyping = function () { isUserTypingService($scope.userInput) }
Each time they type runWhenTyping will be called and in turn it will call your service.

Get the HTML body of a <link> element with an ID via jQuery

I have the following in the header of my site
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">
I want to retrieve the full <link> content as shown above with jquery.
I tried
var a = jQuery('#swp-google-font-headline-css').get(0);
console.log(a, typeof a)
But the console output displayed the actual content, but it seem to be an object rather than a string and i specifically want it to be a string.
See demo https://jsfiddle.net/collizo4sky/qh6dnmg9/
Please help

Use outerHTML property of the Element
The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants.
var a = jQuery('#swp-google-font-headline-css').get(0).outerHTML;
console.log(a,typeof a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff

Maybe this is what you want:
var a = jQuery('#swp-google-font-headline-css').clone();
console.log(a[0]);

You can use innerHTML property on your a variable.
$(document).ready(function() {
var a = $('#swp-google-font-headline-css').get(0);
console.log(a.innerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">

There are two means by which this can be achieved, the first – as already shown – is to use the Node.outerHTML property, which in your posted code can by achieved like so:
var a = jQuery('#swp-google-font-headline-css').get(0).outerHTML;
console.log(a, typeof a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff
And the other approach is more of a shim, and achieved by appending the found-element, here the <a>, to another element and accessing the innerHTML of that parent element:
function getElementHTML(node) {
var wrapper = document.createElement('div');
wrapper.appendChild(node);
return wrapper.innerHTML;
}
console.log($('#swp-google-font-headline-css').get(0));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff

You can use outerHTML.
var b = a.outerHTML;
Demo: https://jsfiddle.net/qh6dnmg9/2/