Can I use a javascript variable to set yearRange on jQuery Datepicker? - javascript

I need to set yearRange from two javascript variables, but these variables are only set after the user selects one from multiple buttons on the page, each of which sets the variables to a specific year, so the when the user loads the page the variables won't be already set. I don't know if what I want would be possible since I'm unsure if the values of the variables would update. I think the code should look something like:
var startDate;
var endDate;
$(".pickdate").datepicker({
showOn: 'focus',
yearRange: startDate+':'+endDate,
changeMonth: true,
});
Where the values for the variables are obtained from another .js file.

Yes you can if your second js is loaded in the global scope before the code you mentioned here.
[UPDATE] Snippet Example: As you can see in this example, you can't select a Date after 2021 or before 2018 ! And that's what the yearRange option is intended to do. It's supposed to define set limits to to the Calendar.
console.log(dates.enddate);
$(".pickdate").datepicker({
showOn: 'focus',
yearRange: dates.startDate+':'+dates.enddate,
changeMonth: true,
});
//If already contactenated, We can write:
//yearRange: range,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datepicker</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script>var dates={ startDate:"2018",enddate:"2021"};
//var range = dates.startDate+':'+dates.enddate;
</script>
</head>
<body>
<div class="pickdate"></div>
</body>
</html>
Example:
//settings.js
var dates={ startDate:"2018",enddate:"2021"}
So you just load it before your script like following:
<script src="settings.js"></script>
//Your code comes after
$(".pickdate").datepicker({
showOn: 'focus',
yearRange: dates.startDate+':'+dates.endDate,
changeMonth: true,
});
For other details like relative defaults, you could follow the guidelines of the Datepicker Widget

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.

Getting datepicker to work with Firefox [duplicate]

I find it odd that input type="date" is still not supported in Firefox after all of this time. In fact, I don't think they added in much (if any) of the HTML 5 new types on an input element. Not surprised that it is not supported in IE10. So, my question is...
How to get type="date" on an input element working without adding, yet another, .js file (namely jQueryUI DatePicker Widget) just to get a calendar/date for only IE and Firefox Browsers? Is there something out there that can be applied somewhere (CDN perhaps?) that will make this functionality work by default in Firefox and/or IE Browsers?? Trying to target IE 8+ Browsers and for Firefox, doesn't matter, newest version (28.0) will be fine.
UPDATE: Firefox 57+ supports input type=date
You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.
Here is a demo with CDN:
http://jsfiddle.net/trixta/BMEc9/
<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
<input type="date" />
In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.
Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.
It is in Firefox since version 51 (January 26, 2017),
but it is not activated by default (yet)
To activate it:
about:config
dom.forms.datetime -> set to true
https://developer.mozilla.org/en-US/Firefox/Experimental_features
There's a simple way to get rid of this restriction by using the datePicker component provided by jQuery.
Include jQuery and jQuery UI libraries
(I'm still using an old one)
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
Use the following snip
$(function() {
$( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'});
});
See jQuery UI DatePicker - Change Date Format if needed.
The type="date" is not an actual specification at this point. It is a concept Google came up with and is in their whatwg specifications (not official) and is only partially supported by Chrome.
http://caniuse.com/#search=date
I would not rely on this input type at this point. It would be nice to have, but I do not foresee this one actually making it. The #1 reason is it puts too much burden on the browser to determine the best UI for a somewhat complicated input. Think about it from a responsive perspective, how would any of the vendors know what will work best with your UI say at 400 pixels, 800 pixels and 1200 pixels wide?
Here is a full example with the date formatted in YYYY-MM-DD
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
dFormat: '-',
dateSigns: '-',
patterns: {
d: "yy-mm-dd"
}
}
};
</script>
<input type="date" />
While this doesn't allow you to get a datepicker ui, Mozilla does allow the use of pattern, so you can at least get date validation with something like this:
pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'
Ultimately I agree with #SuperUberDuper in that Mozilla is way behind on including this natively.
This is just a suggestion that follows Dax's answer. (I would put it in a comment at that answer, but I don't have enough reputation yet to comment on others questions).
Id's should be unique for every field, so, if you have multiple date fields in your form (or forms), you could use the class element instead of the ID:
$(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });
and your input as:
<input type="text" class="datepicker" name="your-name" />
Now, every time you need the date picker, just add that class. PS I know, you still have to use the js :(, but at least you're set for all your site.
My 2 cents...
The latest version of firefox the firefox 57(Quantum) supports date and other features it was released on November 14, 2017. You can download it by clicking this link
Sometimes you do not want use Datepicker http://jqueryui.com/datepicker/ in your project because:
You do not want use jquery
Conflict of jquery versions in your project
Choice of the year is not convenient. For example you need 120 clicks on the prev button for moving to 10 years ago.
Please see my very simple cross browser code for date input. My code apply only if your browser is not supports the date type input
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
<meta name="author" content="Andrej Hristoliubov anhr#mail.ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- For compatibility of IE browser with audio element in the beep() function.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
</head>
<body>
<h1>Date field</h1>
Date:
<input type='date' id='date' />
New date: <span id="NewDate"></span>
<script>
CreateDateFilter('date', {
formatMessage: 'Please type date %s'
, onblur: function (target) {
if (target.value == target.defaultValue)
return;
document.getElementById('NewDate').innerHTML = target.value;
}
, min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
, max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
, dateLimitMessage: 'Please type date between "%min" and "%max"'
}
);
</script>
</body>
</html>
You can use this datepicker functionality in anywhere just need to call on Master.aspx or Layout page
Include jQuery and jQuery UI libraries (I'm still using an old one)
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
then add this script and this is working on all platforms.
<script>
jQuery(function ($) { // wait until the DOM is ready
$(".editorDate").datepicker({ dateFormat: 'yy-mm-dd' });
});`
</script>
you can add this "editorDate" on multiple pages.
#Html.TextBoxFor(model => model.FromDate, "{0:yyyy-MM-dd}", htmlAttributes: new {
#class = "form-control editorDate"})
Thank Alexander, I found a way how to modify format for en lang. (Didn't know which lang uses such format)
$.webshims.formcfg = {
en: {
dFormat: '/',
dateSigns: '/',
patterns: {
d: "yy/mm/dd"
}
}
};
$.webshims.activeLang('en');
Here is the proper solution.
You should use jquery datepicker everywhere
<script>
$( function() {
$( ".simple_date" ).datepicker();
} );
</script>
Below is the link to get the complete code
https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Here is the perfect solution. You should use JQuery datepicker to user input date. It is very easy to use and it have lot of features that HTML input date don't have.
Click here to copy the JQuery datepicker code
I had to use bootstrap-datepicker plugin to get the calendar working on Firefox 55 Portable:
https://bootstrap-datepicker.readthedocs.io/en/latest/
Compatible with Bootstrap v2 and v3. It comes with a standalone stylesheet so you don't have to depend on Bootstrap.
Usage:
<input class="datepicker">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy'
});

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

twitter bootstrap 3 datepicker doesnt work when the calendar is clicked

I am using this repo:
https://github.com/eternicode/bootstrap-datepicker
I selected the features I wanted for the datepicker and used all the correct libraries. When I click on the box looking icon to display the calendar dropdown, nothing happens. And while using firefox, in firebug no errors are reported. Can someone please point out what the problem can be?
tahnks
btw, on the datepicker site i selected "component" for type. So you know what im talking about when i mean boxed icon.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="http://eternicode.github.io/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet">
<script src="http://eternicode.github.io/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="input-group date" style="width:400px;">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
<script type="text/javascript">
$(function(){
$('#sandbox-container .input-group.date').datepicker({
format: "mm/dd/yy",
minViewMode: 1,
autoclose: true,
todayHighlight: true
});
});
</script>
</body>
</html>
The selector "#sandbox-container" is the parent node of the DIV with "input-group date" class in the demo site.
You need to add a DIV tag outside. Then the I tag with glyphicon-th class can be pressed.
Please refer to http://jsbin.com/lerojivu/1/edit
Two issues:
The datepicker js link is wrong, should be: http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js
minViewMode: 1 may wrong
Check: http://jsfiddle.net/yHQ4t/
$(function(){$('#dateBox').datepicker({
format: "mm/dd/yy",
//minViewMode: 1,
autoclose: true,
todayHighlight: true
});
});

Categories