Date validation so that no previous date is selected [duplicate] - javascript

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>

Related

Formatting selected date in jquery

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>

Add a day to datepicker

Hi friends and sorry about this noob question but i don't get support from the theme developers.
I have a datepicker on one of my websites and would like to add a day to the current date.
So i found a js file what is including some code like this. I am sure you have a solution for this, but i don't ;-)
The goal is that people are not able to book or make a reservation for the same day.
$( '#reservations-date-selector' ).datepicker().datepicker( 'option', 'dateFormat', dateFormat ).datepicker( 'setDate', new Date() );
$( '#reservations-date-selector' ).datepicker().datepicker( 'option', 'dateFormat', dateFormat ).datepicker( 'setStartDate', new Date(new Date().getTime()+(1*24*60*60*1000)) );
Simply set the minDate option to 1 for one day after today
$(function() {
let dateFormat = "d MM, y";
$('#reservations-date-selector')
.datepicker({
minDate: 1,
dateFormat: dateFormat
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" integrity="sha256-p6xU9YulB7E2Ic62/PX+h59ayb3PBJ0WFTEQxq0EjHw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<input type="text" id="reservations-date-selector" />

How to add multiple strings to input?

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="">

"TypeError: date.match is not a function" in datepicker bootsrap

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

Need datepicker which shows date in other format

I want a date picker which gives the date in this format
January 19, 2012
I already have some date pickers but they are showing dates like this:
12/10/2013
Lots of formats here
You can even customise them. Hope it helps!
Try this Demo
Script
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker({
dateFormat: 'MM dd,yy', onSelect: function (datetext) {
$('#datepicker').val(datetext);
},
});
});
</script>
HTML
<input type="text" id="datepicker"/>
Try this.
set this to ur date picker.
datePicker.timeZone = [NSTimeZone localTimeZone];
self.datePicker.datePickerMode = UIDatePickerModeDate;

Categories

Resources