Develop Reference

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

when using datetime picker format it increases year by 5

I'm using datetime picker with following piece of code to format date
$('.date').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
sideBySide: true
});
when I'm using this above format I'm getting year increased by 5 years.
If I'm using
$('.date').datetimepicker({
'format: 'DD.MM.YYYY HH:mm',
sideBySide: true
});
everything is ok.

The way you are using format is wrong for the datetimepicker plugin.
Use
$('.date').datetimepicker({
'format': 'd.M.Y H:m',
sideBySide: true
});
DEMO
$('.date').datetimepicker({
'format': 'd.M.Y H:m',
sideBySide: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.3/jquery.datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.3/build/jquery.datetimepicker.full.min.js"></script>
<input type="text" class="date"/>

Try this :
jQuery(function($) {
$('.date').datetimepicker({
format: "y-M-d H:m", // Change format to this
sideBySide: true
});
});
Here is the Updated Fiddle
Read more about the DateTimePicker here.

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

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>

bootstrap datepicker set default date not working

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

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;