Datepicker code to select current and last three days date? - javascript

What will be javascript code for datepicker that allow user to select current and last three days only in datepicker. I have made datepicker using bootstarp ?

Try this
$(function() {
$( "#datepicker" ).datepicker({ minDate: -3, maxDate: "0" });
});
Demo
DatePicker Reference

Related

How to use datepicker options within onClose

With the jQuery UI Datepicker Widget, I want to check if the user left a specific input field blank on blur, if so, then assign the date value to the value of altField. Something like this in my mind...
$(selector).datepicker({
dateFormat: 'yy-mm-dd',
onClose: function (date) {
if (!$(this).val()) {
//at this point, how can I assign my date to be the value of altField: "#hiddenInput"
}
else {
//...I just carry along and do something with my date...
}
}
});
Can that be done with the datepicker widget?
You can use a bootstrap date picker for solving this type of problem.
Link is given below.
https://bootstrap-datepicker.readthedocs.io/en/latest/#
My environment Datetimepicker for Bootstrap 3 version : 4.17.47
$("#dateTimePicker").on("dp.hide", function (e) {
console.log(e.date);
});

jQuery DatePicker - How do I show today's month instead of the selected dated?

So I've been looking everywhere for an answer. Including jQuery's datepicker API website and I can't seem to find a suitable answer.
This is what I would like to happen. When the text field is pressed and the datepicker pops up, I would like the calendar month to show this month, rather than defaulting to any previously selected date.
I still want to be able to select next and previous on the months. So setting minDate is not an option.
So for example, a user has previously selected 03/03/2013. The user then clicks the textbox, which pops up the date picker again, the month displayed is today's month rather than March. However, 03/03/2013 is still selected.
Thanks!
Code is very vanilla...
$(document).ready(function () {
$(".datePickerShowToday").datepicker({
dateFormat: 'dd/mm/yy',
buttonText: 'Click here to select a date',
onSelect: function () {
}
});
});
HTML Code:
<input type="text" id="NotificationDate" class="datePickerShowToday" />
You can do this with the $.datepicker._gotoToday function [this is what the datepicker uses for Ctrl + Home]. However, the widget doesn't provide an open event (it has beforeShow but that won't work in your case as it only runs before the widget is drawn). You can simulate this by using .focus on the input field and only binding one handler at a time (since keeping focus on the datepicker itself also triggers focus):
$( ".datePickerShowToday" ).datepicker({
onClose: function() {
$( ".datePickerShowToday" ).one("focus", function() {
$.datepicker._gotoToday(this);
});
}
});
$( ".datePickerShowToday" ).one("focus", function() {
$.datepicker._gotoToday(this);
});
Here's a fiddle with the above: http://jsfiddle.net/4vskg74t/
One way to do it:
$(document).ready(function(){
$('.datePickerShowToday').datepicker();
$(".datePickerShowToday").click(function(){
$('.datePickerShowToday').datepicker('setDate', null);
});
});

jQuery UI Datepicker after select/change month/year

I wanted to find out how I can run some piece of code (attach mouseenter event) for every day after user has selected a day or changed a month/year?
I have tried to attach the event on these events
beforeShow
beforeShowDay
onChangeMonthYear
onSelect
On hover I want to highlight next day in the same row if it exists.
Currently I attach moouseenter/mouseleave event to all days after datepicker is created (which is inline).
I have simplified what I'm doing in the JS fiddle below. I need to have those events working after a date is selected and after month/year has been changed.
JS Fiddle: http://jsfiddle.net/MartinTale/Xx4GS/2/
$("div").datepicker({
changeMonth: true,
changeYear: true,
inline: true,
altField: "#datep"
});
$("tbody td:not(.ui-state-disabled, .active-calendar-cell)").mouseenter(function (e) {
$(this).closest('td').next().find("a").addClass("hover-calendar-cell");
console.log('test');
});
$("tbody td:not(.ui-state-disabled)").mouseleave(function (e) {
$("a.hover-calendar-cell").removeClass("hover-calendar-cell");
console.log('test out');
});
Thanks in advance.
You can use the provided jQuery datepicker events onSelect and onChangeMonthYear.
Code:
$("#datep").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function () {
console.log('s');
},
onChangeMonthYear: function () {
console.log('o');
}
});
Demo: http://jsfiddle.net/IrvinDominin/Xx4GS/
Here is hacky hack.
http://jsfiddle.net/Xx4GS/3/
It works, highlights the next day( the next td in this case).
setTimeout is because I think jquery ui destroys the active date item, so we wait until we have the right one.
You might be able to use onSelect instead of .change, but not a big deal imo
I left a console.log in there so you can see a little bit of whats going on.
There is an event called "onSelect" having the date as its param. see this example:
$("#datePicker").datepicker({
//the format
dateFormat: "dd/mm/yy",
//called when date is selected
onSelect: function (date) {
alert(date);
}
});
Cou can find all the details in the api-doc: http://api.jqueryui.com/datepicker/#option-onSelect

jQueryUI inline DatePicker doesn't work until after I change month

I'm using an inline Datepicker with jquery 1.7.2 and jqueryui 1.8.20. the problem I have is that the following doesn't work until I change the month in the datepicker, then it works fine. Any help would be appreciated.
$( "#datepicker" ).datepicker({
dateFormat: 'D, dd M yy',
minDate:0,
onSelect: function(dateText, inst){
//$('.field_pickDate').html(dateText);
alert('boo');
//console.log(dateText);
}
});
dateFormat and minDate are both working but the onSelect event isn't firing from the get-go.
This is the default functionality of that event.
Its fired when the user "selects" something in the date picker.
To call an event on click (before you show the date Picker) you can use "beforeShow".
$( "#datepicker" ).datepicker({
dateFormat: 'D, dd M yy',
minDate:0,
beforeShow: function(input, inst) {
alert("Fired on click, before the picker is shown");
},
onSelect: function(dateText, inst){
//$('.field_pickDate').html(dateText);
alert('boo');
//console.log(dateText);
}
});
Here's a JSFiddle example of it working with your code.
http://jsfiddle.net/applehat/jukJa/1/
You could always just add another event onto the text box, such as $('#datepicker').select(function(){ /* do something */ });
as well, if you want to detect them selecting the field.
================= EDIT ===============
Since you are using it as an Inline element, Im not sure what your problem is. I have updated my JSFiddle here: http://jsfiddle.net/applehat/jukJa/2/
Everything works as expected here, so maybe you have other code causing issues?

Does anyone know how to format the Jquery Datepicker

Does anyone know how to format the Jquery datepicker? I want it to display it like dd/mm/yyyy and that is the only way I want to display it, but at the moment it is displaying it like mm/dd/yyyy.
I tried this but it didn't work:
$(function() {
$( "#datepicker" ).datepicker({format("dd/mm/yyyy")});
});
Does anyone have an idea?
The key you want is dateFormat:
$(function() {
$( "#datepicker" ).datepicker({dateFormat: "dd/mm/yyyy"});
});

Categories