bootstrap-datetimepicker: display value of input - javascript

How can I persuade the datetimepicker to display its value in the input text field at initial pageload?
In this case the value attribute of the datepicker text-input is already set, but the field is displayed blank. Therefore I've tried to set the 'data-date-defaultdate' attribute but at the initial pageload the text field´s still blank. After a reload the value is displayed as expected.
The Form (excerpt):
<form name="news" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label required" for="news_validFrom">Start time</label>
<div class="col-sm-8 col-md-6">
<div class="input-group date datetime-picker" id="datetime1">
<input type="text" id="news_validFrom" name="news[validFrom]" required="required" class="form-control" value="2016-07-08T00:00:00+02:00" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label required" for="news_validTo">End date</label>
<div class="col-sm-8 col-md-6">
<div class="input-group date date-picker" id="datetime2">
<input type="text" id="news_validTo" name="news[validTo]" required="required" class="form-control" value="2016-06-22T00:00:00+02:00" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
// [...]
</form>
The Script:
$(function () {
$('#datetime1')
.attr('data-date-defaultdate', $('#datetime1 input').attr('value'))
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime1 input').attr('value'),
viewDate: 'true'
});
$('#datetime2')
.attr('data-date-defaultdate', $('#datetime2 input').attr('value'))
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime2 input').attr('value')
});
});
Any ideas how to make this work?

Chnage to:
$(function () {
$('#datetime1')
.attr('data-date-defaultdate', $('#datetime1 input').val())
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime1 input').val(s),
viewDate: 'true'
});
$('#datetime2')
.attr('data-date-defaultdate', $('#datetime2 input').val())
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime2 input').val()
});
});

Since I didn´t come to a solution for this problem I gave another fork of the bootstrap-datetimepicker a try: smalot/bootstrap-datetimepicker
This one works as expected and I don´t have the problem with the input value (the value is always displayed in the text field).
I suppose, the problem could issue from the given date format (value="2016-07-0 8T 00:00:00 +02:00"), but I haven´t figure it out exactly.

Related

bootstrap datepicker click issue

I'm using bootstrap datepicker with bootstrap-rtl
the issue I had 2 fields, one for date and one for name, the datepicker not shown until I click first in date input then in name input then when I click back in date input the datapicker shown, and this happened only in first load of page then its work fine until you reload the page again.
<div class="col-md-6">
<div class="form-group">
<label for="name" class="control-label">name</label>
<input type="text" maxlength="40" name="name" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<span class="text-danger Bold">*</span>
<label for="civilIDExpiredDate" class="control-label">ExpiredDate</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="ExpiredDate" class="form-control datepicker">
</div>
</div>
</div>
<script type="text/javascript">
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
</script>
this will work for you
<script type="text/javascript">
$(document).ready({
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
});
</script>
you need to initialize your datetimepicker after dom is ready not before that.

How to disable past time time when the current date is today, enable all time if date is not today?

I am using bootstrap-datetimepicker by eonasdan.
I have two datetimepicker in my page. One is for date of arrival and the other one is for time of arrival.
$('#dateOfArrival').datetimepicker({
format : 'L',
minDate : new Date(),
keepInvalid : true
});
$('#timeOfArrival').datetimepicker({
format : 'LT',
minDate : moment()
});
I use two datetimepicker because that is the requirement.
I tried to call this function onchange of dateOfArrival but nothing is changed.
function setDateOfArrivalTime() {
$("#timeOfArrival").datetimepicker("option", "minDate", new Date($("#dateField").val());
}
Here is the html code
<div class='input-group date' id='dateOfArrival'>
<input type="text" class="form-control requiredField" id="dateField" onchange="setDateOfArrivalTime();" placeholder="mm/dd/yyyy" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<div class='input-group date' id='timeOfArrival' style="">
<input type='text' class="form-control requiredField" id="timeField"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time" placeholder="hh:mm"></span>
</span>
Any help is appreciated.
Eonasdan datetime picker has no change event, use dp.change instead. Moreover function like minDate should be accessed using .data("DateTimePicker"), as the docs says:
Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()
Here a working sample:
$('#dateOfArrival').datetimepicker({
format : 'L',
minDate : new Date(),
keepInvalid : true
}).on('dp.change', function(e){
// Set timepicker value to let the timepicker work
$("#timeOfArrival").data("DateTimePicker").date(e.date);
$("#timeOfArrival").data("DateTimePicker").minDate(e.date);
});
$('#timeOfArrival').datetimepicker({
format : 'LT',
minDate : moment(),
useCurrent: false
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='dateOfArrival'>
<input type="text" class="form-control requiredField" id="dateField" placeholder="mm/dd/yyyy" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='timeOfArrival' style="">
<input type='text' class="form-control requiredField" id="timeField" placeholder="hh:mm"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
PS. I do not understand why you are setting minDate to a time picker depending on the value of the datepicker.

Date Format(YYYY-MM-DD) in DatePicker and Date field

I have a date field in my application. By clicking it, a calendar appears. So after selecting a date, the date field must be shown as 'YYYY-MM-DD' but it shows as 'MM-DD-YYYY'.
<div class="control-group">
<label class="control-label" for="from">From</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="startdate" name="startdate" type="date">
</div>
</div>
<div class="control-group">
<label class="control-label" for="to">To</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="enddate" name="enddate" type="date">
</div>
</div>
<script type="text/javascript">
$(function () {
$('#startdate,#enddate').datepicker({dateFormat: "yyyy-mm-dd"});
});
</script>
Change the yyyy to yy. Here you have the doc http://api.jqueryui.com/datepicker/#utility-formatDate
In my experience format of the date depends on language which set for browser.
In browser js console you can see it with
navigator.languages
Hope it helps.

bootstrap datetimepicker get day

I am a newbie in here.
$("#tanggal_arsip").datetimepicker({
var day = daysofweek.value,
format:"yyyy-mm-dd"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" class="form-control" name="tanggal_arsip" id="tanggal_arsip" data-format="YYYY-MM-DD" placeholder="Tanggal Berita" required />
I have a question about datetimpicker.
How to get name of days in bootstrap datetimepicker?
For example i want to get Sunday or other day or just a number for day.
I can't find this problem in bootstrap datetimepicker documentation.
First: your input tag is wrong. You can see how to use it in the snippet.
You can use the following event:
dp.change: Fired when the date is changed.
parameters:
e = {
date, //date the picker changed to. Type: moment object (clone)
oldDate //previous date. Type: moment object (clone) or false in the event of a null
}
Using the date parameter contained in the event object and the moment methods format you can write (in the snippet you can see a different approach: select a day and show only the day of week):
$('#tanggal_arsip').datetimepicker({
format: 'YYYY-MM-DD'
}).on('dp.change', function(e) {
//
// on date change get current date and format as weekday
//
$('#weekDay').val(e.date.format('dddd'));
});
//
// select by day and show only day of week
//
$('#tanggal_arsip1').datetimepicker({
format: 'dddd',
viewMode: 'days'
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<label class="col-md-6 col-xs-6 control-label">Date:</label>
<div class="col-md-6 col-xs-6">
<div class="input-group date" id="tanggal_arsip">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="row">
<label class="col-md-6 col-xs-6 control-label">Day of Week:</label>
<div class="col-md-6 col-xs-6">
<input id="weekDay" type="text" class="form-control" disabled>
</div>
</div>
<div class="row">
<label class="col-md-6 col-xs-6 control-label">Select by day and Show Only Day Of Week:</label>
<div class="col-md-6 col-xs-6">
<div class="input-group date" id="tanggal_arsip1">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
You could just parse the result of $("datetime selector").val() to get the day and convert that to a word name if you need it.

boostrap date time picker 3 multiple instance format not working

I have multiple instances of boostrap datetime picker 3. I need to insert the linked field for each to input to a mysql database. I can only change one of the instances to be the correct format. Here is where I am at.
<div class="input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
Date 1
<input size="16" type="text" value="" readonly>
<br>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
Link1
<input type="text" id="mirror_field1" value="" readonly />
<br>
Date 2
<div class="input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
<input size="16" type="text" value="" readonly>
<br>
Link2
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="text" id="mirror_field2" value="" readonly />
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "mirror_field1",
linkFormat: "yyyy-mm-dd hh:ii",
linkField: "mirror_field2",
linkFormat: "yyyy-mm-dd hh:ii"
});
</script>
I use to create multiple datepicker with different id
$( "#datepickerA" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});
$( "#datepickerB" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});
$( "#datepickerC" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});
Then add each of them to my input field
<input name="date1" type="text" id="datepickerA" placeholder="date1"/>
<input name="date2" type="text" id="datepickerB" placeholder="date2"/>
<input name="date3" type="text" id="datepickerC" placeholder="date3"/>
This worked. Not sure why before it did not format the output correctly, but no need to add the linked field. It does it as a default. Just make a separate form and input id.
<div class="container">
<form id="form1" action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-4" data-date="1979-09-16T05:25:07Z" data-date-format="DD - MM dd, yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly >
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="text" id="dtp_input1" value="" /><br/>
</div>
<div class="form-group"><br/>
</div>
</fieldset>
</form>
</div>
<div class="container">
<form id="form2" action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-4" data-date="1979-09-16T05:25:07Z" data-date-format="DD - MM dd, yyyy - HH:ii p" data-link-field="dtp_input2">
<input class="form-control" size="16" type="text" value="" readonly >
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="text" id="dtp_input2" value="" /><br/>
</div>
<div class="form-group"><br/>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
minuteStep: 1,
todayHighlight: true,
startDate: new Date()
});
</script>

Categories

Resources