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.
Related
I am using Bootstrap Multi Select Date Picker
HTML5:
<div class="form-group ">
<label for="unavailable_date" class="control-label col-lg-2" >unavailable date list</label>
<div class="col-lg-10">
<input type="text" id="unavailable_date" class="form-control date" placeholder="unavailable date list">
</div>
</div>
JS
$('.date').datepicker({
multidate: true,
format: 'dd-mm-yyyy'
});
Whenever I click on submit button the validation message just appears and breaks the process, how may I disable the validation on this element?
$('.date').datepicker({
multidate: true,
format: 'dd-mm-yyyy'
});
$('#onSubmit').click(function(){
var selectDate = $("#unavailable_date").val();
console.log(selectDate);
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<div class="form-group ">
<label for="unavailable_date" class="control-label col-lg-2" >unavailable date list</label>
<div class="col-lg-10">
<input type="text" id="unavailable_date" class="form-control date" placeholder="unavailable date list">
</div>
</div>
<div class="form-group">
<button id="onSubmit" class="btn btn-primary" >Submit</button>
</div>
</body>
</html>
you can try this
I think the problem is in your css. I replicated the code you have posted and I didn't get "please enter a valid date error".
Ok, the problem is another programmer has enabled jquery-validation, therefore, the submit button will always check and when the result is not matched the jquery-validation it will returns an error and break.
I have two input boxes one is for selecting date and another for time, I am trying to validate these two boxes based on some conditions, such that if the date is not selected, the time should not get selected and i'm using eonasdan datetimepicker, i'm getting the desired output but not with the single click on a timepicker can some one help me out with this Thank you
Here's what i have done so far :
function starttime(){
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date()
});
}
$('.start_time_addon').on('click keyup',function(){
var x = $('#start').val();
if (x == '') {
alert('please select startdate first');
return false;
}
else{
starttime();
}
});
var datePickerSix= $('.datetimepicker6');
$(datePickerSix).datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Start Date</label><br>
<div class='input-group date datetimepicker6'>
<input type='text' class="form-control" id="start" name="date_end"
placeholder="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date start_time_addon' id='starttime'>
<input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
$('.datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
});
$('.datetimepicker6').on("dp.change", function(e) {
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date()
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Start Date</label><br>
<div class='input-group date datetimepicker6'>
<input type='text' class="form-control input_date" id="start" name="date_end"
placeholder="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date start_time_addon' id='starttime'>
<input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Here are the code for enabling datepicket to work in firefox
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="js/vendor/modernizr-custom.js"></script>
<script type="text/javascript">
var datefield=document.createElement("input");
datefield.setAttribute("type", "date");
if (datefield.type!=="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css " rel="stylesheet" type="text/css" />\n');
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n');
}
</script>
<script>
$(function(){
if (!Modernizr.inputtypes.date) { //if browser doesn't support input type="date", initialize date picker widget:
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat : 'dd-mm-yy'
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
Below are the html code
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
What I want is when I click on the glyphicon icon/button, that the calendar also appear so that I can choose a date to input into the same field just like the input type=date.
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<label class="input-group-addon" for="datefield">
<i class="glyphicon glyphicon-calendar"></i>
</label>
</div>
</div>
Change span containing glyphicon-calendar to label, add attribute for with the ID of parent datetimepicker (in this case ID is datefield), your glyphicon-calendar icon is now clickable and will open the date time picker.
Thanks #Washington Guedes for original answer
btw this solution won't work if you nest your date time picker in html table for some reason - thought this info might be useful... you have to use bootstrap.
I want to make my DateTimePicker format to be yyyy-mm-dd because it is the format that I've inserted in my database.
Here is the markup:
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
And here is the code I wrote to change the format, but it doesn't work:
$(document).ready(function() {
$(function () {
$('.datepicker').datetimepicker({
format: 'YYYY-MM-DD'
});
});
});
$('.datetimepicker').datetimepicker({
timepicker: false,
format: 'Y-m-d',
closeOnDateSelect: true,
scrollInput: false
});
The problem is your jQuery selector, you should use $('[data-provide="datepicker"]') instead of $('.datepicker') or add a datepicker class to your input.
Here a working example:
$('[data-provide="datepicker"]').datetimepicker({
format: 'YYYY-MM-DD'
});
<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="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
In your jQuery code, it uses a datepicker class but you are not using it correctly. You should use it like below
<div class="col-sm-6">
<div class="input-group date datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
Anyway, you do not have to use the same format in your database as you can update the date on your backend code with the proper database format later.
I am using the bootstrap-datetimepicker from:
http://eonasdan.github.io/bootstrap-datetimepicker/
Mainly because I need, in my application, a widget to display time. The other datepicker widgets handled, mostly, only dates, and I need a standardized widget.
Thing is, when I had the other widget on, this piece of code worked well with the following Javascript except:
<div class="col-lg-5 col-sm-5 col-xs-10">
<div class="well with-header">
<div class="header">
<label th:for="timepicker4" th:value="${hourIntervalStart}" th:text="#{scheduler.intervalStartTime}">Hour Interval Start: </label>
</div>
<div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
<input name="hourIntervalStart" th:value="${hourIntervalStart}" th:field="*{hourIntervalStart}" id="timepicker4" class="form-control tp_interval1"></input>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-2 col-xs-4">
<div class="well with-header">
<div class="header">
<label th:for="interval1" th:value="${increment}" th:text="#{scheduler.increment}">Interval (minutes): </label>
</div>
<div>
<div class="input-group">
<input name="increment" type="text" th:field="*{increment}" id="interval1" class="form-control" ></input>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-sm-5 col-xs-10">
<div class="well with-header">
<div class="header">
<label th:for="timepicker5" th:text="#{scheduler.intervalEndTime}">Hour Interval End:</label>
</div>
<div>
<div class="input-group">
<input name="hourIntervalEnd" id="timepicker5" type="datetime" th:value="${hourIntervalEnd}" th:field="*{hourIntervalEnd}" class="form-control tp_interval1" ></input>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
</div>
The javascript section that used to work nicely upon the onClose event of the widget is:
$('#timepicker4').datetimepicker({
locale: 'pt-br',
format: 'HH:mm'
});
$('#timepicker5').datetimepicker({
locale: 'pt-br',
format: 'HH:mm'
});
$('.tp_interval1').change(function () {
// get values
var valuestart = $('#timepicker4').val();
var valuestop = $('#timepicker5').val();
var start = moment(valuestart, 'HH:mm');
var stop = moment(valuestop, 'HH:mm');
// create date format
var valuestart = new Date("01/01/2016 " + start).getTime();
var valuestop = new Date("01/01/2016 " + stop).getTime();
var diff = timeStop - timeStart;
var minutesDiff = new Date(diff) / 60000;
$("#interval1").val(minutesDiff);
});
What I want is that the time difference in minutes is automatically shown in the "#interval1" input.
What am I missing here?
You need to use dp.change instead of the change event. As per the documentation you may use the following other events as well.
dp.hide
dp.show
dp.change
dp.error
dp.update
I added the event handler for one datetimepicker and it seemed to work. For the interval to reflect correctly, you need to add the dp.change event handler for datetimepicker2 as well - so that the interval changes also when a new date is chosen in datetimepicker2.
HTML:
<div class="container">
<div class="row">
<div class='col-sm-4'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-4'>
<input type='text' id="interval" value=''/>
</div>
<div class='col-sm-4'>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Javascript part:
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'MM/DD/YYYY HH:mm'
});
$('#datetimepicker2').datetimepicker({
format: 'MM/DD/YYYY HH:mm'
});
$('#datetimepicker1').on('dp.change', function (e) {
//here you can use e.date to get the date selected in the current datepicker
var ms = e.date.diff($('#datetimepicker2').data('DateTimePicker').date());
var d = moment.duration(ms);
var s = Math.floor(d.asHours());
$('#interval').val(s);
});
});
In the end, I got it right by doing this:
$(".tp_interval1").on("dp.change", function (e){
// get values
var valuestart = $('#timepicker4').val();
var valuestop = $('#timepicker5').val();
var start = moment(valuestart, 'HH:mm');
var stop = moment(valuestop, 'HH:mm');
var diff = moment(stop, "HH:mm") - moment(start, "HH:mm");
$("#interval1").val(diff / 60000);
});