Develop Reference

Datepicker for birthday textfield

I created a datepicker on my form that has Birthday label on it and textbox,
Now my problem is, Is there a way to prevent the user pick the current
date today, for example the user can't choose today's date, tommorow or yesterday as his birthday. hope you can help me, Thanks :)
here is my sample code:
<link href="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class="md-form">
<input type="text" id="datepicker1" class="form-control " placeholder="Birthday" style="margin-top:-30px" name="date1" required>
</div>
here is my sample javascript:
<script>
$('#datepicker1').datepicker({
showOtherMonths: true
});
</script>
i know this is not enough script, im beginner at javascript and jquery but hope you can help me.Im using Bootstrap jQuery DatePicker material design

The jQuery datepicker has a maxDate option that you can set.
If you pass it a number, that will set the maximum date to that number of days from today.
Can't choose today, nor any dates after:
$('#datepicker1').datepicker({
showOtherMonths: true,
maxDate: -1 //The maximum date is 1 day ago
});
Can't choose yesterday, nor any dates after:
$('#datepicker1').datepicker({
showOtherMonths: true,
maxDate: -2 //The maximum date is 2 days ago
});
Can't choose any dates within the past year, nor any dates after:
$('#datepicker1').datepicker({
showOtherMonths: true,
maxDate: '-1y' //The maximum date is 1 year ago
});

You can use maxDate for this purpose like:
maxDate: '-2d' // here d is the no of days ago, you can pass any no of days that you want to restrict
Ex:
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "dd/mm/yy",
maxDate: '-2d'
});
});
Working Fiddle

Use this in your javascript
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
});
use startDate to change values according to your need and here -3 means 3 days before and 'd' basically represents day
startDate: '-3d'

Bootstrap 3 Datepicker v4 call set date with moment or date

Iam using http://eonasdan.github.io/bootstrap-datetimepicker/
i have a datetime picker called dtpFrom
<div class='input-group date ' id='dtpFrom'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script>
$('#dtpFrom').datetimepicker({
useCurrent: true,
format: 'DD/MM/YYYY',
showTodayButton: true,
showClear: true,
showClose: true,
//autoclose: true,
maxDate: new Date(),
toolbarPlacement:'top'
});
</script>
i want to set its value on run time on other controls event..
i tried this and many other code but doesnt work!!
$('#dtpFrom').data("DateTimePicker").date(moment(new Date('DD/MM/YYYY'), 'DD/MM/YYYY'));
$('#dtpFrom').data("DateTimePicker").date(moment(new Date()));
$('#dtpFrom').data("DateTimePicker").viewDate(new Date());
any suggestion..
thanks

i found the solution if someone face the same problem
$('#dtpFrom').data("DateTimePicker").date(moment(new Date()).format('DD/MM/YYYY'));
NOTE: the format should match the definition format option of datetimepicker.

Mohammad's answer did not work for me. Turns out the syntax was slightly different, possibly due to a different version of the datepicker.
The following worked for me:
('#dtpFrom').data("DateTimePicker").setDate(new Date())

Select date range in one calendar

I really like plugin daterangepicker, but it uses 2 calendars for selecting a date range.
Is it possible to select a date range with only 1 calendar? do you know other plugins?
I want to make something like that

You can refer the below link. It might help you.
http://www.daterangepicker.com/
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>

You can use the singleDatePicker on the calendar configuration, and set it true.
singleDatePicker: true,
http://www.daterangepicker.com/#example3

How to avoid seconds in datetimepicker?

I want to avoid seconds in datepicker dropdown.
I have the following html content:
<link href="<c:url value='/resources/css/bootstrap-datetimepicker.min.css'/>"
rel="stylesheet">
<script type="text/javascript"
src="<c:url value='/resources/js/bootstrap-datetimepicker.min.js'/>"></script>
...
<div id="startTimeDiv" class="input-append right-date-input">
<input id="startTime" name="startTime" data-format="hh:mm:ss" type="text" value="">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
and the following js:
$('#startTimeDiv').datetimepicker({
pickDate: false,
timeFormat: "HH:mm"
});
startTimeDiv looks like this:
Thus seconds didn't disappear. Why ?
P.S.
I tried to reproduce it from scratch on isolated example and it works correctly. I suppose that it can be problem with another libraries interaction or different version I used on isolated example. I don't how to check datepicker version I use.

For my version works the following code:
$('#startTimeDiv').datetimepicker({
pickDate: false,
pickSeconds: false
});

where are you getting #startTimeDiv from? should it not be #startTime, that may solve your issues :)

your id is startTime not startTimeDiv
fix it by doing this
$('#startTime').datetimepicker({
pickDate: false,
timeFormat: "HH:mm"
});

I have the below in my code and it works. This will default the seconds to 00 but wont show in the pop-up for the user to select the seconds. Using jquery time picker add-on
$('#startTimeDiv').datetimepicker({
showSecond: false
});
Or if you simply dont want the seconds itself then try this
$('#startTimeDiv').datetimepicker({
showSecond: false,
timeFormat: 'hh:mm'
// hourFormat: 24 (if you are looking for 24 hr format, if you want 12 hr format then change timeFormat to 'hh:mm TT' and hourFormat:12)
});

Get date from url and change selected date on jquery datepicker

after searching for a bit I decided to ask this question.
I have a jquery datepicker that is in a form, and after changing the date and clicking submit the url will look like this: index.php?thedate=12%2F22%2F2012# which is really 12/22/2012. I then need it to extract the url and change the selected date to whatever is in the url. So for my early example of 12/22/2012, the selected date on the calendar would be the 22nd.
Here's my code:
<form method='get' action='#'>
<div id="datepicker"></div>
<input type='hidden' id='thedate' name='thedate' />
<input type='submit' value='SUBMIT' id='submit'/>
</form>
and my javascript:
$( "#datepicker" ).datepicker({
minDate: 0,
onSelect: function(dateText, inst) {
alert(dateText);
document.getElementById('thedate').value=dateText;
}
});
Thanks for any and all help! If you need any more details or specifics, please just ask!

You have to set the date format. Do this:
$( "#datepicker" ).datepicker( "option", "dateFormat", 'mm/dd/yy' );
You also can specify 2 date formats. One for presentation purposes dateformat and another one the real date to use in you application. This last one is the altformat and must be togehter with the altfield, this field is a field that stores the picked date in its alternate format.
$("#datepicker").datepicker({
dateFormat: "mm/dd/yy",
altFormat: "mmddyy",
altField: "#alt-date"
});
<input type="hidden" id="alt-date"/>
Therefore you can use this altField (usually a hiddenField) to store date and send it to the server.
TEST IT