I am using flask to build some small application. I would like to build a form that collects a start date and an end date. Ideally I would like this form data to my database to run some search on date range. I found some example that is fairly close to what I am trying to do. One thing that I cant figure out is in the example the date range is predefined. I would like for at least the end date to be updated with the current date and not a predefined field.
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input style="width: 40%" class="form-control" type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$('input[name="daterange"]').daterangepicker(
{
locale: {
format: 'MM-DD-YYYY'
},
startDate: '01-01-2013',
endDate: '12-31-2013'
},
function(start, end, label) {
alert("A new date range was chosen: " + start.format('MM-DD-YYYY') + ' to ' + end.format('MM-DD-YYYY'));
});
</script>
Substitute 'moment()' for the hardcoded end date.
Example:
$('input[name="daterange"]').daterangepicker(
{
locale: {
format: 'YYYY-MM-DD'
},
startDate: '2013-01-01',
endDate: moment()
},
function(start, end, label) {
alert("A new date range was chosen: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
(Also, not sure if this was a copy/paste issue - but you are missing the 'https:' prefix on your script and stylesheet imports.)
Related
I have a custom appointment form with multiple locations. On Sundays all locations are closed. On Saturdays only a few locations are open. One location is so busy that all appointments need to be 1 week in advance at the very least.
I was finding answers saying, "You cannot update the current picker. You need to destroy it, set the reserved dates in an array, and rebuild the datepicker with those options.", which meant duplicating the datepicker that's on the custom form with all it's odd regional formats and options.
Then, after telling everyone it's going to be more work than it's worth I found out you can just out the next 7 days dynamically with:
$('input.datepicker').datepicker( 'option', 'minDate', '+7d');
That works! Then also found you could tell the current datepicker to switch to today's date with this:
$('input.datepicker').datepicker('setDate', 'today');
So can I get a live datepicker to hide weekends? I should be able to but the option I found fails:
$('input.datepicker').datepicker({ beforeShowDay: jQuery.datepicker.noWeekends });
I really want to be able to say, "no weekends" or "no sundays", without destroying and rebuilding, but it's not a popular topic since most forms don't need to update the datepicker dynamically.
Here's a simple fiddle of what I'd like to accomplish: https://jsfiddle.net/56qsau34/
EDIT: So I was really close but I had the wrong method(?) for applying an update to the live datepicker. If you take the last guess and write it properly it works!
$('input.datepicker').datepicker( 'option', 'beforeShowDay', jQuery.datepicker.noWeekends );
EDIT #2: Just for the poor soul that finds this without the final solution. When you realize that you need to 'toggle' the noWeekends feature this function that returns all the dates with 'true' will come in real handy:
$('input.datepicker').datepicker('option', 'beforeShowDay', function(d) {
var year = d.getFullYear(),
month = ("0" + (d.getMonth() + 1)).slice(-2),
day = ("0" + (d.getDate())).slice(-2);
var formatted = year + '-' + month + '-' + day;
//is it a sunday - this was the missing bit for all my specs
if (d.getUTCDay() != 0) {
return [true, "",""];
}else{
return [false, "",""];
}
}
Yes, you can change the options without destroying the widget.
$.datepicker.noSundays = function (date) {
return [ date.getDay() != 0, "" ];
}
$("#foo").click(function() {
$("input").datepicker();
});
$("#nowknd").click(function() {
$("#datepicker").datepicker('option', 'beforeShowDay', $.datepicker.noWeekends);
});
$("#okwknd").click(function() {
$("#datepicker").datepicker('option', 'beforeShowDay', '');
});
$("#nosuns").click(function() {
$("#datepicker").datepicker('option', 'beforeShowDay', $.datepicker.noSundays);
});
$("#weekblock").click(function() {
$("#datepicker").datepicker('option', 'minDate', '+7d');
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date:<input type="text" id="datepicker"></p>
<p>
<button id="foo">Make it a datepicker</button>
<button id="nowknd">Block weekends</button>
<button id="okwknd">Allow weekends</button>
<button id="nosuns">Block Sundays</button>
<button id="weekblock">Block off a week</button>
</p>
Does this help?
Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?
weekends visible but not selectable.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
want to hide weekends from calendar
https://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holid
-->
<title>jQuery UI Datepicker - Disable the Selection of some days </title>
<link href="jquery-ui-1.10.3.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-2.2.0.min.js"
integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"
integrity="sha256-lnH4vnCtlKU2LmD0ZW1dU7ohTTKrcKP50WA9fa350cE="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
$(".datepicker1").datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
</script>
</head>
<body>
<h3>Click in the TextBox to select a date :</h3>
<p>weekends are not selectable</p>
<input type="text" class="datepicker1" />
</body>
</html>
I am running bootstrap datepicker, with an inline calendar and a date range. The following works in terms of front end buttons highlighting, but the input isn't showing the value range`.
NOTE I am looking to get the comma separated years only like 2014, 2018 and we can only select two years max as per a range.
$('#sandbox-container').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: true,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#sandbox-container');
if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div id="sandbox-container"></div>
<input type="text" id="date" value="">
You're not setting the value on the "date" input field. You're setting it on the "sandbox-container" div. Change it to the input field and it will start to populate the text field.
Additionally, I'd check the documentation for the bootstrap datepicker daterange: https://bootstrap-datepicker.readthedocs.io/en/v1.7.1/markup.html#daterange
Here I've made some adjustments to the JS (reference date element and call datepicker show method) and HTML (removed sandbox-container)
$('#date').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: false,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#date');
if(elem.data("selecteddates") == dates.join(","))
return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2)
dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
$("#date").datepicker("show");
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<input type="text" id="date" value="">
This is similar to the messages app on an iphone, where newer text messages you get will simply show you the time in a format like 9:55 PM, but once they are a day old it says Yesterday, and anything older than a day says the day of that week Monday, Tuesday, etc, anything older than that week just displays that date like 12/22/2014.
I've been able to successfully format my timestamps using the date filter:
{{message.timestamp | date:"h:mm a" }}
What would work best for something like this, a custom filter? Is it possible purely in angular?
You can use moment.js date library with angular filter to achieve that. moment has various standard formatting expressions available. Take a look at the documentation.
Include moment.js in your application, you can download it or refer to a cdn location. Example:
//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js
Create a filter:
.constant('moment', window.moment) //Save moment in constant for ease of dependency injection
.filter('dateMoment', ['moment', function(moment){
return function(input){
//Return formatted date
if(!input) return '_';
return moment(input).calendar();
}
}]);
Use the filter with the binding:
{{message.timestamp | dateMoment }}
Demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, moment) {
var currDt = new Date();
$scope.messages = [{
message: 'message1',
date: currDt
}, {
message: 'message11',
date: (new Date(currDt)).setDate(currDt.getDate()-1)
}, {
message: 'message3',
date: (new Date(currDt)).setDate(currDt.getDate()-3)
}, {
message: 'message4',
date: (new Date(currDt)).setDate(currDt.getDate()-4)
}, {
message: 'message5',
date: (new Date(currDt)).setDate(currDt.getDate()-5)
}, {
message: 'message2',
date: (new Date(currDt)).setDate(currDt.getDate()-30)
}]
}).constant('moment', moment).filter('dateMoment', ['moment',
function(moment) {
return function(input) {
return moment(input).calendar();
}
}
]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="moment.js#*" data-semver="2.8.3" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="msg in messages">{{msg.message}} ---- {{msg.date|dateMoment}}</div>
</body>
</html>
I'm using bootstrap-datepicker. I do a getDate immediately after doing a setDate, but get the wrong value. I don't understand what I'm doing wrong.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<input class='date' data-date-format="M d, yyyy">
<script>
var new_date = moment().subtract('days', 30).toDate();
console.log('new_date:', new_date);
$('.date').datepicker('setDate', new_date);
$('.date').datepicker('update');
console.log('date:', $('.date').datepicker('getDate'));
</script>
It seems it doesn't like your , in the date format. Drop it and it prints the correct date. Note that datepicker also uses , as a multi-date separator.
Changing the default multidateSeparator allows the comma in the formatting string.
$(".date").datepicker({
multidateSeparator: ";"
});
or
<input class="date" data-date-format="M d, yyyy"
data-date-multidate-separator=";" />
I want a date picker which gives the date in this format
January 19, 2012
I already have some date pickers but they are showing dates like this:
12/10/2013
Lots of formats here
You can even customise them. Hope it helps!
Try this Demo
Script
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker({
dateFormat: 'MM dd,yy', onSelect: function (datetext) {
$('#datepicker').val(datetext);
},
});
});
</script>
HTML
<input type="text" id="datepicker"/>
Try this.
set this to ur date picker.
datePicker.timeZone = [NSTimeZone localTimeZone];
self.datePicker.datePickerMode = UIDatePickerModeDate;