Need datepicker which shows date in other format - javascript

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;

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>

Add a day to datepicker

Hi friends and sorry about this noob question but i don't get support from the theme developers.
I have a datepicker on one of my websites and would like to add a day to the current date.
So i found a js file what is including some code like this. I am sure you have a solution for this, but i don't ;-)
The goal is that people are not able to book or make a reservation for the same day.
$( '#reservations-date-selector' ).datepicker().datepicker( 'option', 'dateFormat', dateFormat ).datepicker( 'setDate', new Date() );
$( '#reservations-date-selector' ).datepicker().datepicker( 'option', 'dateFormat', dateFormat ).datepicker( 'setStartDate', new Date(new Date().getTime()+(1*24*60*60*1000)) );
Simply set the minDate option to 1 for one day after today
$(function() {
let dateFormat = "d MM, y";
$('#reservations-date-selector')
.datepicker({
minDate: 1,
dateFormat: dateFormat
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" integrity="sha256-p6xU9YulB7E2Ic62/PX+h59ayb3PBJ0WFTEQxq0EjHw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<input type="text" id="reservations-date-selector" />

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);

Bootstrap-datepicker getDate wrong result

I'm using bootstrap-datepicker. I do a getDate immediately after doing a setDate, but get the wrong value. I don't understand what I'm doing wrong.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<input class='date' data-date-format="M d, yyyy">
<script>
var new_date = moment().subtract('days', 30).toDate();
console.log('new_date:', new_date);
$('.date').datepicker('setDate', new_date);
$('.date').datepicker('update');
console.log('date:', $('.date').datepicker('getDate'));
</script>
It seems it doesn't like your , in the date format. Drop it and it prints the correct date. Note that datepicker also uses , as a multi-date separator.
Changing the default multidateSeparator allows the comma in the formatting string.
$(".date").datepicker({
multidateSeparator: ";"
});
or
<input class="date" data-date-format="M d, yyyy"
data-date-multidate-separator=";" />

Categories

Resources