Birthday Date Auto generate year for 18 years old - javascript

My question is how to automatically set the date range for 18 years old, like for example today is 2015, so the date range must be 1935-1997, don't mind the 1935. Because the date range is for 18 years old and above, so when it come to 2016 the date range will automatically set to 1935-1998 then so on so forth as the year comes by.
Here's the current code with javascript on it
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</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() {
$( "#from2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:1997',
onClose: function( selectedDate ) {
$( "#to2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:1997' ,
onClose: function( selectedDate ) {
$( "#from2" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="birthday">Birthday</label>
<input type="text" id="from2" name="from">
</body>
</html>
Well as you can see you in my javascript function the range function is hardcoded. :(

Get the range:
var startDate = "1935";
var endDate = new Date().getFullYear() - 18;
var interval = startDate + ":" + endDate;
Set the range to the DatePicker:
yearRange: interval
Fiddle

Related

How to show next 7 days while using datetimepicker?

function getNext7WorkingDays(){
var d = new Date();
var day = d.getDay();
if(day>=0 && day<=3) return 9;
else if(day!=6) return 10;
else return 11;
}
$('.datepicker_quiz_dataa').datetimepicker({
timepicker:false,
format:'d-m-Y',
formatDate:'Y/m/d',
minDate: 1,
maxDate: '+'+getNext7WorkingDays()+'D'
});
In this code I using datetimepicker where I am getting only date in d-m-y format and I want that it show current date to next 7 days dates only but now I am getting previous 14 days dates. So, How can I do this? Please help me.
Thank You
Try this below :
$('.datepicker_quiz_dataa').datepicker({
minDate: 0,
maxDate: "7d",
dateFormat: "d-m-y"
});
OR
$('.datepicker_quiz_dataa').datepicker({
minDate: 0,
maxDate: "1w",
dateFormat: "d-m-y"
});
Hope it helps
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datepicker demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="datepicker"></div>
<script>
$( "#datepicker").datepicker({
minDate: 0,
maxDate: 6,
dateFormat: "d-m-y",
onSelect : function(r) { console.log(r) }
});
</script>
</body>
</html>

Month and year picker value changes when field is clicked into for second time

I have some code for a month and year date picker which i got from this site, i have edited the date format (mm/dd/yy) and selecting the values works great, however when i click away from the field and back to it the picker changes the date considerably.
For example, the following invokes the picker with todays date and you click 'Done' which puts todays date into the input field, if you click away and then click the input field again the date picker comes up with December last year, do it again and its december the previous year, etc...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'dd/mm/yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input autocomplete="off" name="startDate" id="startDate" class="date-picker" />
</body>
</html>
I'm new to JavaScript so i am struggling to find out exactly where the issue is.
Changed the following line;
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
To this to pick up the right month and it works;
month = $(this).datepicker('getDate').getMonth();

Set default date for bootstrap datepicker

I am trying to open the bootstrap datepicker on the date stored in the var startDate.
The code below is not working as the default date format for the datepicker is mm/dd/yy. startDate is in the format dd/mm/yy.
<script type="text/javascript" >
function toggle_dp() {
$("#myModal").modal("show");
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
defaultDate: new Date('{{ startDate }}')
});
$("#datepicker").datepicker( "option", "dateFormat", "dd-mm-yy" );
}
</script>
For example, if the startDate is 05/03/2018 (5th March), the datepicker will open with default date 03/05/2018 (3rd May).
Use formate: instead of dateFormat:
<script type="text/javascript" >
function toggle_dp() {
$("#myModal").modal("show");
$("#datepicker").datepicker({
format: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
defaultDate: new Date(toMMDDYYYY(startDate))
});
}
function toMMDDYYYY(date) {
var datePart = date.split("/");
var MMDDYYYY = [datePart[1], datePart[0],datePart[2]].join('/');
return MMDDYYYY
}
</script>
You have written the wrong syntax for format. Just replace dateFormat with format in your script code like below
More help on Bootstrap Date-picker Format
<script type="text/javascript">
function toggle_dp() {
$("#myModal").modal("show");
$("#datepicker").datepicker({
format: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
defaultDate: new Date('{{ startDate }}')
});
$("#datepicker").datepicker("option", "format", "dd-mm-yy");
}
</script>

Is it possible to do a Date & Time Calender using jquery-ui?

I have tried using format: to get the sequence of data in year
example
$(function() {
$( "#datetimePicker" ).datepicker(
{
format: 'YYYY-MM-DD hh:mm:ss'
});
});
You need to use jQuery dateTimePicker for pick date with time.
Datepicker can only pick date.
Download the plugin from here.
include js and css file in your page.
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.datetimepicker.js"></script>
And your markup like
<input id="datetimepicker" type="text" >
JS:
$('#datetimepicker').datetimepicker({datepicker:true,timepicker:true});
Don't forgot to include jquery.js first in your page.
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", 'YYYY-MM-DD hh:mm:ss');
});
Visit https://jqueryui.com/datepicker/#date-formats
Try the following:
public String setPickedDate()
{
//if condition
if (day.equals(""))
return day;
java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("dd-MM-yyyy");
java.util.Calendar cal = java.util.Calendar.getInstance();
cal.set(year, month, Integer.parseInt(day));
return sdf.format(cal.getTime());
}

Jquery datepicker in master page

I know there is so many similar question already been asked but none of them solved my problem. I tried so many times but the datepicker still not work.
So in my master page
<head>
<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>
<head/>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
In my content Page(head section inside asp content place holder 1)
// i tried this 4 way but still not work
// $("[id$=txtStart]")
// $("input[id$='date2']").datepicker();
<%--<%=txtStart.ClientID%>--%>
<%-- $("#<%=txtStart.ClientID %>")--%>
$(document).ready(function () {
$('[id$=txtStart]').datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
min.setDate(min.getDate() + 1);
$('[id$=txtEnd]').datepicker('option', 'minDate', min); // Set other min, default to today
}
});
//another datepicker same as above
$('[id$=txtEnd]').datepicker({
.....
}
});
});
this is my control
<td class="auto-style3"><asp:TextBox ID="txtStart" runat="server" > </asp:TextBox>
<td class="auto-style3"><asp:TextBox ID="txtEnd" runat="server" > </asp:TextBox>
Your code should be
$(document).ready(function () {
$("#<%=txtStart.ClientID%>").datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
min.setDate(min.getDate() + 1);
$("#<%=txtEnd.ClientID%>").datepicker('option', 'minDate', min); // Set other min, default to today
}
});
});
I've tested and works fine with this code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
$(document).ready(function() {
$("[id$=txtStart]").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("[id$=txtEnd]").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
from <asp:TextBox ID="txtStart" runat="server"/> to <asp:TextBox ID="txtEnd" runat="server"/>
</div>
</asp:Content>
Thought I would suggest another datepicker range.
then your code would be:
<script>
$(document).ready(function () {
var dtStart = $('[id$=txtStart]'),
dtEnd = $('[id$=txtEnd]');
$('[id$=txtStart]').dateRangePicker(
{
separator: ' to ',
getValue: function() {
if (dtStart.val() && dtEnd.val())
return dtStart.val() + ' to ' + dtEnd.val();
else
return '';
},
setValue: function(s, s1, s2) {
dtStart.val(s1);
dtEnd.val(s2);
}
});
});
</script>
and your master page:
<link rel="stylesheet" href="//longbill.github.io/jquery-date-range-picker/daterangepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//longbill.github.io/jquery-date-range-picker/jquery.daterangepicker.js"></script>
result:

Categories