We Keep Coding

make the default single date picker date

I have a case where I use the daterangepicker library to retrieve the date, here is the jsfiddle link: https://jsfiddle.net/heriira_/0bgqxdLa/5/
$(function () {
var start = moment().subtract(1, "days");
$("#demo").daterangepicker(
{
singleDatePicker: true,
startDate: start,
},
function (start, end, label) {
console.log(start.format("YYYY-MM-DD"));
}
);
});
in the code above how to make a handle if, for example, the default value is yesterday, and when we choose a time that is more than yesterday, for example two days before it will return to the default, which is yesterday's date.

based on the documentation https://www.daterangepicker.com/#options
you just need to add minDate:
so the date before yesterday can't be selected
$(function() {
var start = moment().subtract(1, "days");
$("#demo").daterangepicker({
singleDatePicker: true,
startDate: start,
minDate: start
},
function(start, end, label) {
console.log(start.format("YYYY-MM-DD"));
}
);
});
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<input type="text" id="demo" value="10/24/1984" />

Amsul DateTimePicker - How to unselect active date?

I am using amsul DateTime picker (https://amsul.ca/pickadate.js/date/) where if you see in the preview the today's date is highlighted in green. Now if you move the calendar to the next month or previous month. Every month's today's date is also highlighted.
How do I unhighlight any other dates then today's date?
$('.datepicker').pickadate()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<input type="text" class="datepicker">

I belive this is the answer:
https://github.com/amsul/pickadate.js/issues/805
ilnee commented on 2 Oct 2016
I ran into this issue as well. As a workaround, I remove the
picker__day--highlighted class from every div with that class that
doesn't have today's timestamp as data-pick value:
var now = new Date();
var timestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate()) / 1;
$('.datepicker').pickadate({
onRender: function() {
$('div.picker__day--highlighted').each(function(index, value) {
if ($(this).data('pick') !== timestamp) {
$(this).removeClass('picker__day--highlighted');
}
});
}
});

Display specific dates in bootstrap datepicker

I'm using bootstrap date picker in my project. It's a session booking project. From the admin panel, I add the sessions for specific dates and I want the user's of my website to be able to see the dates for which I have added a session. My frontend receives the data from database. The data contains all the dates for which I have added a session. I want my datepicker to display only these dates from the data and disable the other dates.
Currently I have temporarily used a select box to solve this issue. But a datepicker would be better as it looks good is easy to navigate.
See the picture below. This is how I have used a select box to temporarily solve the problem
Here is the desired output that I want
It should be a datepicker with only those dates enabled which I receive from the database. The other dates should be disabled
I tried searching it on google but I'm not able to find the solution. Is this possible using bootstrap date picker? If yes, please suggest a workaround.

You can use beforeShowDay function to enable only the dates returned from your back end system.
Documentation here
This function is executed for every date, it checks if it is present in the list of applicable dates, returns true if present and enables it, else returns false and disables it.
$(function () {
let enabledDates = ['2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08'];
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
return enabledDates.indexOf(fullDate) != -1
}
});
});
beforeShowDay function also allows you to return classes for custom styling
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
if (enabledDates.indexOf(fullDate) != -1) {
return {
classes: 'enabled',
tooltip: 'You can select this date'
};
} else
return false
}
.enabled {
background: #DCDCDC;
}

None of the other solutions worked for me so here is my solution.
The documentation is not so clear and lacks of example but you can see a function that takes a date as a parameter and returns a Boolean, indicating whether or not this date is selectable
In this snippet, look at January 2020 for example in order to see only the active dates.
$(document).ready(function() {
var datesEnabled = [
'2021-01-01', '2021-01-11', '2021-01-21',
'2021-02-01', '2021-02-11', '2021-02-21',
'2021-03-01', '2021-03-11', '2021-03-21',
'2021-04-01', '2021-04-11', '2021-04-21',
'2021-05-01', '2021-05-11', '2021-05-21'
];
$("#datepicker-lorem").datepicker({
language: "fr",
autoclose: true,
todayHighlight: true,
todayBtn: true,
title: 'Test ;-)',
weekStart: 1,
format: 'dd/mm/yyyy',
// On n'active que les dates possibles
beforeShowDay: function(date) {
var allDates = date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2);
if (datesEnabled.indexOf(allDates) != -1) {
return {
classes: 'date-possible',
tooltip: 'Vous pouvez choisir cette date'
}
} else {
return false;
}
}
});
});
/* For better frontend result, add class to active date and add opacity to disabled date */
td.day.disabled {
opacity: 0.4;
}
td.date-possible {
background-color: red;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<input class="form-text form-control" type="text" id="datepicker-lorem" name="date_demande" value="" size="60" maxlength="128">
</div>
</div>
</div>

Using 'beforeShowDay' parameter you can disable dates:
<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="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/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>
$(function() {
//date list that you want to disable
disableddates = ['10-10-2018', '10-11-2018', '10-12-2018'];
$("#datepicker").datepicker({
format: 'dd-mm-yyyy',
beforeShowDay: function(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
var currentdate = (m + 1) + '-' + d + '-' + y;
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1) {
return [false];
}
}
return [true];
},
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
});
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
</body>
</html>

unable to set calendar start date in pikaday calendar

When i trigger the start date input box, I want to show the future or past month in calendar popup as a starting date in end date calendar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css">
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/site.css">
</head>
<body>
<input type="text" id="datepicker">
<br/>
<input type="text" id="datepicker2">
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"> </script>
<script src="https://dbushell.com/Pikaday/pikaday.js"> </script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function (date) {
picker2.setMinDate(date);
//picker2.???? to set the starting month of picker2 calendar
}
});
var picker2 = new Pikaday({
field: document.getElementById('datepicker2'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function () {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});
</script>
</body>
</html>
please check the above example, based on start day selection i want to trigger the end date calendar starting month. please suggest.
JS bin link

As I understand your question, you want to set the selected month in picker to the picker2 object. use the API onOpen.
Example
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function(date) {
//console.log(this.getMoment().format('Do MMMM YYYY'));
console.log('test ' + date);
picker2.setMinDate(date);
//picker2.setStartRange(date)
}
});
var picker2 = new Pikaday({
field: document.getElementById('datepicker2'),
format: 'D MMM YYYY',
minDate: new Date(),
onOpen: function() {
picker2.gotoDate(picker.getDate())
},
onSelect: function() {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});

When I worked with Pikaday package in Vue.Js project I had to set default date to my date field in form. I tried many different versions of setting default date. But they didn't work for me. Finally I found the solution for my situation. The solution was to set prop like auto-default="autoDefault" here autoDefault is equels to true to Pikaday component like this...
<vue-pikaday v-model='date' auto-default="autoDefault" :options="pikadayOptions" />
data() {
return {
autoDefault : true,
pikadayOptions: {
format : 'YYYY/MM/DD',
minDate : moment().toDate(),
},
}
},

Hover bootstrap datepicker

I'm trying to use the hover() function of JQuery to do some formatting to my DatePicker when entering the mouse in one of its rows but unfortunately my hover() is never call.
Here is how I initialize my datepicker:
//WEEK PICKER
moment.locale('fr', {
week: { dow: 1 } // Monday is the first day of the week
});
//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can //have your owh)
$("#weeklyDatePicker").datetimepicker({
format: 'MM-DD-YYYY'
});
//Get the value of Start and End of Week
$('#weeklyDatePicker').on('dp.change', function (e) {
var value = $("#weeklyDatePicker").val();
var firstDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY");
var lastDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY");
$("#weeklyDatePicker").val(firstDate + " - " + lastDate);
});
Here is how I'm setting my hover() function:
$( ".bootstrap-datetimepicker-widget tr" ).hover(
function() {
console.log('in');
}, function() {
console.log('out');
}
);
But no logs are being written. I'm sure to have the right selector because I got this in my CSS:
.bootstrap-datetimepicker-widget tr:hover {
background-color: #808080;
}
And the color is updating when the mouse goes hover.
Any idea?
EDIT
Here is a Jfiddle that reproduce my code: https://jsfiddle.net/5kzjvL1u/

I believe Robert C is correct in his comment in that it's being loaded intor the DOM after the page has loaded and you are correct in your suggestion of placing the :hover within a click event for the input field. See this snippet for a working example.
$(document).ready(function() {
moment.locale('fr', {
week: {
dow: 1
} // Monday is the first day of the week
});
//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can //have your owh)
$("#weeklyDatePicker").datetimepicker({
format: 'MM-DD-YYYY'
});
$('#weeklyDatePicker').on('dp.change', function(e) {
var value = $("#weeklyDatePicker").val();
var startDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY");
var endDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY");
$("#weeklyDatePicker").val(startDate + " - " + endDate);
});
$("#weeklyDatePicker").click(function() {
$(".bootstrap-datetimepicker-widget tr").hover(
function() {
console.log('in');
},
function() {
console.log('out');
}
);
});
});
.bootstrap-datetimepicker-widget tr:hover {
background-color: #808080;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 form-group">
<div class="input-group" id="DateDemo">
<input type='text' id='weeklyDatePicker' placeholder="Select Week" />
</div>
</div>
</div>
</div>