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
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.
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.
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.
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.
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>