How to get the year from datepicker ui? - javascript

I have code which the user choose date .
I need to to get the value year and put it in div.
How can I do that?
jsFissl Demo
many Thx.
the code:
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
<div id="Year"></div>
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$("#Year").text($("#datepicker").val());
I try to use .substring(0, 4)but I don't kno how.


You can convert that input value into a Javascript Date as well and have everything from it's method.
http://jsbin.com/ugaxob/2/edit
$(".btn-getdate").click(function() {
var dt = $("#datepicker").val(),
d = new Date(dt);
$("#Year").text(d.getFullYear());
});
or go wild and use MomentJs plugin and you will get so much fun (live example updated)
When you want to perform something on a plugin, that is called act upon an event, and you should see the Events tab in the DatePicker, where you can find onSelect.
My live example was changed to act upon selection and no need to press any link or button.


This shows the year you wanted to extract.
HTML:
<meta charset="utf-8">
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
<button>Show year</button>
</div><!-- End demo -->
JS:
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$("button").click(function() {
var split = $("#datepicker").val().split('/');
alert(split[2]);
});
});​
The split method of String class divides the string and returns as an array.
EDIT: This does everything you wanted.
Take a look at the onSelect event.
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(dateText) {
var split = $("#datepicker").val().split('/');
$("#Year").text(split[2]);
}
});
});​


How about this : JSFiddle
No need to do string manipulation, just create Date object using selected date from datepicker and use getFullYear() method to get selected year...
$(function() {
$("#datepicker").datepicker({
onSelect: function(date) {
var d = new Date(date);
alert(d.getFullYear());
},
changeMonth: true,
changeYear: true
});
});

Related

JQuery datepicker yearrange

I have 2 datepickers like this
<input type="text" class="datepicker" data-year-range="2010:2016"/>
<input type="text" class="datepicker" data-year-range="2000:2020"/>
I have to define the yearRange for the 2 datepickers in configuration. So, I did like this.
$('.datepicker').datepicker({
changeYear: true,
// $(this) isn't working here
//yearRange : $(this).attr('data-year-range'),
yearRange : $('.datepicker').attr('data-year-range')
});
But it is taking only 2010:2016 for the two datepickers. I don't understand why. The idea is to use different date ranges for the datepickers. Is it possible or do I need to define different datepickers?
Also, In datepickers is it possible to add the yearRange in html instead of the datepicker configuration?
Here is the fiddle

You can do it in following way:
https://jsfiddle.net/m5fvc22f/16/
$(document).ready(function() {
$('.datepicker').each(function() {
$(this).datepicker({
changeYear: true,
yearRange: $(this).data('year-range'),
});
})
})

Try this : use $(this) instead of $('.datepicker')
$('.datepicker').each(function(){
$(this).datepicker({
changeYear: true,
yearRange : $(this).data('year-range')
});
});
JSFiddle Demo

How to get the selected date from jquery datepicker

I am using jquery datepicker to show a calendar.Now as per my requirement i want to get the date selected by the user in my jquery variable which i will use in my application but i am not able to get the date ..
Here is the code for datepciker
<div id="datepicker"></div>
and here i am trying to get the selected code..
$(document).ready(function () {
$("#datepicker").datepicker({
onSelect: function (dateText, inst) {
var date = $(this).val();
alert(date);
}
});
});
But, I am not able to get the date ..Please help me ..Thanks..

This should do the trick
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
It's basic but here is a jsfiddle with it alerting the selected date when selected
update to change the date format
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
jsfiddle
3rd update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).val();
alert(selected);
}
});
});
I have used a little more of the native markup for datepicker ui here try this and see if you get the alert as you are after.
4th Update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).datepicker("getDate");
alert(selected);
}
});
});
The 4th method uses $(this).datepicker("getDate") instead of $(this).val() as $(this).datepicker("getDate") returns a date object and $(this).val() returns the date as a string.
Depending on your needs select which one is appropriate.
(Added 4th method and explanation of the difference after #TimothyC.Quinn commented that the getDate being the correct method)

Though, question is answered, for people who just want a date object or set a date with specific format. There is simple functions jQuery provides. Here's working jsfiddle
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
$("#datepicker").datepicker('setDate', '10-03-2020');
// pass string of your format or Date() object
$("#datepicker").datepicker('getDate');
// returns Date() object
$("#another_datepicker").datepicker('setDate', $("#datepicker").datepicker('getDate'));
// pass string of your format or Date() object

Try
$("#datepicker").datepicker({
onSelect:function(selectedDate)
{
alert(selectedDate);
}
});
OR
$("#datepicker").datepicker({
onSelect:function (dateText, inst)
{
alert(inst);
}
});

try this
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
})
you have two elements with the class .datepicker, the selector won't know which element to choose from. So, you'll have to specify the name of the input you're trying to get the date from
first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');

You can use the changeDate event outlined here instead of onSelect and then reference e.date or e.dates. See the JSON below.
HTML:
<div id='QA'></div>
<div id='datepicker'></div>
JS:
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
clearBtn: true,
todayHighlight: false,
multidate: true
}) .on('changeDate', function(e){
$('#QA').html(JSON.stringify(e));
});
});
/*
{
"type":"changeDate",
"date":"2015-08-08T07:00:00.000Z",
"dates":[
"2015-08-08T07:00:00.000Z"
],
"timeStamp":1438803681861,
"jQuery21409071635671425611":true,
"isTrigger":3,
"namespace":"",
"namespace_re":null,
"target":{
},
"delegateTarget":{
},
"currentTarget":{
},
"handleObj":{
"type":"changeDate",
"origType":"changeDate",
"guid":52,
"namespace":""
}
}
*/
</script>

The ideal way is to get the date and convert it to a common format and utilize the same. (may passing to server or so.)
$("#datepicker").datepicker('getDate').toISOString()
so it will get the date in ISO stander.

All code is for Bootstrap Datepicker
var calendar = $('#calendar').datepicker("getDate"); // Ex: Tue Jun 29 2021 00:00:00 GMT+0600 (Bangladesh Standard Time)
or
var calendar = $('#calendar').data('datepicker').getFormattedDate('yyyy-mm-dd'); // Ex: 2021-06-30
if(calendar){
alert(calendar);
} else {
alert('null');
}

If you need it in specific format like '2021/09/28':
$.datepicker.formatDate('yy/mm/dd',
$('.date-picker-2').datepicker("getDate")
);

Here is how to get Date object from datepicker in the onSelect event:
$("#datepickerid").datepicker({
onSelect: function (dateText, inst) {
var date_obj = $(this).datepicker('getDate');
}
});
I find it strange that the onSelect caller would not return the date object by default.

Jquery function not working on the first click

i have added function for datepicker. but my date picker is not open on the first click.
here is my jsp code..
To
here is my query functions..
function addDate(idName) {
$(idName).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
}function addTime(idName) {
$(idName).timepicker({`
ampm: true,
timeFormat: "hh:mmtt"
});
}
please help me.. thanks.

DatePickers and TimePickers are assigned to focus events automatically. You do not need to call $(object).datepicker() every time, just at initialization and it will open properly when focused.
A good approach is to assign the .datepicker class to every object you want to have the DatePicker assigned and, then, assign the DatePicker to all elements of that class.
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
});
Do the same thing with TimePickers.

Try this bellow and i don know what language your using?
#Html.TextBoxFor(model=> model.Filters.EndTime,new { #class = "date" })
$('.date').datepicker({ dateFormat: "yy/mm/dd", maxDate: '+0d', minDate: '-600d'});
above code is written in asp.net mvc

You need to call
addDate(idName)
on document ready like this
$(function() {
addDate(idName)
});

jquery datepicker daterange, specify start year

I'm using the date range with jquerydate picker.
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("form").validationEngine();
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-14:-75'
});
});
</script>
The problem is then that the drop down box starts at 1936, where as I would like it to start at the other end of the scale. Can anyone help

You can use the defaultDate option: http://jqueryui.com/demos/datepicker/#option-defaultDate
jQuery(document).ready(function() {
// binds form submission and fields to the validation engine
// jQuery("form").validationEngine();
var myDate = new Date("March 21, 1997");
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-14:-75',
defaultDate: myDate
});
});
See on this jsfiddle

Is there anyway to make a jQuery UI Datepicker unclickable?

Is there anyway to make a jQuery UI Datepicker unclickable, so that it's essentially just displaying a date? I tried
$("#calendar").datepicker({
disabled: true,
altField: '#note_date',
maxDate: 0
});
but it didn't work. Thanks for reading.

Something like this?
Example: http://jsfiddle.net/Ay6Nv/
$('#calendar').datepicker({
beforeShowDay: function(date) {
return [new Date(this.value).getDate() == date.getDate()];
}
});​

Why don't you add the readonly attribute at the input like this :
<input type='text' value='24/01/2019' readonly="readonly" />

Categories