jQuery UI Datepicker - disable every second week - javascript

I am using jQuery datepicker and I need a functionality that disables every second week.
For example: All days of even weeks (2,4,6..) is enabled and can be picked - But all days of odd weeks (1,3,5..) are disabled and can not be picked.
I know I can disable specific days/or dates with beforeshowday. But this is not what I'm after..
Any solutions? Thanks.

You can use datepicker's beforeShowDay function to disable. Below code uses moment to make getting week easier but you can try something else as well:
$( function() {
$( "#datepicker" ).datepicker({
beforeShowDay:function(d){
var m=moment(d);
//week number is even
var en=m.week()%2===0;
//its first and monday
en|=(m.date()===1 && m.isoWeekday()===1);
return [en,"","Odd Week"];
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
Updated to enable 1st Monday in odd weeks. Check with 1-June-2015

Related

Date Range Picker autoApply:true doesn't work with timePicker: true

I have this Date Range Picker code:
<!DOCTYPE html>
<html>
<head>
<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>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoApply: true,
timePicker: true,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
</head>
<body>
<input type="text" name="datefilter" value="" />
</body>
</html>
With specific emphasis on this line:
autoApply: true
Which according to this site: http://www.daterangepicker.com/ says:
autoApply: (true/false) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
But the datetimepicker that results 1) has both buttons (Cancel and Apply) still and 2) does not apply the change when two dates are clicked:
WHILE WRITING THE QUESTION:
I noticed that when I remove timePicker: true the desired autoApply behavior happens (the Cancel and Apply buttons disappear and the datepicker closes when dates are selected):
So why does autoApply not work when timePicker is enabled?? I need both features.
That combination of options is not supported. If you "auto apply" as soon as they click two dates, you would be making the interface disappear before they've actually made their selection, as they've yet to select the time(s) they want. A button is needed to signify that they are done making their selection, which can require making up to 8 selections/clicks in various orders. You can only "auto apply" date ranges without times, since you know as soon as they choose both dates they're done.

Setting second datepicker a year ahead of the first datepicker

On a project I'm working on, I'm using JQuery datepickers. I've got two datepickers on one page, and I need my second datepicker to be initialized to be one year ahead of the first one (e.g. if datepicker1 is set to 1/1/2019, I need datepicker2 to be set to 1/1/2020).
I've got my current JavaScript below:
<script type="text/javascript">
$(document).ready(()=>{
$('#datepicker1').datepicker();
$('#datepicker1').datepicker("option", "dateFormat","dd-mm-yy");
$('#datepicker2').datepicker();
$('#datepicker2').datepicker("option", "dateFormat","dd-mm-yy");
});
</script>
I'm not really familiar with the datepicker API. How do I make my second datepicker initalize a year ahead of my first datepicker?
$(document).ready(function(){
$('#datepicker1').datepicker();
$('#datepicker2').datepicker();
$('#datepicker1').on('change',function(){
$( "#datepicker2" ).datepicker( "destroy" );
var minDate= $('#datepicker1').datepicker( "getDate" );
minDate.setDate(minDate.getDate() + 365);
console.log(minDate);
$( "#datepicker2" ).datepicker({ minDate: new Date(minDate) });
});
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<body>
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
</body>
</html>
You can do this by writing a change event to the datepicker1. For restricting date selection just set the minDate property to datepicker2. For checking 1-year gap here I added 365 days it may be wrong in some cases you can go for another logic.
I hope this will help you.

datepicker specified value does not conform to the required format jquery.js

So yesterday I asked a question about setting the date for a calendar. I was missing some references so have since added them. Please see the HTML section below.
I believe my code to be correct for how to set the date for a calendar. However upon loading the page I get these errors,
Uncaught SyntaxError: Unexpected token datepicker.css:11
The specified value "09/01/2018" does not conform to the required format, "yyyy-MM-dd".
jquery.js:8254
Not sure why this is not working and where the date "09/01/2018" is coming from at all?
I also think in my the datepicker.css should be like below.
link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" type="text/css" />
When I do this the Uncaught SyntaxError message disappears but still have the other issue.
$(document).ready(function() {
$("#dtSelectorStatic").datepicker();
$("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" />
<input id="dtSelectorStatic" />
Update
Below are all the references I have in my page. One thing (might be nothing) but when I type "script src=" the intelli sense picks on my folder scripts and list 3 files (image below, jQES is the file I created) but it does not list the other two files also in that folder, jquery-ui.js or jquery-ui.min.js
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'table'] });
</script>
<script src="/scripts/external/jquery/jquery.js"></script>
<script src="/scripts/jquery-ui.min.js"></script>
<script src="/scripts/jQES.js"></script>
<link href="CSS/MyCSSFile.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
update 2
This is how it looks on load up.
If I click in the area where the blue arrow is pointing to the calendar below is shown.
If I click on the big black arrow I get both calendars
I have another calendar box which is exactly the same. Which only shows the calendar shown below no matter what I do. The only difference is that on load up I do not try to set the date as I do in the calendar above.
<input id="someId" type="date"/>
jquery-ui datepicker docs (scroll at least 1 line up, there's no id on Additional Notes, that was the closest element I could link to) contains information about this issue:
Additional Notes:
...
Creating a datepicker on an <input type="date"> is not supported due to a UI conflict with the native picker.
This is default HTML5 input with attribute type="date":
<input type="date">
From MDN about HTML5 date input's value:
One thing to note is that the displayed date format differs from the actual value — the displayed date format will be chosen based on the set locale of the user's browser, whereas the date value is always formatted yyyy-mm-dd.
When you add jquery-ui datepicker, you see both of them. What's worse its default value format is yyyy-mm-dd (see more on mdn) so if you change format jquery-ui datepicker sets value formatted as in dateFormat property (or based on locales). It starts showing warning (not visible in snippet's console, propably console.warn is only visible in developer tools)
$(document).ready(function() {
$("#dtSelectorStatic").datepicker({dateFormat: "dd-M-yy"});
$("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input type="date" id="dtSelectorStatic" />
Possible fix: if you remove attribute type="date" or set it to "text" then you get functionality of jquery-ui datepicker (see snippet below).
$(document).ready(function() {
$("#dtSelectorStatic").datepicker({dateFormat: "yy-mm-dd"});
$("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input id="dtSelectorStatic" />
You don't need any jquery or special date library for fixing it. Simple JS will do just fine. The problem is that the browser requires the format yyyy-mm-dd.
And toLocaleString doesn't allow the date to be in this format. So after searching I found out that this is ISO format and we can use Date().toISOString() to get the date in the required format.
I used the slice method to extract the date part only because Date().toISOString() returns date with time.
My code: date: new Date().toISOString().slice(0, 10)
Try this trick
$("#datePicker").datepicker();
var qDate = '2018-08-01';
$('.datepicker').datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", new Date(qDate));
Try this if need any help please comment.
$(document).ready(function () {
$(".datepicker").datepicker();
$(".datepicker").datepicker("setDate", new Date(2018, 8, 1));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<input type="text" class="datepicker" /><br/>
<style>
.ui-datepicker {font-size:60%; }
</style>
Try this
$(document).ready(function() {
$(".datepicker").datepicker({
dateFormat: "yy/mm/dd"
});
$(".datepicker").datepicker("setDate", new Date(2018, 8, 1));
});
Try below jsfiddle.
http://jsfiddle.net/Sampath_Madhuranga/3ow88r6u/291/
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet"/>
<form method="post">
<p><input type="date" placeholder="" /></p>
</form>

HTML5 Date Picker - Remove Date Arrows

I am using Angular. I am curious to how I can remove these arrows:
Also, if its possible to click the date picker box(Where mm/dd/yyyy is) and allow it to show the Date Selector instead of clicking the far right arrow.
I don't think it does this across all browsers; narrow down where you see this and where you don't want to see this; and then do something like the below but specific to the browser your targeting.
input::-webkit-calendar-picker-indicator{
display: none;
}
You can do this with jquery here is a demo (I couldn't get it to work in the snippet)
JsFiddle
$(document).ready(function() {
$("#datepicker").datepicker();
});
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<body>
<form>
<input id="datepicker" />Choose a date
</form>
</body>
You can resize the datepicker by doing something like
div.ui-datepicker{
font-size:10px;
}

Auto populating new field with date from another field for datepicker

I have a field that has a datepicker, but what I want that field, called New Date, to have populate with the date in the div id="olddate" plus one day. The problem I'm seeing is that the date in the olddate div is a text string, so I need to convert that into a date object, put it in the New Date field and add a day. I also prefer to keep it in jQuery, if possible. I've seen plenty of answers to questions very similar to this, but nothing seems to work. Thanks in advance!! Fiddle: http://jsfiddle.net/Carlos1815/U9Avn/
Here's what I got thus far:
<html lang="en">
<head>
<link href="css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.js"></script>
<script>
$(function() {
var olddate = $("#olddate").text();
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "setDate", olddate);
});
</script>
</head>
<body>
<div id="olddate">3/30/2013</div>
<div>New Date: <input type="text" id="datepicker"></div>
</body>
</html>
Its worth to use moment.js at this moment to solve this date time problems.
Working Demo
$(function () {
var day = moment($("#olddate").text(), "MM/DD/YYYY");
day.add('days', 1)
var newDate=day.toDate();
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", newDate);
});

Categories