I am running bootstrap datepicker, with an inline calendar and a date range. The following works in terms of front end buttons highlighting, but the input isn't showing the value range`.
NOTE I am looking to get the comma separated years only like 2014, 2018 and we can only select two years max as per a range.
$('#sandbox-container').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: true,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#sandbox-container');
if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div id="sandbox-container"></div>
<input type="text" id="date" value="">
You're not setting the value on the "date" input field. You're setting it on the "sandbox-container" div. Change it to the input field and it will start to populate the text field.
Additionally, I'd check the documentation for the bootstrap datepicker daterange: https://bootstrap-datepicker.readthedocs.io/en/v1.7.1/markup.html#daterange
Here I've made some adjustments to the JS (reference date element and call datepicker show method) and HTML (removed sandbox-container)
$('#date').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: false,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#date');
if(elem.data("selecteddates") == dates.join(","))
return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2)
dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
$("#date").datepicker("show");
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<input type="text" id="date" value="">
Related
I am displaying datepicker without an input. I want to get the selected date and format it to dd-mm-yy but it's not working.
$(function() {
var selectedDate = $("#inline-calendar").datepicker({
changeYear: true,
dateFormat: 'dd-mm-yy',
}).datepicker("setDate", "now").datepicker("getDate");
console.log(selectedDate)
});
<div id="inline-calendar"></div>
The output of the above code is Sat Sep 12 2020 00:00:00 GMT+0800 (Singapore Standard Time)
You can simply use .data attributes in bootstrap datepicker to get the value of the date on the calendar using getFormattedDate
Live Working Demo:
$(function() {
$("#inline-calendar").datepicker({
changeYear: true,
dateFormat: 'dd-mm-yy',
}).datepicker("setDate", "now").datepicker("getDate");
//get date value
let getDate = $("#inline-calendar").data('datepicker').getFormattedDate('dd-mm-yy');
console.log(getDate) //12-09-20
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
<div id="inline-calendar"></div>
I am using flask to build some small application. I would like to build a form that collects a start date and an end date. Ideally I would like this form data to my database to run some search on date range. I found some example that is fairly close to what I am trying to do. One thing that I cant figure out is in the example the date range is predefined. I would like for at least the end date to be updated with the current date and not a predefined field.
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input style="width: 40%" class="form-control" type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$('input[name="daterange"]').daterangepicker(
{
locale: {
format: 'MM-DD-YYYY'
},
startDate: '01-01-2013',
endDate: '12-31-2013'
},
function(start, end, label) {
alert("A new date range was chosen: " + start.format('MM-DD-YYYY') + ' to ' + end.format('MM-DD-YYYY'));
});
</script>
Substitute 'moment()' for the hardcoded end date.
Example:
$('input[name="daterange"]').daterangepicker(
{
locale: {
format: 'YYYY-MM-DD'
},
startDate: '2013-01-01',
endDate: moment()
},
function(start, end, label) {
alert("A new date range was chosen: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
(Also, not sure if this was a copy/paste issue - but you are missing the 'https:' prefix on your script and stylesheet imports.)
This question already has answers here:
Disable certain dates from html5 datepicker
(6 answers)
Closed 6 years ago.
I am making a website in which I need to get date from user but it should be today's date or upcoming date not previous date. Please help me to make date validation.
<input type="date" name="doj" required>
what to add in this code so that a user a can only select current date or upcoming date not previous date.
You can implement using datepicker
<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" ref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<input type="text" id="strDate" name="doj" required />
<script type="text/javascript">
var dateToday = new Date();
var dates = $("#strDate").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
</script>
I got this error ""TypeError: date.match is not a function" when i try to set up a date list to be showed in datepicker
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
language: "pt-BR",
multidate: true
});
//this dates is just a example, I already try to create from another way like:
// var data = new Array("2015-06-19", "2015-06-15")
//and also not work!
var dates = ["2015-06-19", "2015-06-15"];
$('#datepicker').datepicker('update', datas);
I notice in the doc "Each date is assumed to be a “local” date object, and will be converted to UTC for internal use."
I don't understood what it means. Should I create a list of dates or an Array? what is the difference between them, they are not the same thing?
The problem is update won't take an array as its second parameter.
One option is you can use setDates
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
language: "pt-BR",
multidate: true,
});
var datas = ["2015-06-19", "2015-06-15"];
$('#datepicker').datepicker('setDates', datas)
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<input id="datepicker" />
Or do something like
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
language: "pt-BR",
multidate: true,
});
var datas = ["2015-06-19", "2015-06-15"];
datas.unshift('update');
var $el = $('#datepicker');
$el.datepicker.apply($el, datas)
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<input id="datepicker" />
I got it, I just change the last row of code:
$('#datepicker').datepicker('update', datas); //to
$('#datepicker').datepicker('setDate', datas);
Thanks All!
A "local" Date object, refers to Javascript Date Object
Some examples of how initialize it
var today = new Date();
var birthday = new Date('December 17, 1995 03:24:00');
var birthday = new Date('1995-12-17T03:24:00');
var birthday = new Date(1995, 11, 17);
var birthday = new Date(1995, 11, 17, 3, 24, 0);
var unixTimestamp = Date.now(); // in milliseconds
As it's suggested in another answer, you can use setDates
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
language: "pt-BR",
multidate: true,
});
var datas = [
new Date(2015, 5, 19), //remember, months in javascript starts with 0 for january
new Date(2015, 5, 15)
];
$('#datepicker').datepicker('setDates', datas)
JSFiddle demo
I am using bootstrap datepicker.I want to show 01-01-1960 as selected date in my calendar when it is loaded first time.
javascript
<script src="~/Content/js/datepicker/bootstrap-datepicker.js"></script>
<link href="~/Content/js/datepicker/datepicker.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker-input').datepicker({
defaultViewDate: { year: 1960, month: 01, day: 01 },
format: 'mm-dd-yyyy',
});
});
I am using this theme - http://flatfull.com/themes/scale/form-elements.html.
You can set default date like :
<script src="~/Content/js/datepicker/bootstrap-datepicker.js"></script>
<link href="~/Content/js/datepicker/datepicker.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker-input').datepicker({
'setDate', new Date(1960, 01, 01 ),
'format': 'mm-dd-yyyy',
});
});
</script>
Try with this.
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker-input').datepicker({
dateFormat: 'yy-mm-dd'
});
$('.datepicker-input').datepicker('setDate', new Date(1960,00,01));
$('.datepicker-input').val('');
});
</script>
It Works for me.
$('.datepicker-input').datepicker({
useCurrent: false,
setDate: new Date(1960, 01, 01),
});
Set useCurrent to false, then setDate would work.
To fix the following error:
error-Uncaught TypeError: data[option] is not a function
You should use the option setValue instead of setDate!
$(".datepicker-input").datepicker("setValue", new Date());
I found the simple solution for setting default value on this problem.
According to the research from google, you cannot simple add 'default date' option here but you can set 'setDate' option. Thus, For example...
<div class="fullDate input-group date" id="atdcRegReqDtDiv">
<input type="text" class="form-control inputstl" id="REQ_DT">
<span class="input-group-addon"><i class="dtPick glyphicon glyphicon-calendar"></i></span>
</div>
Add the setDate option, to the object, and then put empty value to the text input.
$('#atdcRegReqDtDiv').datepicker('setDate', "2018-09-14");
$('#REQ_DT').val("");
Then, you can see the empty input box with the calendar has default Year/Month.
Good Luck.
You can set default date using Jquery defaultDate :
defaultDate: new Date(1960, 01, 01);