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/

Select Calendar Date and Update Link Label

I have a Link Label on my page. When I click on the label a calendar pops up. When I click on a date on the calendar I want my link label to update to that particular date in this format '30 JAN 2017'
The issue is because of the local variable var dateText =..., My label never updates but gets the correct format.
If I comment or remove the date formatting section than my label updates to the correct date but does not contain the format I'm looking for.
How do I update my link label with the desired formatting when clicking on a specific date on the calendar?
$(document).ready(function() {
$("#dp").datepicker({
onSelect: function(dateText, inst) {
var dateText = new Date().toLocaleString('en-GB', {
day: 'numeric',
month: 'short',
year: 'numeric'
}).split(' ').join(' ');
$("#datep").html(dateText);
},
beforeShow: function(event, ui) {
var $link = $("#datep");
ui.dpDiv.offset({
top: $link.offset().top + 10,
left: $link.offset().left + 10
});
}
});
$("#datep").click(function() {
$("#dp").datepicker("show");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Picker Link Label
<input type="hidden" id="dp" />
<div></div>

You're calling new Date().toLocaleString(..., which uses the current date. All you're missing is passing the dateText parameter to the Date constructor:
$(document).ready(function() {
$("#dp").datepicker({
onSelect: function(dateText, inst) {
var dateText = new Date(dateText).toLocaleString('en-GB', {
day: 'numeric',
month: 'short',
year: 'numeric'
}).split(' ').join(' ');
$("#datep").html(dateText);
},
beforeShow: function(event, ui) {
var $link = $("#datep");
ui.dpDiv.offset({
top: $link.offset().top + 10,
left: $link.offset().left + 10
});
}
});
$("#datep").click(function() {
$("#dp").datepicker("show");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Picker Link Label
<input type="hidden" id="dp" />
<div></div>

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');
})

JQuery Datepicker

Could someone help me to change code, I want to let my members choose a sunday between March – October (of every year ).
But only the 2nd or 4th Sunday of the month.
Thanks for help!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#datepic").datepicker(
{ beforeShowDay: function(day) {
var day = day.getDay();
if (day == 2 || day == 5| day == 4| day == 6| day == 1| day == 3)
{
return [false, "somecssclass"]
} else {
return [true, "someothercssclass"]
}
}
});
});
</script>
</head>
<body>
<p>Uw voorkeursdatum: <input id="datepic"/>
</body>
</body>
</html>

beforeShowDay option is the right place to allow 2nd and 4th sundays only to be picked.
In order to do this, I used two "flags" (variable used to determine a certain state within a loop).
One flag which toggles each time a sunday is encountered in the loop.
And one to be sure to consider only the current month sundays.
DatePicker is looping through each table cells in the function provided in the beforeShowDay option.
And even if it isn't "rendered", days from the previous or next months ARE going through this loop.
I also used a 100ms timeout to reset these flags once a month has been drawn.
It is needed when navigating from a month to another.
Here is the function working in this CodePen.
I left a couple useful console.log.
;)
$(function() {
var even=false;
var inCurrentMonth=false;
$("#DatePicker").datepicker({
beforeShowDay: function(fulldate) {
//console.log(fulldate);
var day = fulldate.getDay();
var date = fulldate.getDate();
// In current month when the date 1 is found.
if(date==1){
inCurrentMonth=!inCurrentMonth;
// To reset values right after month draw.
setTimeout(function(){
even=false;
inCurrentMonth=false;
},100);
}
// This condition prevents conting syndays frome the previous month.
if(inCurrentMonth){
// If NOT a sunday.
if ( day != 0 ){
return [false,"Otherdays"]
} else {
// If this sunday is even (2nd or 4th)
if(even){
even=!even;
return [true,"Selectable-Sunday","You can select me!"]
}else{
even=!even;
return [false,"Unselectable-Sunday"]
}
}
}
}
}).focus();
});

Check Date greater than 30 days from today's date

I am using jQuery datepicker and tried to find out difference between todays date and selected date , but getting issues... rather than issues... I was not able to find it perfectly...
I tried to do this on 'onSelect event of datepicker '
Question:
How to check whether selected Date using jQuery Datepicjer is greater than 30 days from todays date ?
Any help will be appreciated....!!
note: dont want to use any libraries, I need to solve this by using only jQuery.

Get the timestamp for 30 days from now:
var timestamp = new Date().getTime() + (30 * 24 * 60 * 60 * 1000)
// day hour min sec msec
Compare that timestamp with the timestamp for the selected date.
if (timestamp > selectedTimestamp) {
// The selected time is less than 30 days from now
}
else if (timestamp < selectedTimestamp) {
// The selected time is more than 30 days from now
}
else {
// -Exact- same timestamps.
}

I have created one sample for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <input type="text" id="thedate"/>
<div id="checkDate">Check Date</div>
</body>
</html>
and Js
$('#thedate').datepicker();
$('#checkDate').bind('click', function() {
var selectedDate = $('#thedate').datepicker('getDate');
var today = new Date();
var targetDate= new Date();
targetDate.setDate(today.getDate()+ 30);
targetDate.setHours(0);
targetDate.setMinutes(0);
targetDate.setSeconds(0);
if (Date.parse(targetDate ) >Date.parse(selectedDate)) {
alert('Within Date limits');
} else {
alert('not Within Date limits');
}
});
You can check this code online Here

Try this:
$('input').datepicker({
onSelect: function()
{
var date = $(this).datepicker('getDate');
var today = new Date();
if((new Date(today.getFullYear(), today.getMonth(), today.getDate()+30))>date)
{
//Do somthing here..
}
},
});
demo: http://jsfiddle.net/jeY7S/