I am new to the web development. Here, I am using the jquery datePicker. In this I have a input box and that user can select only year and month and not date. So, I used,
$('#' + duration[k]).datepicker({
format: 'MM yyyy',
viewMode: "months",
minViewMode: "months",
});
I did this, Here my input are getting created dynamically.
var duration = ["StartDuration", "EndDuration"];
var commentText = document.createElement('input');
commentText.setAttribute("type", "text");
commentText.name = "month";
commentText.id = duration[k];
commentText.className = 'form-control';
commentText.rows = '3';
commentText.placeholder = "Enter" + " " + duration[k];
commentText.setAttribute("readOnly", "true");
commentText.setAttribute("ng-model", duration[k]);
Used for loop on the array and then created this input box. Now what happening is here, It gets datepicker but it is having a date-month-year . So, I want to have only year and month. Can any one pleas help me with this ?
You need to use dateformat like this : dateFormat: 'MM yy'
Check the example :
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: '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));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<label for="startDate">Your Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
Here is fiddle
You can do like this
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
});
Jquery datepicker provides these two - changeMonth,changeYear property for it and make format like MM yy.
Related
I have one datepicker how can I send the value in two textboxes with deferent format?
I have used this :
<script>
$(function () {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Date",
dateFormat: "D dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: new Date(),
//maxDate: new Date()
onSelect: function () {
var copydate = $(".datepicker").datepicker('getDate');
$("#FDate").val(copydate);
}
});
});
</script>
textbox1 which has the class datepicker working fine get me the date like this TUE 20/10/2020
but textbox2 called FDate get me very long date with extra details I want it to show only 20/10/2020
any help please?
I tried to use dateformat after val or after getdate but not working.
The var copydate = $(".datepicker").datepicker('getDate'); returns the long date format.
You need to .formatDate() the date from the .datepicker
$(function () {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Date",
dateFormat: "D dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: new Date(),
//maxDate: new Date()
onSelect: function () {
var datetypevar = $(".datepicker").datepicker('getDate');
var copydate = $.datepicker.formatDate('dd/mm/yy', datetypevar);
$("#FDate").val(copydate);
}
});
});
How to fix Year range start year in datepicker Datetime in ASP.NET MVC?
My code is
Script:
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
});
</script>
View
#Html.DropDownListFor(m => m.Gender, Model.GenderList, "- Select Gender -", new { #class = "form-control" })
#Html.EditorFor(m => m.Dateofbirth, new { #class = "form-control datepicker" }).
Here my question is how to fix year range in dateofbirth field datepicker depends on gender value..
Ex:
Gender==Male dateofbirth year select Option starts from (currentYear - 21)
Gender==Female dateofbirth year select Option starts from (currentYear - 18)
After selecting gender value change change year range in dateofbirth field else show error message.
Explanation:
jQuery Datepicker has a yearRange property which allows user to set the start and end year range that will be displayed the Year Dropdown within the jQuery Datepicker.
The syntax of the value is '{Start-Year}:{End-Year}'
<script type = "text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
$('.date-picker2').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
run code in js fiddle:
click here
I have to use a JQuery Calendar control for Date Of Birth field and by default change in Calendar are reflect only when user selects the date, while i have been asked to make changes to reflect when either user selects month, date or year in the calendar control
CodePen
<input name="txtdob" id="txtDOB" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text">
$(document).ready(function () {
// $(function () {
$("#txtdob").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: "-90:+0"
});
// });
});
Is there any property which i can set so that when ever user select date, month or year then same changes should reflect in the txtDOB input fields
UPDATED:
I did it like this
$(function () {
$("#txtDOB").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: "-90:+0",
onChangeMonthYear: function (y, m, i) {
var d = i.selectedDay;
$(this).datepicker('setDate', new Date(y, m - 1, d));
}
});
});
How about this solution. Hope it helps!
Here's an updated codepen: http://codepen.io/HenryGranados/pen/ObWaXX
$(function() {
var date = new Date();
var currentDay = date.getDate();
$("#txtdob").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-90:+0",
onChangeMonthYear: function(year, month, inst) {
$(this).val(currentDay + "/"+month + "/" + year);
}
});
});
.rg-txt{
width:200px;
margin:50px 200px;
}
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input name="txtdob" id="txtdob" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text">
</body>
</html>
Hi i want to select date of birth from first date picker. In second date picker pick dates only above date of birth.
http://jsfiddle.net/boopathirajan/6c3v5gna/2/
I added code here.
so help me how to pick date2>date1 only
html
<div class="wrapper">
<input type="text" value="" id="date1" name="dob">
<input type="text" value="" id="date2" name="vcc">
</div>
jquery
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
Here is the solution for you.
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date2").datepicker("option","minDate", selected)
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date1").datepicker("option","maxDate", selected)
}
});
JSFIDLE
OR a different Approach
$(document).ready(function () {
$("#date1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#date1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
}
});
$('#date2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#date1').datepicker('getDate');
var dt2 = $('#date2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#date2').datepicker('option', 'minDate');
$('#date2').datepicker('setDate', minDate);
}
}
});
});
Its working fine
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0,
onSelect: function (date) {
$('#date2').datepicker('option', 'minDate', date);
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate:0,
minDate:1,
});
DEMO
I have two input fields for which I'm using datepicker:
On the first I want to hide the day selector and the 'Today' button.
On the second I want a normal datepicker
To achieve the desired effect on the 1st, I'm using a hack, like:
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: '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));
}
});
With CSS:
.ui-datepicker-calendar {
display: none;
}
HTML:
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<label for="startDate">Outra Data :</label>
<input name="outraData" id="outraData" />
I tried:
#startDate .ui-datepicker-calendar {
display: none;
}
And:
.date-picker .ui-datepicker-calendar {
display: none;
}
Here's a JSFiddle
You can simply apply the css [By inspecting using dev tools(F12)]
.ui-datepicker-current{
display: none ;
}
JSFiddle
Remove the following option in your datepicker to hide the buttons:
showButtonPanel: true
Since you want 2 different datepickers, use the following:
HTML
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" />
<label for="startDate">Outra Data :</label>
<input name="outraData" id="outraData" />
JS
$('#startDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: '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));
}
});
$('#outraData').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: '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));
}
});
Notice that i have called the datepickers on the basis of IDs.
DEMO