So I am using the calendar app on a page that has a set date. I have it so when you click on the calendar, whatever is in the input that has the date, gets changed to the date you clicked on.
When you load into the page I want whatever date that is in the input to be what the calendar is set to. Thanks.
LINK TO PLUGIN - https://www.jqueryscript.net/time-clock/Simple-jQuery-Calendar-Date-Picker-Plugin-DCalendar.html
var pageDate = "4/04/2018";
<input class="date">
$('.date').val(pageDate);
// Make above date the selected date
// Code below is for setting input to date you select. Currently works.
$('.box').dcalendarpicker({
format: 'mm-dd-yyyy'
}).on('datechanged', function(e) {
console.log('Date change');
var d = e.date;
selectedDate = moment(d, 'MM-DD-YYYY');
var theDate = selectedDate._i;
$('.date').val(theDate);
var weekdayLongform = selectedDate.format("dddd, MMMM");
var dateLongform = selectedDate.format(" D");
var yearLongform = selectedDate.format(" YYYY");
});
Just set the date as the value of the input (in the same format specified in the plugin initialization). That will do the trick.
<!-- value specifid as mm-dd-yyyy -->
<input class="date" value="03-11-2018">
I am using pikaday module for datepicker, but the format comes as inappropriate format. I tried adding this line of code but still not working:
.config(['pikadayConfigProvider', function (pikaday) {
pikaday.setConfig({
numberOfMonths: 1,
format: "YYYY/MM/DD"
});
}])
This is how my html looks like:
<div class="modal-body">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" pikaday="myPickerObject" name="time" ng-model="clas.class_.time" placeholder="Enter time" tabindex="3">
</div>
</form>
</div>
Also tried to add as an inline attribute
format = "yyyy/mm/dd"
still not working.
Any help
You can use moment.js and set the format by setting
defaultDate : moment().format("MMM YYYY")
this will be the initial input date display format.
For displaying/processing the date in other desired formats, use
var field = document.getElementById('datepicker');
var picker = new Pikaday({
onSelect: function(date) {
field.value = this.getMoment().format('Do MMMM YYYY');
}
});
use moment.js to set the date format:
var picker = new Pikaday(
{
field: document.getElementById('eDate'),
toString(date, format) { // using moment
return moment(date).format('MM/DD/YYYY');
},
});
quick update, if you don't want to use moment.js, you can fdo the following
new Pikaday({
field: document.getElementById('eDate'),
toString: function(date) {
var parts = [('0'+date.getDate()).slice(-2), ('0'+(date.getMonth()+1)).slice(-2), date.getFullYear()];
return parts.join("-");
}
})
this will produce 18-07-1980. You can change from '-' to '/' by changing return parts.join("-"); and you can rearrange parts to apply mm/dd/yyyy via parts array
I have this online reservation, and i have this problem, Is there a way i can highlight the unavailable days on the date picker?assuming i have inserted dates on the database. Here's my code for the date picker.
<input type="text" name="pick-up-date" id="pick-up-date" class="form-control datepicker" placeholder="mm-dd-yyyy">
Here's a screenshot:
Use beforeShowDay() function from jQuery check this
e.g., something like this,
var datesToDisable = ["2015-01-07","2015-17-07","2015-21-07"]; //you have to fetch the dates and put em in an array and wh7atever the format is.
$('#pick-up-date').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ datesToDisable.indexOf(string) == -1 ]
}
});
Should do the trick!
I want to set default time in this datetimepicker as 00:01 for the current date. Anyone tried that before? Having a tough time with it. It Seems simple.
$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm'
});
I need to use setDate, but I'm not sure how. I checked their code, but did not find a parameter for that.
None of the above worked for me, however I had success setting the default at time of instantiation.
JQuery
<script type="text/javascript">
$(function () {
var dateNow = new Date();
$('#datetimepicker').datetimepicker({
defaultDate:dateNow
});
});
</script>
Set a default input value as per this GitHub issue.
HTML
<input type="text" id="datetimepicker-input"></input>
jQuery
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + '/' +
(month<10 ? '0' : '') + month + '/' +
(day<10 ? '0' : '') + day;
$("#datetimepicker-input").val(output + " 00:01:00");
jsFiddle
JavaScript date source
EDIT - setLocalDate/setDate
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm'
});
$("#startdatetime-from").data('DateTimePicker').setLocalDate(new Date(year, month, day, 00, 01));
jsFiddle
For use datetime from input value, just set option useCurrent to false, and set in value the date
$('#datetimepicker1').datetimepicker({
useCurrent: false,
format: 'DD.MM.YYYY H:mm'
});
i tried to set default time for a picker and it worked:
$('#date2').datetimepicker({
format: 'DD-MM-YYYY 12:00:00'
});
this will save in database as : 2015-03-01 12:00:00
used for smalldatetime type in sql server
It works for me:
<script type="text/javascript">
$(function () {
var dateNow = new Date();
$('#calendario').datetimepicker({
locale: 'es',
format: 'DD/MM/YYYY',
defaultDate:moment(dateNow).hours(0).minutes(0).seconds(0).milliseconds(0)
});
});
</script>
use this after initialisation
$('.form_datetime').datetimepicker('update', new Date());
Hello developers,
Please try this code
var default_date= new Date(); // or your date
$('#datetimepicker').datetimepicker({
format: 'DD/MM/YYYY HH:mm', // format you want to show on datetimepicker
useCurrent:false, // default this is set to true
defaultDate: default_date
});
if you want to set default date then please set useCurrent to false otherwise setDate or defaultDate like methods will not work.
This Works for me. I have to use specially date format like this 'YY-MM-dd hh:mm' or 'YYYY-MM-dd hh:mm'
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-dd hh:mm',
defaultDate: new Date()
});
This is my solution for your problem :
$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm'
}).on('dp.change', function (e) {
var specifiedDate = new Date(e.date);
if (specifiedDate.getMinutes() == 0)
{
specifiedDate.setMinutes(1);
$(this).data('DateTimePicker').date(specifiedDate);
}
});
This also work for setting a default hour or both.
Note that this code sample works with the useCurrent: false parameter too.
When the user pick a date, we check if the minute is 0 (hard-coded default value). In this case, we set a 1. Then, the user cannot select 0.
I solved my problem like this
$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm',
defaultDate:new Date()
});
Momentjs.com has good documentation on how to manipulate the date/time in relation to the current moment. Since Momentjs is required for the Datetimepicker, might as well use it.
var startDefault = moment().startof('day').add(1, 'minutes');
$('#startdatetime-from').datetimepicker({
defaultDate: startDefault,
language: 'en',
format: 'yyyy-MM-dd hh:mm'
});
By using Moment.js, i able to set the default time
var defaultStartTime = moment(new Date());
var _startTimeStr = "02:00 PM"
if (moment(_startTimeStr, 'HH:mm a').isValid()) {
var hr = moment(_startTimeStr, 'HH:mm a').hour();
var min = moment(_startTimeStr, 'HH:mm a').minutes();
defaultStartTime = defaultStartTime.hours(hr).minutes(min);
}
$('#StartTime').datetimepicker({
pickDate: false,
defaultDate: defaultStartTime
});
This works for me after a long hours of search , This solution is for Bootstrap datetimepicker version 4. when you have to set the default date in input field.
HTML
"input type='text' class="form-control" id='datetimepicker5' placeholder="Select to date" value='<?php echo $myDate?>'// $myDate is having value '2016-02-23' "
Note- If You are coding in php then you can set the value of the input datefield using php, but datetimepicker sets it back to current date when you apply datetimepicker() function to it. So in order to prevent it, use the given JS code
JAVASCRIPT
<script>
$('#datetimepicker5').datetimepicker({
useCurrent: false //this is important as the functions sets the default date value to the current value
,format: 'YYYY-MM-DD'
});
</script>
Hi i using this code to show a expiration date based on the select.
<script>
$(function(){
$("#date_picker").datepicker();
$("#Plano_Id").change(function() {
var offset = +$(this).find("option:selected").attr("title"), /* get days to add on date*/
theDate = new Date();
theDate.setDate(theDate.getDate() + offset);
$("#date_picker").datepicker("setDate", theDate);
});
});
</script>
But this returns the date in this format mm/dd/yyyy. I'm trying to show dd/mm/yyyy
For setting the format for a specific date control
$('#datepicker').datepicker({ dateFormat: 'dd/mm/yyyy' });
For setting it throughout your site/page, use
$.datepicker.setDefaults({ dateFormat: 'dd/mm/yyyy' });
//Note:Call this before initializing any date pickers
Use the dateFormat option: http://jqueryui.com/demos/datepicker/#date-formats