I have an input date where I want the user not to choose dates before the current day I am using the minDate function but by default, the calendar jumps me to the date of november 2027. I hope you can help me, I've been working on this for days.
$(document).ready(function(){
$(function(){
const fechaAhora= new Date();
const year=fechaAhora.getFullYear();
const mes=fechaAhora.getMonth() + 1;
const dia=fechaAhora.getDate()+ 1;
const fechaD=year+'-'+mes+'-'+dia;
$("#fecha").datepicker({
minDate:fechaD,
})
})
});
Use this code:
minDate: new Date()
Hi i am trying to give fix hours and minutes to the html view trying to modify the plugin but having issue with changes
This is my plugin code
(function ($) {
$.extend($.ui, { timepicker: { version: "0.3.3"} });
var PROP_NAME = 'timepicker',
tpuuid = new Date().getTime();
And Now i am tring to set the default hour default to Zero(0) and the minute to the 30 How can i do that...?
this is what i have tried:
tpuuid = new Date().getTime();
tpuuid.setHours(0);
tpuuid.setMinutes(30);
but is is saying like tpuuid is not a funtion... how can resolve this isssue.. thanks for help.
THIS IS PLUGIN SOURCE : CLICK HERE TO SEE THE PLUGIN
Change your code From
tpuuid = new Date().getTime();
tpuuid.setHours(0);
tpuuid.setMinutes(30);
to
tpuuid = new Date();
tpuuid.setHours(0);
tpuuid.setMinutes(30);
We are using Bootstrap timepicker which can we be found here
Now we are using it like this $('#timepicker1').timepicker();
So it is showing timepicker in this way
Now we have some dependencies on the time format So what we want is the hour part in the if it has value in single digit suppose 8 So it should display as 08.
I am looking at the framework options but didn't find any.
$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
var hours=e.time.hours, //Returns a string
min=e.time.minutes,
merdian=e.time.meridian;
if(hours.length==1){
$('#timepicker1').timepicker('setTime', '0'+hours+':'+min+' '+merdian);
}
I think this should help. :)
Hope I am not too late. Try using the TimePicker's change method:
$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
var timePicked = $('#timepicker1').val();
if(timePicked.length < 8)
$('#timepicker1').val("0" + timePicked);
});
I've looked at it, as that particular picker is no longer maintained and doesn't have the functionality you seek it looks like you are going to have to fork the project and get your hands dirty implementing the styling. Or use another picker.
Personally I'd timebox this to say 1 hour and see if you can get it done if you are short of time, otherwise use another component.
$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
var hours=e.time.hours, //Returns an integer
min=e.time.minutes,
merdian=e.time.meridian;
if(hours < 10) {
$(e.currentTarget).val('0' + hours + ':' + min+' '+merdian);
}
});
I had the same issue. But I have created a code for time picker. I will be very helpful for multiple time picker also.
This code works for 01:00:00 that means H:i:s
$('.timepicker').timepicker().on('changeTime.timepicker', function (e) {
let timePicked = $(this).val();
(timePicked.length < 8) ? $(this).val("0" + timePicked) : '';
});
This code works for only H:i
$('.timepicker').timepicker().on('changeTime.timepicker', function (e) {
let timePicked = $(this).val();
(timePicked.length < 5) ? $(this).val("0" + timePicked) : '';
});
I'm using the bootstrap-datepicker to check the days where my website got sales and I want to display or highlight the dates there was at least one sale. I can pass the dates on JSON and then make them into a Javascript's array, but I don't know how to make the datepicker to fetch the dates and highlight them.
Is there a way with the bootstrap-datepicker to achieve this?
here is another example to highlight a range of dates:
var inRange=false;
$('#elementPicker').datepicker({
beforeShowDay: function(date) {
dateFormat = date.getUTCFullYear() + '-' + date.getUTCMonth() + '-' + date.getUTCDate();
if (dateFormat == '2014-01-01') {
inRange = true; //to highlight a range of dates
return {classes: 'highlight', tooltip: 'Title'};
}
if (dateFormat == '2014-01-05') {
if (inRange) inRange = false; //to stop the highlight of dates ranges
return {classes: 'highlight', tooltip: 'Title'};
}
if (inRange) {
return {classes: 'highlight-range'}; //create a custom class in css with back color you want
}
}
});
$('#xxx').datepicker()
.on('onRender', function(ev){
if (ev.date.valueOf() == your date){
return 'highlight';
}
});
Might do the trick, although I am not sure.
There is simple way to set multiple dates in bootstrap calendar.
There is a property multidate which can be used for the selection.
find the working code below.
$('.inline_date').datepicker({
multidate: true,
todayHighlight: true,
minDate: 0,
});
$('.inline_date').datepicker('setDates', [new Date(2015, 7, 5), new Date(2015, 7, 8), new Date(2015, 7, 7)])
Only one problem there the highlights are removed on click. and it take month as one less. if you want August dates then you have to use 7 not 8.
My solution of this problem using Knockout bindings and datepicker property "beforeShowDay":
function MainFilters() {
var self = this;
self.notAppliedDates = ko.observableArray([]);
self.customDates = ko.observableArray(["14.06.2015", "20.06.2015", "26.06.2015", "10.06.2015", "29.06.2015"]);
}
ko.bindingHandlers.multiDatepicker = {
init: function (element, valueAccessor, allBindings) {
var customDates = allBindings.get("customDates");
valueAccessor()();
$(element).datepicker(
{
multidate: true,
language: "ru",
orientation: "top",
beforeShowDay: function (date) {
var d = ConvertDateTostring(date, "dd.mm.yyyy");
if ($.inArray(d, customDates()) != -1) {
return {
classes: 'activeClass'
};
}
return;
}
}
)
.bind(
'changeDate',
function (e) {
var res = e.dates;
var value = [];
res.sort(function (a, b) { return a - b });
for (var i in res) {
value.push(res[i].asString());
}
valueAccessor()(value);
}
);
},
update: function (element, valueAccessor, allBindings, bindingContext) {
}
};
function ConvertDateTostring(date, format) {
if (!date) {
return "";
}
if (format) {
return dateFormat(date, format);
}
return dateFormat(date, "dd.mm.yy");
}
.activeClass{
background: #32cd32;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" id="dates" data-bind="customDates: customDates, multiDatepicker: notAppliedDates, value: selectedDatesString">
Using datetimepicker events show, update and change the date need to be highlighted.
The Blog post here explaining how it can achieve using Bootstrap Datetimepicker.
$('#datetimepicker').on('dp.show', function(e){
highlight()
})
$('#datetimepicker').on('dp.update', function(e){
highlight()
})
$('#datetimepicker').on('dp.change', function(e){
highlight()
})
function highlight(){
var dateToHilight = ["04/19/2019","04/20/2019","04/30/2019"];
var array = $("#datetimepicker").find(".day").toArray();
for(var i=0;i -1) {
array[i].style.color="#090";
array[i].style.fontWeight = "bold";
}
}
}
For more information see the blog
Reference:
https://sourcecodezoneseven.blogspot.com/2019/04/here-is-code-function-hilight-var.html
I tried Matias' answer above and had a flew glitches. After a bit of trouble shooting and slightly modifying Matias' answer, I managed to create a working solution.
If you paste the below code into a blank .html file then you should see a input box with a date widget attached to it.
The start date (8th August 2021), end date (26th August 2021) and dates in between should have their own distinct colour scheme.
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js" integrity="sha256-VBLiveTKyUZMEzJd6z2mhfxIqz3ZATCuVMawPZGzIfA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link>
<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>
<style>
.StartDate{background-color: green;}
.InBetweenDates{background-color: darkred;}
.EndDate{background-color: blue;}
</style>
<p>Date: <input type="text" readonly="" id="elementPicker"></p>
<script>
var inRange=false;
$('#elementPicker').datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: new Date("01/01/2016"),
beforeShowDay: function(date){
console.log("date")
console.log(date)
dateFormat = date.getUTCFullYear() + '-' + date.getUTCMonth() + '-' + date.getUTCDate();
console.log("dateFormat")
console.log(dateFormat)
// 7 means August (0 means January)
// We are checking to see if the date is 8th August 2021
// Matias had if (dateFormat == '2014-01-01') but after looking at Console.Log,
// I removed the leading 0 from the day and month figure.
if (dateFormat == '2021-7-8') {
console.log("(dateFormat == '2021-7-8')")
inRange = true; //to highlight a range of dates
// If the day is 8th August 2021 (remember 7 means August not July)
// then we add the CSS class StartDate to the day (look at the top of the code for the StartDate CSS class styling).
return [true, 'StartDate', 'tooltipText'];
}
if (dateFormat == '2021-7-26') {
console.log("(dateFormat == '2021-7-26')")
inRange = false; //to stop the highlight of dates ranges
// If the day is 26th August 2021 (remember 7 means August not July)
// then we add the CSS class EndDate to the day (look at the top of the code for EndDate CSS class styling).
return [true, 'EndDate', 'tooltipText'];
}
if (inRange) {
// If the day is between 8th August 2021 - 26th August 2021 then we add the CSS class InBetweenDates to the day (look at the top of the code for the StartDate CSS class styling).
return [true, 'InBetweenDates', 'tooltipText'];
} else {
// I think this essentially means select the day, do nothing with it and then move on.
// Adding this in prevented the error message 'Uncaught TypeError: Cannot read property '0' of undefined jquery datepicker'.
return [true];
}
}
});
</script>
beforeShowDay: function (date) {
dateFormat = (date.getUTCDate()+1).toString().padStart(2, '0') + '-' + (date.getUTCMonth()+1).toString().padStart(2, '0') + '-' + date.getUTCFullYear(); //this will format the dates that appears when you toggle the datpicker to the fromat you want ok..
console.log(dateFormat);
if ($.inArray(dateFormat, unavailableDates) == -1) { //certain days if they don't exist in my array of dates i already created depending on my project
return {classes:'avail_days'}; //this will produce a class called full_days with the date it finds it inside the array (unavailableDates) and you have to style with css THAT avail_days class
}else {
return [true];
}
},
//gratitude appreciated ;)
i need my calendar to go to the current date when [today] button is clicked, so that the user can get to the current day when browsing my calendar.
for example the current month is feb 2013
and the user is browsing on the dec 2015 page of the calendar when he clicks the [today] button it will automatically return to the current days page of the calendar which is
feb 2013.
i'am using
jquery-ui-datepicker.min.js
as a plugin for my calendar
The jQuery UI Datepicker has functionality built into it for this.
See this: http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#datepicker" ).datepicker({
showButtonPanel: true
});
});
You could do:
function TodaysDate() {
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
return month + "/" + day + "/" + year;
}
$("#btnToday").click(function() {
var today = new Date();
$(target).datepicker('setDate', TodaysDate());
}
Where target is your date picker control ID.