Create view
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<br />
<label>Start Time</label>
<br />
<div class="dp">
<input type="text" class="form-control" id="datetimepicker6" />
</div>
</div>
</div>
Javascript for calendar
<script type="text/javascript">
var array = ["2015-12-25", "2015-12-24", "2015-12-31"]
$('.datepicker').datepicker({
beforeShowDay: function (date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return [array.indexOf(jQuery.datepicker.formatDate('yy-mm-dd', date)) == -1]
} else {
return noWeekend;
}
}, minDate: 0
});
$(function () { $('#startDate').datepicker({ beforeShowDay: $.datepicker.noWeekends }); });
$(function () {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$('#datetimepicker6').datetimepicker({
minDate: new Date(currentYear, currentMonth, currentDate), daysOfWeekDisabled: [0, 6],
disabledDates: [
moment("12/25/2015"),
moment("12/24/2015")
]
});
$('#datetimepicker7').datetimepicker({
minDate: new Date(currentYear, currentMonth, currentDate), daysOfWeekDisabled: [0, 6],
disabledDates: [
moment("12/25/2015"),
moment("12/24/2015")
]
});
});
</script>
I have a create action where I can choose the startDate and EndDate using a calendar. But after I select the dates and create, the dates don't get saved in the database but other values in the same form do. Thus it doesn't appear in the table as well. How do I solve this?
Your manually generating the <input> element but not giving it a name attribute so its value is not posted back. The name attribute needs to match the name of your model property, and the best way to generate this is to use the strongly typed html helpers
#Html.TextBoxFor(m => m.yourPropertyName, new { #class = "form-control" })
which will generate an id attribute id="yourPropertyName" so that the script can refer to $('#yourPropertyName').datetimepicker(). Alternatively, you can give it a different id attribute using new { #class = "form-control", id="datetimepicker6" }
Related
I have two date in html Datefrom and Dateto input text with ddmmyyyy format. I am trying to find out the difference between Datefrom and Dateto in Keyup event of Datefrom.
<input type='text' asp-for="Datefrom " class="form-control " id="Datefrom " />
<input type='text' asp-for="Dateto " class="form-control " id="Dateto " />
I am trying to find out the difference between two date in JavaScript as given below. The difference is not showed as correctly.
<script>
$("#Datefrom").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });
$("#Dateto").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });
$('#Datefrom ').keyup(function () {
var stdatestring = $('#Datefrom').val();
var missdatestring = $('#Dateto').val();
var stdateval = moment(stdatestring, 'DD/MM/YYYY').toDate();
var datefromval = moment(missdatestring, 'DD/MM/YYYY').toDate();
var diffdate = missdatestring - stdatestring
});
</script>
I'm trying to change the value of a jQuery datepicker input element in a form to the first date in the week of the user-selected date once the submit button is clicked but before the form is actually submitted.
I'm finding that the following Javascript works (using a class selector in .find()):
$("form").submit( function(event) {
$(this).closest('form').find('.week-picker').datepicker( "setDate", startDate );
var current_date = $(this).closest('form').find('.week-picker').datepicker( "getDate" );
return;
});
startDate is a Date object.
But this code does not work (using an ID selector in .find()):
$("form").submit( function(event) {
$(this).closest('form').find("#week-picker").datepicker( "setDate", startDate );
var current_date = $(this).closest('form').find('.week-picker').datepicker( "getDate" );
return;
});
console.log($(this).closest('form').find(".week-picker").datepicker( "setDate", startDate ).val()); produces a proper date, like 06/27/2018.
console.log($(this).closest( 'form' ).find('#week-picker').val()); produces undefined.
Why is this happening? Isn't an ID a valid selector?
HTML:
<form action="/checkin" method="post">
<div class="form-group row mb-2">
<div class="col-md-6 offset-md-3">
<input class="week-picker form-control" type="text" id="week-picker" name="week_start" placeholder="Select week" style="opacity: 0;position: absolute;">
</div>
</div>
<div class="form-group row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
The datepicker portion of my JS:
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$(this).closest( 'form' ).find('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$(this).closest( 'form' ).find('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$(document).on( 'mousemove','.week-picker .ui-datepicker-calendar tr',function() {$(this).find('td a').addClass('ui-state-hover'); });
$(document).on('mouseleave','.week-picker .ui-datepicker-calendar tr',function() {$(this).find('td a').removeClass('ui-state-hover'); });
#week-picker is a valid selector, as long as your input has that ID assigned. What is happening in your case is that there is JS turning your input into a datepicker, and it changes the ID of the element when it loads. As you posted from your element inspector, your input no longer has the week-picker ID, it is now dp1529862475978.
This is not uncommon, and the behavior you're getting is the expected one. If you need to make sure that you're targeting this datepicker instead of another one with the same class, you can use the name attribute:
$("input[name='week_starting']")
You should never have 2 inputs with the same name on the same page, so it's as unique as an ID. The ID you're seeing in the element inspector is probably randomly generated, so you don't want to use that.
I'm trying to disable few date range arrays using BeforeShowDay fucntion in Bootstrap-Datepicker.
I have such code:
var dateArray2 = getDates(new Date("2016-12-20 14:57:28"), (new Date("2016-12-22 14:57:28")).addDays(0));
var dateArray3 = getDates(new Date("2016-12-22 14:57:28"), (new Date("2016-12-25 14:57:28")).addDays(0));
var dateArr = new Array();
dateArr.push(dateArray2);
dateArr.push(dateArray3);
//Datepicker init
$('.date').datepicker({
format: 'dd-mm-yyyy',
startDate: date,
autoclose: true,
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
$.each(dateArr,function (key, value) {
return value.indexOf(string) == -1;
});
}
});
But looping the array with dates not working and I have no dates disabled.
How can I disable 2,3 or more arrays with dates?
Thanks.
Instead of jQuery.each you may use jQuery.inArray.
In order to convert the date parameter to the format 'yy-mm-dd' you can use moment.js.
The snippet:
var date = new Date();
var forbiddeneDates = ['16-12-18','16-12-19','16-12-20'];
$('.date').datepicker({
format: 'dd-mm-yyyy',
startDate: date,
autoclose: true,
beforeShowDay: function (date) {
var dateStr = moment(date).format('YY-MM-DD');
return $.inArray(dateStr,forbiddeneDates) == -1;
}
});
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<div class="input-group date">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
i have 2 views. one of them calls the other one for the script of the datetime picker. right now what i get is a datetime picker that had past dates disabled. what i want to get is a date picker that not only has past date disabled but also has the passed time disabled. i am posting my code below.
This is my first view where the datepicker is displayed.
<input class="field-input form_datetime_houseboat" type="text" readonly placeholder="Starting Date" name="fromdate" id="fromdate">
my 2nd view has the section:
<script type="text/javascript">
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var dt = new Date();
var timed = new Date(dt.getHours(), dt.getMinutes());
$(".form_datetime").datetimepicker({format: 'dd-mm-yyyy hh:ii', startDate:today, minTime: timed});
</script>
thanks in advance.
try this script :helps to disable previoue date and time. create new date object as minDate
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simple-dtpicker.js"></script>// datetime picker
<div id="date_picker"> </div>
<script type="text/javascript">
$(function(){
var dateToday = new Date();
var dates = $('#date_picker').dtpicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
</script>
Hi i have two datetime picker and using jquery 1.7.2 in both the datetime picker i need date and time defaultly presently am getting these after click box but i need before click only . am using jsfiddle http://jsfiddle.net/srknthcse/f9raubjp/ thank you for your help
$(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#datepicker1').val(datetext);
},
});
});
Instead of setting datepicker to an input field set it to a div. Then use a hidden input for the value as shown on the fiddle:
http://jsfiddle.net/8ztsjcos/2/
<input type="hidden" id="to">
<input type="hidden" id="from">
$(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#to').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#from').val(datetext);
},
});
});