How do I format the date with bootstrap datepicker? - javascript

I have a select drop down that activates two datepicker input field depending on what is selected. When one field is selected, I would like to fill in the value of today's date plus one year. However, when I select that, I get this: Tue Aug 11 2015 00:00:00 GMT-0400 (Eastern Daylight Time). I would like to have the date as: mm/dd/yyyy.
I have setup a fiddle. http://jsfiddle.net/mwoods98/aku8ytju/
Updated fiddle
Here is a look at the code:
$(document).ready(function() {
$('#getHoldStatus').change(function()
{
var selected_item = $(this).val()
if(selected_item == "3"){
$('#datepicker').val("").removeClass('invisible');
$('#datepicker2').val("").removeClass('invisible');
var date = new Date("8/11/2014");
var date3 = new Date("8/11/2015");
$('#datepicker2').val(date3);
var newDate = new Date(date3.getFullYear(), date3.getMonth(), date3.getDate()+1);
$('#datepicker2').datepicker({ dateFormat: "mm/dd/yyyy" });
}
else if(selected_item == "2") {
$('#datepicker').val("").removeClass('invisible');
$('#datepicker2').val(selected_item).addClass('invisible');
$("#datepicker2").val('0');
}
else
{
$('#datepicker').val(selected_item).addClass('invisible');
$('#datepicker2').val(selected_item).addClass('invisible');
$("#datepicker").val('');
$("#datepicker2").val('');
}
}
);
// put all your jQuery goodness in here.
});
I am manually setting the date here for now but I can't seem to get it formatted properly.
<label class="control-label" for="getHoldStatus">
Hold Status
</label>
<div class="controls">
<select id="getHoldStatus" name="getHoldStatus">
<option value=""></option>
<option value="1" >None</option>
<option value="3" >On Hold until Candidate Available</option>
<option value="2" >On Hold until Position Available</option>
</select>
</div>
<label class="control-label" for="input08">
Hold Start Date
</label>
<div class="controls">
<script>
$(function() {
$( "#datepicker" ).datepicker({autoclose: true, todayHighlight: true, orientation: "bottom right"});
});
</script>
<div><input type="text" id="datepicker" value="" name="fdfHoldStartDate" class="invisible" /></div>
</div>
<label class="control-label" for="input09">
Hold End Date
</label>
<div class="controls">
<script>
$(function() {
$( "#datepicker2" ).datepicker({format: "mm/dd/yyyy", autoclose: true, todayHighlight: true});
});
</script>
<div><input type="text" id="datepicker2" value="" name="fdfHoldEndDate" class="invisible" /></div>
</div>
UPDATE: For some reason, the fiddle did not update. I have confirmed it and now the source appears relevant to the question I was asking. You can see how the date is being formatted when a selection is made.

Look at this: Bootstrap 3 datepicker - code generator
<input type="text" type="text" id="date1">
$('#date1').datepicker({
format: "mm-dd-yyyy"
});

Use the format instead of formatDate:
$('#datepicker2').datepicker({ format: "mm/dd/yyyy" });
The check in/check out example should be useful: Datepicker for Bootstrap

Related

Disable minutes selection in Bootstrap Datetimepicker

I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this
Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});
see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/
try using step: 60 not steps
please check this link also :click here

Starting date and ending date are same using Bootstrap datepicker

Starting date and ending date are same. If change starting date automatically changed end date. Here my code
<input id="startingDate" class="datePicker form-control" name="startingDate" value="14-01-2017" type="text">
<input id="endingDate" class="datepicker form-control" name="endingDate" value="" type="text">
Javascript code
$(document).on('blur', '#startingDate', function(){
var date = $(this).val();
$("#endingDate").datetimepicker({
dateFormat: "dd-mm-yy",
defaultDate: date
});
});
What is my problem and how i can solve that problem ??
if you want to have the same value in endingDate when you leave your startingDate
you can do that's
<script>
$(document).ready(function(){
$("#startingDate").blur(function (){
$("#endingDate").val($(this).val());
});
});
</script>

Bootstrap datepicker: second field to allow dates later than the selected date on first field

When user selects a date on the first field, the second field must start on the selected date, and disallow any selection of previous date. I created a fiddle for reference
http://jsfiddle.net/gfokvuxr/ and here is the code:
Thank you
<label class="form-label">Loading Date</label>
<div class="input-append success date">
<input type="text" name="loadingdate" id="dt1" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
<label class="form-label">Delivery date</label>
<div class="input-append success date">
<input type="text" name="deliverydate" id="dt2" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
this is the JS code
$('.input-append.date').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: new Date()
});
Based on my reading of the API, it would be thus:
$('#loadDate').change(function(event, ui){
$('#deliverDate').datepicker( "setDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
$('#deliverDate').datepicker( "option", "minDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
});
https://jsfiddle.net/1a09hyff/1/
Give each datepicker an ID and use those to register an event listener on the first to update the second's minDate.
That said, it isn't working for some reason; I can't get any of the modification methods (including destroy) to actually work. A couple throw internal errors (I've been seeing a lot of those lately, where date.getMonth() throws getMonth is not a function etc).

Bootstrap datepicker auto fill end date

I am using the Bootstrap Datepicker here in order to display a simple calendar range picker. All is working well so far, however I would like some additional functionality that I can't seem to figure out.
I would like to select a start date and then automatically fill in the end date (+10 days).
I'm sure this is possible however I can't figure it out.
I have created a Fiddle. Any help is greatly appreciated.
My JS is as follows;
$( document ).ready(function() {
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yy",
startDate: "0d",
endDate: "+10d",
todayBtn: "linked",
clearBtn: true,
multidateSeparator: " ",
forceParse: false,
daysOfWeekDisabled: "0,6",
orientation: "top auto",
todayHighlight: true,
toggleActive: true
});
});
My HTML is as follows;
<div class="col-md-5" id="sandbox-container">
<h2>Select borrow date</h2>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-lg form-control" name="start" placeholder="borrow date" /> <span class="input-group-addon">to</span>
<input type="text" class="input-lg form-control" name="end" placeholder="return date" />
</div>
</div>
You can check this link
Datepicker using jquery
You have to include javascript on change fuction of first datepicker
$('firstdatepicker').change(function() {
var date2 = $('firstdatepicker').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('seconddatepicker').datepicker('setDate', date2);
});

AUI datepicker error and workaround

I am checking the Liferay Site for Alloy UI date picker.
The problem in the given example is that there is no select option. If the DOB of my user is in 70's then the user has to click back button multiple times.
This is not a happy scenario for the user. How can I edit my AUI javascript to something like month and year option given by jquery here
I'm assuming that you are using AlloyUI 1.5 here, and so I would recommend using the DatePickerSelect component but hiding the select elements that you don't need with display: none;. Assuming that you only want a year dropdown, you could hide both the month and day dropdowns. I've created a runnable snippet example here:
AUI().use('aui-datepicker', function (A) {
var datePicker = new A.DatePickerSelect({
dayNode: '#day',
monthNode: '#month',
yearNode: '#year',
calendar: {
dateFormat: '%m/%d/%Y'
},
render: true
});
// Working around the fact that the calendar does not get updated
// when a new year is selected:
var yearNode = A.one('#year');
yearNode.on('change', function(event) {
datePicker.calendar.set('currentYear', yearNode.get('value'));
var date = datePicker.calendar.date;
datePicker.calendar.clear();
datePicker.calendar.date = date;
});
});
<script src="http://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/1.5.1/aui-skin-classic/css/aui-skin-classic-all-min.css" rel="stylesheet">
<div id="datePicker">
<select id="month" style="display: none;">
<option></option>
</select>
<select id="day" style="display: none;">
<option></option>
</select>
<select id="year">
<option></option>
</select>
</div>
AUI Element:
<aui:input name="dateOfBirth" cssClass="dob" id="dateOfBirth" title="Date Of Birth" placeholder="dd/mm/yyyy" readonly="true" >
Script:
$(".dob").datepicker({ dateFormat: "dd/mm/yy",minDate: new Date(), changeYear: true,changeMonth: true,yearRange: "-0:+10y", onClose: function(date, datepicker) {$(".dob").focus(); }});

Categories