when using datetime picker format it increases year by 5 - javascript

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.

Related

Formatting selected date in jquery

I am displaying datepicker without an input. I want to get the selected date and format it to dd-mm-yy but it's not working.
$(function() {
var selectedDate = $("#inline-calendar").datepicker({
changeYear: true,
dateFormat: 'dd-mm-yy',
}).datepicker("setDate", "now").datepicker("getDate");
console.log(selectedDate)
});
<div id="inline-calendar"></div>
The output of the above code is Sat Sep 12 2020 00:00:00 GMT+0800 (Singapore Standard Time)
You can simply use .data attributes in bootstrap datepicker to get the value of the date on the calendar using getFormattedDate
Live Working Demo:
$(function() {
$("#inline-calendar").datepicker({
changeYear: true,
dateFormat: 'dd-mm-yy',
}).datepicker("setDate", "now").datepicker("getDate");
//get date value
let getDate = $("#inline-calendar").data('datepicker').getFormattedDate('dd-mm-yy');
console.log(getDate) //12-09-20
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
<div id="inline-calendar"></div>

How to add multiple strings to input?

I am running bootstrap datepicker, with an inline calendar and a date range. The following works in terms of front end buttons highlighting, but the input isn't showing the value range`.
NOTE I am looking to get the comma separated years only like 2014, 2018 and we can only select two years max as per a range.
$('#sandbox-container').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: true,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#sandbox-container');
if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div id="sandbox-container"></div>
<input type="text" id="date" value="">
You're not setting the value on the "date" input field. You're setting it on the "sandbox-container" div. Change it to the input field and it will start to populate the text field.
Additionally, I'd check the documentation for the bootstrap datepicker daterange: https://bootstrap-datepicker.readthedocs.io/en/v1.7.1/markup.html#daterange
Here I've made some adjustments to the JS (reference date element and call datepicker show method) and HTML (removed sandbox-container)
$('#date').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: false,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#date');
if(elem.data("selecteddates") == dates.join(","))
return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2)
dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
$("#date").datepicker("show");
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<input type="text" id="date" value="">

How to pass PHP date variable as a mindate to datepicker

The code:
$minDate=date(); /* PHP date variable
----------
*/
<script type="text/javascript">
$(document).ready(function() {
$("#datePicker1").datepicker();
});
</script>/* datepicker script
----------
*/
You can use like this
$("#datePicker1").datepicker({minDate: "<?php echo $minDate;?>"});
The condition is you should use both PHP and JavaScript code in same .php file.
Also it seems like you just want to set minDate as today, so just use:
$("#datePicker1").datepicker({minDate: 0});
Assuming you are using jQuery UI, you should set it up like this:
$( "#datePicker1" ).datepicker({ minDate: "<?php print mindate ?>"});
Try this:
$("#datePicker1").datepicker({minDate: <?php echo date('D M d Y H:i:s O'); ?>});
It was found in Stack Overflow question Send PHP date to JavaScript date format.
This maybe a pure JavaScript function, but try it.
Working Demo
JavaScript
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function (dateText) {
$("#datepicker2").datepicker('option', 'minDate', dateText);
}
});
$("#datepicker2").datepicker({
changeMonth: true,
changeYear: true
});
HTML
<div class="demo">
<p>Date 1: <input id="datepicker" type="text"></p>
<p>Date 2: <input id="datepicker2" type="text"></p>
</div><!-- End demo -->

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;

Categories

Resources