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);
Related
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>
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" />
I've been stuck on changing the language of a calendar from English which is the default to French on Bootstrap 4 and I can't do it, it's driving me mad!
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapdatepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script src="./js/main.js"></script>
<script>
$(document).ready(function() {
var date_input = $('input[name="date"]');
var container = $('.input-group').length > 0 ? $('.input-group').parent() :
'body';
var options = {
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
daysOfWeekDisabled: [0, 6],
weekStart: [1]
};
date_input.datepicker(options);
});
</script>
Thanks
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
Use this tag after bootstrap-datepicker. and this
$('.datepicker').datepicker({
language: 'fr'})
It will work.
It's because you haven't passed the language key to options.
Try adding this keys as options:
var options = {
language: 'fr'
};
All locales are available under js/locales. Be sure to include it after plugin initialization.
References:
1- https://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html
2- https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#language
3- Change language for bootstrap DateTimePicker
You can use translation i18n of lang and call it, theres no needed to call language specific. Like this.
this.$i18n.t("fixed_pickups.weekdays.monday") }
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=";" />
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;