I want to make my input type loggerTxt in date('F Y'); but I can't modify this log(data.dateFrom). I want to ask if it is possible to change it since I am a newbie.
<div class="wrapper">
<h3>Range</h3>
<input type="text" id="daterange">
<input type="text" id="range-from">
<input type="text" id="range-to">
<input type="text" id="loggerTxt">
</div>
</div>
<script type="text/javascript" src="../dist/duDatepicker.js"></script>
<script type="text/javascript">
function log (message) {
document.querySelector('#loggerTxt').value = message
}
document.addEventListener("DOMContentLoaded", function() {
duDatepicker.defaults({ auto: true, theme: 'dark', format: 'mmmm d, yyyy' });
duDatepicker('#daterange', {
range: true, outFormat: 'yyyy-mm-dd', fromTarget: '#range-from', toTarget: '#range-to',
clearBtn: true, theme: 'blue',
events: {
dateChanged: function (data) {
console.log('new date', data)
log(data.dateFrom)
}
}
})
})
</script>
Related
I am trying to click on fromdate and it doesn't open calendar. If I click on todate it opens calendar, and after that if I click fromdate input it opens calendar. I don't know why it is happening?
<link rel="stylesheet" href="{{url('/css/bootstrap-datetimepicker.min.css')}}">
<script src="{{url('/js/moment-with-locales.min.js')}}"></script>
<script src="{{url('/js/bootstrap-datetimepicker.min.js')}}"></script>
<script>
function exportbydate() {
swal({
title: "Choose dates",
html: `<form action="{{ url('/myaccount/view/transfer/pdf') }}" method="GET">`+
`<div class="row">
<input id="fromdate" name="fromdate" class="form-control" style="margin:10px; width: 50%" autocomplete="off">
<input id="todate" name="todate" class="form-control" style="margin:10px; width: 50%" autocomplete="off">
</div>`+
` <button type="submit" class="btn btn-primary" >{{trans('a_pdf.search')}}</button>`+
`</form>`,
type: "warning",
onOpen: function() {
var date = new Date();
date.setDate(date.getDate());
$("#fromdate").datetimepicker({
format: 'YYYY-MM-DD',
});
var date1 = new Date();
date1.setDate(date1.getDate());
$("#todate").datetimepicker({
format: 'YYYY-MM-DD',
});
},
width: '700px',
showCancelButton: false,
showConfirmButton: false
})
}
</script>
I am using the jquery.repeater field and would like to add a label on top of the the field that gets repeated.
See below my minimum viable example:
$(document).ready(function() {
'use strict';
$('.repeater').repeater({
defaultValues: {
'textarea-input': 'foo',
'text-input': 'bar',
'select-input': 'B',
'checkbox-input': ['A', 'B'],
'radio-input': 'B'
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
}
});
window.outerRepeater = $('.outer-repeater').repeater({
isFirstItemUndeletable: true,
defaultValues: {
'text-input': 'outer-default'
},
show: function() {
console.log('outer show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('outer delete');
$(this).slideUp(deleteElement);
},
repeaters: [{
isFirstItemUndeletable: true,
selector: '.inner-repeater',
defaultValues: {
'inner-text-input': 'inner-default'
},
show: function() {
console.log('inner show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('inner delete');
$(this).slideUp(deleteElement);
}
}]
});
});
<form action="echo.php" class="repeater" enctype="multipart/form-data">
<label>Product Name</label>
<label>Price</label>
<label>Date</label>
<label>Description</label>
<div data-repeater-list="group-a">
<div data-repeater-item>
<input name="untyped-input" value="A" />
<input type="text" name="text-input" value="A" />
<input type="date" name="date-input" />
<textarea name="textarea-input">A</textarea>
</div>
<input data-repeater-create type="button" value="Add" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>
I would like to have my final result look like the following:
As you can see, the label is directly over the repeated field.
Any suggestions what I am doing wrong?
I appreciate your replies!
You need to style the elements the same.
$(document).ready(function() {
'use strict';
$('.repeater').repeater({
defaultValues: {
'textarea-input': 'foo',
'text-input': 'bar',
'select-input': 'B',
'checkbox-input': ['A', 'B'],
'radio-input': 'B'
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
}
});
window.outerRepeater = $('.outer-repeater').repeater({
isFirstItemUndeletable: true,
defaultValues: {
'text-input': 'outer-default'
},
show: function() {
console.log('outer show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('outer delete');
$(this).slideUp(deleteElement);
},
repeaters: [{
isFirstItemUndeletable: true,
selector: '.inner-repeater',
defaultValues: {
'inner-text-input': 'inner-default'
},
show: function() {
console.log('inner show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('inner delete');
$(this).slideUp(deleteElement);
}
}]
});
});
label,input,textarea{display:inline-block; width:150px;}
label{border:solid 2px rgba(0,0,0,0);}
<form action="echo.php" class="repeater" enctype="multipart/form-data">
<label>Product Name</label>
<label>Price</label>
<label>Date</label>
<label>Description</label>
<div data-repeater-list="group-a">
<div data-repeater-item>
<input name="untyped-input" value="A" />
<input type="text" name="text-input" value="A" />
<input type="date" name="date-input" />
<textarea name="textarea-input">A</textarea>
</div>
<input data-repeater-create type="button" value="Add" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>
I'm using this plugin https://bootstrap-datepicker.readthedocs.io/en/latest/
The problem i'm facing comes from using the "range" form of this plugin.
From the docs I understand there's a way to capture the "changeDate" event and do something when this happens, however, when the initial date is higher than the end date, the end date gets updated inmediately and I don't want this behaviour; what I want is the end date to be blank and to re-select the end date instead, but I have no clue how to capture and modify this.
Thanks in advance.
EDIT2: To clarify, this happens when both dates are already entered, but then, you select a start date that is higher to the end date.
EDIT: Here's the load code to show which options i'm using.
$('.input-daterange').datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: lang,
daysOfWeekHighlighted: "0,6",
startDate: obj.initialDate,
orientation: "bottom auto",
autoclose: true,
showOnFocus: false,
maxViewMode: 'days',
keepEmptyValues: true,
templates: {
leftArrow: '<',
rightArrow: '>'
}
});
The snippet below shows the order of changeDate event firing. If a user set started date value that is later then finished date, then the changeDate event will be fired on finish input firstly.
$('.input-daterange').datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: "en",
daysOfWeekHighlighted: "0,6",
startDate: "01/01/2017",
orientation: "bottom auto",
autoclose: true,
showOnFocus: true,
maxViewMode: 'days',
keepEmptyValues: true,
templates: {
leftArrow: '<',
rightArrow: '>'
}
});
$('.input-daterange').on('changeDate', function(e){
console.log(e.target.name + ": " + $(e.target).val());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
<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-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="input-group input-daterange">
<span class="input-group-addon">From</span>
<input type="text" name="start" class="form-control" value="22/05/2017">
<span class="input-group-addon">to</span>
<input type="text" name="finish" class="form-control" value="22/05/2017">
</div>
Therefore, it is neccessary to detect the reason of the firing. If the reason is not a user action then reset value of date. Also I find that preventDefault() method does not work for this event. Thus, I used two auxiliary variables to solve your question:
var userTarget = "";
var exit = false;
$('.input-daterange').datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: "en",
daysOfWeekHighlighted: "0,6",
startDate: "01/01/2017",
orientation: "bottom auto",
autoclose: true,
showOnFocus: true,
maxViewMode: 'days',
keepEmptyValues: true,
templates: {
leftArrow: '<',
rightArrow: '>'
}
});
$('.input-daterange').focusin(function(e) {
userTarget = e.target.name;
});
$('.input-daterange').on('changeDate', function(e) {
if (exit) return;
if (e.target.name != userTarget) {
exit = true;
$(e.target).datepicker('clearDates');
}
exit = false;
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
<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-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="input-group input-daterange">
<span class="input-group-addon">From</span>
<input type="text" name="start" class="form-control" value="20/05/2017">
<span class="input-group-addon">to</span>
<input type="text" name="finish" class="form-control" value="22/05/2017">
</div>
I have an update panel in my page.aspx, and inside the update panel I have textbox with bootstrap timepicker, I show an example:
<asp:UpdatePanel runat="server" id="upd1">
<ContentTemplate>
<div class="form-group">
<div class="row col-md-12 col-md-offset-0">
<label class="control-label">Monday</label>
</div>
</div>
<div class="form-group col-md-3">
<div class="input-group bootstrap-timepicker timepicker input-sm">
<asp:TextBox runat="server" ID="txtFecIni_1" class="form-control input-small "></asp:TextBox>
<span class="input-group-addon "><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="form-group col-md-3">
<div class="input-group bootstrap-timepicker timepicker input-sm">
<asp:TextBox runat="server" ID="txtFecFin_1" class="form-control input-small "></asp:TextBox>
<span class="input-group-addon "><i class="fa fa-clock-o"></i></span>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Under the </ form> of my page I add this javascript code:
<script type="text/javascript">
window.onload = function () {
$('#txtFecIni_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
$('#txtFecFin_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
}
</script>
<script src="js/jquery-2.2.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-timepicker.js"></script>
The timepicker works properly until an object is thrown autopostback. How can I solve this?
Thanks.
I solve my problem at this way:
I change window.onload = function () for function pageLoad()
like that:
Before:
<script type="text/javascript">
window.onload = function () {
$('#txtFecIni_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
$('#txtFecFin_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
}
</script>
After:
<script type="text/javascript">
function pageLoad() {
$('#txtFecIni_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
$('#txtFecFin_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
}
</script>
I read that the Pageload is called on every postback.
Hopefully this will be helpful to someone
this is due to postback of asp.net control here is explaination
Use Sys.WebForms.PageRequestManage
and your code will be something like this..
<script>
jQuery(document).ready(function () {
$('#txtFecIni_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
$('#txtFecFin_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('#txtFecIni_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
$('#txtFecFin_1').timepicker({
minuteStep: 30,
defaultTime: false,
showMeridian: false
});
});
</script>
Datepicker is working in below jsp
<script type="text/javascript">
$(document).ready( function() {
$("#datefrom").datepicker({
changeMonth : true, changeYear : true, onSelect :
function(selected) {
$("#dateto").datepicker("option",
"minDate", selected) }
});
<div class="user-form.row">
<div class="form-lable">From Date :</div>
<div class="form-comp">
<input type="text" size="5" id="datefrom"name="datefrom" required="required" />
</div>
BUT datepicker is not working in below jsp I have used same code in both files I have included same .js files in both the files
$(document).ready(function() {
alert("hi doc ready"); //added by Shrikant on 14-12-2015
$("#issuedDate").datepicker({ changeMonth : true, changeYear :
true });
<div class="user-form.row"> <div class="form-lable"> Issued date
: </div> <div class="form-comp"> <input type="text" size
="5" id="issuedDate" name="issuedDate" required="required" />
</div> </div>